Merge branch 'feat/carbon-for-ibm-dotcom-v2' into feat/callout-with-m…

…edia-v2
ariellalgilmore · Sep 18, 2023 · 0297243 · 0297243
2 parents 4aea31f + de094c0
commit 0297243
Show file tree

Hide file tree

Showing 40 changed files with 1,045 additions and 449 deletions.
diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md
@@ -18,6 +18,7 @@ For Carbon v11 migration guidance, see their
 | back-to-top               | View changes [here](#backtotop)        |
 | background-media          | No API changes.                        |
 | button                    | This component is deprecated in v2 in favor for Carbon's core Button |
+| button-group              | No API changes. |
 | callout-with-media        | View changes [here](#callout-with-media)          |
 | callout-quote             | View changes [here](#callout-quote)          |
 | card                      | View changes [here] (#card)            |

diff --git a/packages/styles/scss/components/button-group/_button-group.scss b/packages/styles/scss/components/button-group/_button-group.scss
@@ -7,42 +7,20 @@
 
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/colors' as *;
-@use '@carbon/styles/scss/components/button' as *;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
+
 @use '../../globals/vars' as *;
 @use '../lightbox-media-viewer';
+@use '../button';
 
 @mixin button-group {
-  @include button;
-
-  .#{$prefix}--button-group,
-  :host(#{$c4d-prefix}-button-group),
-  :host(#{$c4d-prefix}-leadspace-block-cta) {
-    --#{$c4d-prefix}--button-group--item-count: 3;
-
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-auto-rows: 1fr;
-    grid-gap: $spacing-05;
-
-    @include breakpoint(md) {
-      display: inline-grid;
-      grid-template-columns: repeat(
-        var(--#{$c4d-prefix}--button-group--item-count),
-        1fr
-      );
-    }
-
-    @media print {
-      display: block;
-    }
-  }
-
-  .#{$prefix}--button-group-item,
   :host(#{$c4d-prefix}-button-group-item),
   :host(#{$c4d-prefix}-button-cta) {
+    @extend :host(#{$c4d-prefix}-button);
+
+    outline: none;
     max-width: 100%;
     min-width: 0;
 
@@ -53,10 +31,7 @@
     }
 
     .#{$prefix}--btn {
-      font-size: $spacing-05;
-      position: relative;
       width: 100%;
-      height: 100%;
       word-break: break-word;
       transition: all $duration-fast-01 motion(entrance, productive), width 0s,
         height 0s;
@@ -100,26 +75,33 @@
     }
   }
 
+  :host(#{$c4d-prefix}-button-group),
+  :host(#{$c4d-prefix}-leadspace-block-cta) {
+    --#{$c4d-prefix}--button-group--item-count: 3;
+
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-auto-rows: 1fr;
+    grid-gap: $spacing-05;
+
+    @include breakpoint(md) {
+      display: inline-grid;
+      grid-template-columns: repeat(
+        var(--#{$c4d-prefix}--button-group--item-count),
+        1fr
+      );
+    }
+
+    @media print {
+      display: block;
+    }
+  }
+
   :host(#{$c4d-prefix}-button-group-item) {
     ::slotted([slot='icon']) {
-      position: absolute;
-      right: $spacing-05;
-      top: 50%;
-      transform: translateY(-50%);
-      flex-shrink: 0;
-
       @media print {
         fill: $gray-100;
       }
     }
   }
-
-  .#{$prefix}--button-group-item--pseudo {
-    position: absolute;
-    clip: rect(0, 0, 0, 0);
-
-    .#{$prefix}--btn {
-      width: auto;
-    }
-  }
 }
diff --git a/packages/styles/scss/components/button/_button.scss b/packages/styles/scss/components/button/_button.scss
@@ -0,0 +1,40 @@
+/**
+* Copyright IBM Corp. 2016, 2023
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../globals/vars' as *;
+@use '../../../../carbon-web-components/src/components/button/button';
+
+@mixin button {
+  :host(#{$c4d-prefix}-button) {
+    @extend :host(#{$prefix}-button);
+
+    svg {
+      @extend .#{$prefix}--btn__icon;
+    }
+
+    .#{$prefix}--btn--hidden {
+      display: none;
+      visibility: hidden;
+
+      @media print {
+        display: inline-block;
+        visibility: visible;
+        font-weight: 200;
+        color: $text-primary;
+
+        span {
+          font-weight: 600;
+          margin-left: calc(-1 * #{$spacing-02});
+          margin-right: $spacing-02;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/styles/scss/components/button/_index.scss b/packages/styles/scss/components/button/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'button';
+@use 'button';
+
+@include button.button;