fix(button): add min-height and bottom padding for wrapping (#14193)

* fix(button): add min-height and bottom padding for wrapping

* chore: demo story

* fix: code snippet and overflow menu button styles

* fix: code snippet button height

* chore: add large expressive to demo

* chore: update demo story for expressive

* fix: expressive large button

* chore: remove demo story

packages/react/src/components/Button/Button.tsx

@@ -64,7 +64,7 @@ interface ButtonBaseProps
   iconDescription?: string;
 
   /**
-   * Specify whether the Button is expressive, or not
+   * Specify whether the Button is expressive, or not. Only applies to the large/default button size.
    */
   isExpressive?: boolean;
 

packages/styles/scss/components/button/_button.scss

@@ -302,6 +302,11 @@
   //expressive styles
   .#{$prefix}--btn--expressive {
     @include type-style('body-compact-02');
+
+    padding-block: min(
+      calc((layout.size('height') - var(--temp-expressive-1lh)) / 2 - rem(1px)),
+      var(--temp-padding-block-max)
+    );
   }
 
   .#{$prefix}--btn--icon-only.#{$prefix}--btn--expressive {

packages/styles/scss/components/button/_mixins.scss

@@ -29,6 +29,12 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
         map.get($body-compact-01, line-height)
       )} * 1em
   );
+  --temp-expressive-1lh: (
+    #{custom-property.get-var(
+        'body-compact-02-line-height',
+        map.get($body-compact-02, line-height)
+      )} * 1em
+  );
   // -1px to compensate for border width
   --temp-padding-block-max: calc(
     (#{custom-property.get-var('layout-size-height-lg')} - var(--temp-1lh)) / 2 -
@@ -42,7 +48,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   display: inline-flex;
   width: max-content;
   max-width: rem(320px);
-  height: layout.size('height');
+  min-height: layout.size('height');
   flex-shrink: 0;
   justify-content: space-between;
   // Fix to remove added margins on buttons in safari (see #5155)
@@ -51,7 +57,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   cursor: pointer;
   outline: none;
   // -1px to compensate for border width
-  padding-block-start: min(
+  padding-block: min(
     calc((layout.size('height') - var(--temp-1lh)) / 2 - rem(1px)),
     var(--temp-padding-block-max)
   );

packages/styles/scss/components/code-snippet/_code-snippet.scss

@@ -306,6 +306,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--inline.#{$prefix}--btn {
     width: initial;
     height: 1.25rem;
+    min-height: 1.25rem;
     padding-inline: 0;
   }
 
@@ -334,6 +335,7 @@ $copy-btn-feedback: $background-inverse !default;
     right: 0;
     bottom: 0;
     display: inline-flex;
+    height: rem(32px);
     align-items: center;
 
     padding: $spacing-03 $spacing-05;

packages/styles/scss/components/overflow-menu/_overflow-menu.scss

@@ -35,6 +35,7 @@
     display: flex;
     width: rem(40px);
     height: rem(40px);
+    min-height: rem(40px);
     align-items: center;
     justify-content: center;
     cursor: pointer;