chore(card): style updates, etc

carbon-design-system · Dec 29, 2020 · b4b12ec · b4b12ec
1 parent ae3b722
commit b4b12ec
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/packages/styles/scss/components/feature-card-block-medium/_feature-card-block-medium.scss b/packages/styles/scss/components/feature-card-block-medium/_feature-card-block-medium.scss
@@ -22,13 +22,18 @@
     }
 
     .#{$prefix}--feature-card-block-medium__heading,
-    ::slotted(#{$dds-prefix}-feature-card-block-medium-heading) {
+    ::slotted(#{$dds-prefix}-card-heading) {
       @include carbon--type-style('expressive-heading-04', true);
 
       display: block;
       margin-bottom: $carbon--spacing-07;
     }
 
+    ::slotted(#{$dds-prefix}-card-heading) {
+      width: auto;
+      max-width: none;
+    }
+
     &:focus {
       outline: none;
     }

diff --git a/packages/styles/scss/components/feature-card/_feature-card.scss b/packages/styles/scss/components/feature-card/_feature-card.scss
@@ -32,7 +32,8 @@
     outline-offset: 2px;
   }
 
-  .#{$prefix}--card__heading {
+  .#{$prefix}--card__heading,
+  ::slotted(#{$dds-prefix}-card-heading) {
     margin-bottom: $layout-03;
   }
 }

diff --git a/packages/web-components/src/components/card/card-heading.ts b/packages/web-components/src/components/card/card-heading.ts
@@ -25,6 +25,16 @@ class DDSCardHeading extends LitElement {
   @property({ reflect: true })
   slot = 'heading';
 
+  connectedCallback() {
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'heading');
+    }
+    if (!this.hasAttribute('aria-level')) {
+      this.setAttribute('aria-level', '3');
+    }
+    super.connectedCallback();
+  }
+
   render() {
     return html`
       <slot></slot>

diff --git a/packages/web-components/src/components/card/card.scss b/packages/web-components/src/components/card/card.scss
@@ -34,7 +34,7 @@
   .#{$prefix}--card__pictogram {
     display: flex;
 
-    .#{$prefix}--card__heading {
+    ::slotted(#{$dds-prefix}-card-heading) {
       margin-bottom: 0;
       flex: 1;
       display: flex;
@@ -44,7 +44,7 @@
 
   &[pictogram-placement='bottom'] {
     .#{$prefix}--card__pictogram {
-      .#{$prefix}--card__heading {
+      ::slotted(#{$dds-prefix}-card-heading) {
         align-items: flex-start;
       }
     }