Merge branch 'master' into chore/carbon-upgrade-10.48.0

carbon-design-system · Nov 15, 2021 · 8c66c6c · 8c66c6c
2 parents aca6230 + 8d0eea3
commit 8c66c6c
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 0 deletions.
diff --git a/packages/styles/scss/components/buttongroup/_buttongroup.scss b/packages/styles/scss/components/buttongroup/_buttongroup.scss
@@ -30,6 +30,10 @@
         1fr
       );
     }
+
+    @media print {
+      display: block;
+    }
   }
 
   .#{$prefix}--buttongroup-item,
@@ -38,6 +42,12 @@
     max-width: carbon--mini-units(40);
     min-width: 0;
 
+    @media print {
+      max-width: carbon--rem(640px);
+      margin-bottom: $spacing-05;
+      display: block;
+    }
+
     .#{$prefix}--btn {
       font-size: 1rem;
       position: relative;
@@ -47,10 +57,37 @@
       transition: all $duration--fast-01 motion(entrance, productive), width 0s,
         height 0s;
 
+      @media print {
+        background: $white-0;
+        border: carbon--rem(1px) solid $gray-100;
+        color: $gray-100;
+        font-weight: 600;
+        display: block;
+        max-width: inherit;
+      }
+
       .#{$prefix}--btn__icon {
         width: auto;
         height: auto;
       }
+
+      .#{$prefix}--btn--hidden {
+        display: none;
+        visibility: hidden;
+
+        @media print {
+          display: inline-block;
+          visibility: visible;
+          font-weight: 200;
+          color: $gray-100;
+
+          span {
+            font-weight: 600;
+            margin-left: calc(-1 * #{$spacing-02});
+            margin-right: $spacing-02;
+          }
+        }
+      }
     }
 
     .#{$prefix}--btn--multiline {
@@ -65,6 +102,10 @@
       top: 50%;
       transform: translateY(-50%);
       flex-shrink: 0;
+
+      @media print {
+        fill: $gray-100;
+      }
     }
   }
 

diff --git a/packages/styles/scss/components/leadspace/_leadspace.scss b/packages/styles/scss/components/leadspace/_leadspace.scss
@@ -24,6 +24,10 @@ $btn-min-width: 26;
   .#{$prefix}--leadspace__section {
     display: flex;
     background-color: $ui-background;
+
+    @media print {
+      background-color: $white-0;
+    }
   }
 
   .#{$prefix}--leadspace__gradient__stops stop {
@@ -38,6 +42,10 @@ $btn-min-width: 26;
   .#{$prefix}--leadspace__title,
   .#{$prefix}--leadspace__desc {
     color: $text-01;
+
+    @media print {
+      color: $gray-100;
+    }
   }
 
   .#{$prefix}--leadspace--centered .#{$prefix}--leadspace__desc {
@@ -101,6 +109,10 @@ $btn-min-width: 26;
 
       @include carbon--breakpoint(md) {
         display: flex;
+
+        @media print {
+          display: block;
+        }
       }
     }
 
@@ -315,6 +327,10 @@ $btn-min-width: 26;
       width: 100%;
       height: 100%;
       padding-bottom: 0;
+
+      @media print {
+        display: none;
+      }
     }
 
     .#{$prefix}--leadspace__gradient__rect {
@@ -535,6 +551,11 @@ $btn-min-width: 26;
         display: block;
       }
     }
+
+    @media print {
+      display: none;
+      visibility: hidden;
+    }
   }
 }
 

diff --git a/packages/web-components/src/components/button/button.ts b/packages/web-components/src/components/button/button.ts
@@ -94,6 +94,7 @@ class DDSButtonExpressive extends FocusMixin(StableSelectorMixin(LitElement)) {
     const { _handleSlotChange: handleSlotChange } = this;
     return html`
       <slot @slotchange="${handleSlotChange}"></slot>
+      <p class="${prefix}--btn--hidden" aria-hidden="true"><span>:</span> ${this.href}</p>
       <slot name="icon" @slotchange="${handleSlotChange}"></slot>
     `;
   }

diff --git a/packages/web-components/tests/snapshots/dds-button-group.md b/packages/web-components/tests/snapshots/dds-button-group.md
@@ -20,6 +20,15 @@
 >
   <slot>
   </slot>
+  <p
+    aria-hidden="true"
+    class="bx--btn--hidden"
+  >
+    <span>
+      :
+    </span>
+    https://example.com
+  </p>
   <slot name="icon">
   </slot>
 </a>