[mercury][button-tertiary] Remove padding-inline (#651)

* `[mercury][button-tertiary]` Remove padding-inline

* `[showcase][dialog]` Add gap to `with-footer` case

* `[mercury][tests]` Update bundle tests

Update bundle tests due to applying button padding independently (primary, secondary, and tertiary) instead of globally (button base)

Author: bsastregx

packages/common/src/metadata/components/dialog/metadata.ts

@@ -167,6 +167,10 @@ export const dialogMetadata = parseMetadata({
         hideDialog: stateMapping => () => stateMapping?.set("show", false)
       },
       states: [{ name: "show", type: "boolean", value: false }],
+      customCssOnlyForPreview: `.footer {
+        display: flex;
+        gap:var(--mer-spacing--xs);
+      }`,
       template: [
         {
           tag: "button",
@@ -189,6 +193,7 @@ export const dialogMetadata = parseMetadata({
             CONTENT_WITH_SPACING,
             {
               tag: "div",
+              class: "footer",
               properties: [{ name: "slot", value: "footer" }],
               children: [
                 {

packages/mercury/src/base/button/_button-styles.scss

@@ -6,7 +6,6 @@
 %button-base {
   @include button-common-styles();
   @include control-border();
-  @include control-padding-inline-block();
 
   box-sizing: border-box;
   background-color: var(--button-background-color);
@@ -23,6 +22,7 @@
 %button-primary {
   @extend %button-base;
   @extend %body-semi-bold-m;
+  @include control-padding-inline-block();
 
   // In primary button, border color matches with background-color.
 
@@ -84,6 +84,7 @@
 %button-secondary {
   @extend %button-base;
   @extend %body-semi-bold-m;
+  @include control-padding-inline-block();
 
   // Default styles for the secondary button
   --button-background-color: transparent;
@@ -125,6 +126,7 @@
 %button-tertiary {
   @extend %button-base;
   @extend %body-regular-m;
+  @include control-padding-block();
 
   // Default styles for the tertiary button
   --button-background-color: transparent;

packages/mercury/src/tests/bundles/expected-bundle-content/all.json

@@ -19,7 +19,7 @@
   ".body-regular-m, .pill::part(item), .chat::part(message), .chat::part(assistant content waiting), .button-tertiary, .chat::part(action-button), .dropdown.button-tertiary::part(expandable-button), .dialog::part(close-button), .paginator::part(first__button), .paginator::part(last__button), .paginator::part(next__button), .paginator::part(prev__button) { font-size: var(--font-size-body-m); line-height: var(--line-height-tight); font-weight: var(--font-weight-regular); }",
   ".button-icon-and-text, .dropdown.button-with-icon::part(expandable-button) { display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--mer-spacing--xs); }",
   ".button-icon-only, .chat::part(action-button), .chat-live-audio-button, .chat::part(send-button), .chat::part(stop-response-button), .dialog::part(close-button), paginator__first-button-selector, paginator__last-button-selector, paginator__next-button-selector, paginator__previous-button-selector { padding: calc((var(--control__block-size) - 2*var(--control__border-width) - var(--mer-icon__box--md))/2); border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); }",
-  ".button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action) { --button-background-color: var(--mer-accent__primary); --control__border-color: var(--button-background-color); --button-color: var(--mer-text__on-primary); --button-color--enabled: var( --mer-text__on-primary ); --button-color--active: var(--mer-text__on-primary--active); }",
+  ".button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action) { padding-block: var(--control__padding-block); padding-inline: var(--control__padding-inline); --button-background-color: var(--mer-accent__primary); --control__border-color: var(--button-background-color); --button-color: var(--mer-text__on-primary); --button-color--enabled: var( --mer-text__on-primary ); --button-color--active: var(--mer-text__on-primary--active); }",
   ".button-primary-destructive { --button-background-color: var(--mer-accent__primary--destructive); --button-color: var(--mer-text__on-primary); }",
   ".button-primary-destructive:active { --button-background-color: var(--mer-accent__primary--destructive-active); --button-color: var(--mer-text__highlighted); }",
   ".button-primary-destructive:hover { --button-background-color: var(--mer-accent__primary--destructive-hover); --button-color: var(--mer-text__on-primary); }",
@@ -29,16 +29,16 @@
   ".button-primary:active, .dropdown.button-primary::part(expandable-button):active, .segmented-control-filled .segmented-control-item::part(action):active { --button-background-color: var(--mer-accent__primary--active); --button-color: var(--button-color--active); }",
   ".button-primary:disabled, .button-primary-destructive:disabled, .button-primary-success:disabled, .dropdown.button-primary::part(expandable-button):disabled { --button-background-color: var(--mer-accent__primary--disabled); --button-color: var(--mer-text__on-disabled); }",
   ".button-primary:hover, .dropdown.button-primary::part(expandable-button):hover, .segmented-control-filled .segmented-control-item::part(action):hover { --button-background-color: var(--mer-accent__primary--hover); --button-color: var(--mer-text__on-primary); }",
-  ".button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button) { --button-background-color: transparent; --control__border-color: var(--button-color); --button-color: var(--mer-text__neutral); --button-color--enabled: var(--mer-text__neutral); --button-color--active: var(--mer-text__on-primary--active); }",
+  ".button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button) { padding-block: var(--control__padding-block); padding-inline: var(--control__padding-inline); --button-background-color: transparent; --control__border-color: var(--button-color); --button-color: var(--mer-text__neutral); --button-color--enabled: var(--mer-text__neutral); --button-color--active: var(--mer-text__on-primary--active); }",
   ".button-secondary-destructive { --button-color: var(--mer-text__highlighted); --control__border-color: var(--mer-border-color__error); }",
   ".button-secondary-destructive:active { --button-color: var(--mer-text__highlighted); --control__border-color: var(--mer-border-color__error--active); }",
   ".button-secondary-destructive:hover { --button-color: var(--mer-accent__primary--destructive-hover); --control__border-color: var(--mer-border-color__error--hover); }",
   ".button-secondary:active, .chat-live-audio-button:active, .dropdown.button-secondary::part(expandable-button):active, .chat::part(send-button):active, .chat::part(stop-response-button):active { --control__border-color: var(--mer-border-color__primary--active); --button-color: var(--button-color--active); }",
   ".button-secondary:disabled, .button-secondary-destructive:disabled, .chat-live-audio-button:disabled, .dropdown.button-secondary::part(expandable-button):disabled, .chat::part(send-button):disabled, .chat::part(stop-response-button):disabled { --button-color: var(--mer-text__on-disabled); }",
   ".button-secondary:focus-visible, .chat-live-audio-button:focus-visible, .dropdown.button-secondary::part(expandable-button):focus-visible, .chat::part(send-button):focus-visible, .chat::part(stop-response-button):focus-visible { --focus__outline-color: var(--mer-border-color__primary); }",
   ".button-secondary:hover, .chat-live-audio-button:hover, .dropdown.button-secondary::part(expandable-button):hover, .chat::part(send-button):hover, .chat::part(stop-response-button):hover { --button-color: var(--mer-text__primary--hover); }",
-  ".button-tertiary, .chat::part(action-button), .dropdown.button-tertiary::part(expandable-button), .dialog::part(close-button), .paginator::part(first__button), .paginator::part(last__button), .paginator::part(next__button), .paginator::part(prev__button) { --button-background-color: transparent; --control__border-color: transparent; --button-color: var(--mer-text__primary); }",
-  ".button-tertiary, .chat::part(action-button), .dropdown.button-tertiary::part(expandable-button), .dialog::part(close-button), .paginator::part(first__button), .paginator::part(last__button), .paginator::part(next__button), .paginator::part(prev__button), .button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button), .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action) { display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: center; border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); padding-block: var(--control__padding-block); padding-inline: var(--control__padding-inline); box-sizing: border-box; background-color: var(--button-background-color); color: var(--button-color); }",
+  ".button-tertiary, .chat::part(action-button), .dropdown.button-tertiary::part(expandable-button), .dialog::part(close-button), .paginator::part(first__button), .paginator::part(last__button), .paginator::part(next__button), .paginator::part(prev__button) { padding-block: var(--control__padding-block); --button-background-color: transparent; --control__border-color: transparent; --button-color: var(--mer-text__primary); }",
+  ".button-tertiary, .chat::part(action-button), .dropdown.button-tertiary::part(expandable-button), .dialog::part(close-button), .paginator::part(first__button), .paginator::part(last__button), .paginator::part(next__button), .paginator::part(prev__button), .button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button), .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action) { display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: center; border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); box-sizing: border-box; background-color: var(--button-background-color); color: var(--button-color); }",
   ".button-tertiary:active, .chat::part(action-button):active, .dropdown.button-tertiary::part(expandable-button):active, .dialog::part(close-button):active, .paginator::part(first__button):active, .paginator::part(last__button):active, .paginator::part(next__button):active, .paginator::part(prev__button):active { --button-color: var(--mer-text__primary--active); }",
   ".button-tertiary:disabled, .chat::part(action-button):disabled, .dropdown.button-tertiary::part(expandable-button):disabled, .dialog::part(close-button):disabled, .paginator::part(first__button):disabled, .paginator::part(last__button):disabled, .paginator::part(next__button):disabled, .paginator::part(prev__button):disabled { --button-color: var(--mer-text__on-disabled); }",
   ".button-tertiary:hover, .chat::part(action-button):hover, .dropdown.button-tertiary::part(expandable-button):hover, .dialog::part(close-button):hover, .paginator::part(first__button):hover, .paginator::part(last__button):hover, .paginator::part(next__button):hover, .paginator::part(prev__button):hover { --button-color: var(--mer-text__primary--hover); }",

packages/mercury/src/tests/bundles/expected-bundle-content/components/button.json

@@ -1,7 +1,7 @@
 [
   ".button-icon-and-text { display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--mer-spacing--xs); }",
   ".button-icon-only { padding: calc((var(--control__block-size) - 2*var(--control__border-width) - var(--mer-icon__box--md))/2); border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); }",
-  ".button-primary, .button-primary-destructive, .button-primary-success { --button-background-color: var(--mer-accent__primary); --control__border-color: var(--button-background-color); --button-color: var(--mer-text__on-primary); --button-color--enabled: var( --mer-text__on-primary ); --button-color--active: var(--mer-text__on-primary--active); }",
+  ".button-primary, .button-primary-destructive, .button-primary-success { padding-block: var(--control__padding-block); padding-inline: var(--control__padding-inline); --button-background-color: var(--mer-accent__primary); --control__border-color: var(--button-background-color); --button-color: var(--mer-text__on-primary); --button-color--enabled: var( --mer-text__on-primary ); --button-color--active: var(--mer-text__on-primary--active); }",
   ".button-primary, .button-primary-destructive, .button-primary-success, .button-secondary, .button-secondary-destructive { font-size: var(--font-size-body-m); }",
   ".button-primary, .button-primary-destructive, .button-primary-success, .button-secondary, .button-secondary-destructive { font-weight: var(--font-weight-semi-bold); }",
   ".button-primary, .button-primary-destructive, .button-primary-success, .button-secondary, .button-secondary-destructive { line-height: var(--line-height-tight); }",
@@ -15,17 +15,17 @@
   ".button-primary:disabled, .button-primary-destructive:disabled, .button-primary-success:disabled { --button-background-color: var(--mer-accent__primary--disabled); --button-color: var(--mer-text__on-disabled); }",
   ".button-primary:focus-visible, .button-primary-destructive:focus-visible, .button-primary-success:focus-visible, .button-secondary-destructive:focus-visible, .button-tertiary:focus-visible, .button-secondary:focus-visible { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }",
   ".button-primary:hover { --button-background-color: var(--mer-accent__primary--hover); --button-color: var(--mer-text__on-primary); }",
-  ".button-secondary, .button-secondary-destructive { --button-background-color: transparent; --control__border-color: var(--button-color); --button-color: var(--mer-text__neutral); --button-color--enabled: var(--mer-text__neutral); --button-color--active: var(--mer-text__on-primary--active); }",
+  ".button-secondary, .button-secondary-destructive { padding-block: var(--control__padding-block); padding-inline: var(--control__padding-inline); --button-background-color: transparent; --control__border-color: var(--button-color); --button-color: var(--mer-text__neutral); --button-color--enabled: var(--mer-text__neutral); --button-color--active: var(--mer-text__on-primary--active); }",
   ".button-secondary-destructive { --button-color: var(--mer-text__highlighted); --control__border-color: var(--mer-border-color__error); }",
   ".button-secondary-destructive:active { --button-color: var(--mer-text__highlighted); --control__border-color: var(--mer-border-color__error--active); }",
   ".button-secondary-destructive:hover { --button-color: var(--mer-accent__primary--destructive-hover); --control__border-color: var(--mer-border-color__error--hover); }",
   ".button-secondary:active { --control__border-color: var(--mer-border-color__primary--active); --button-color: var(--button-color--active); }",
   ".button-secondary:disabled, .button-secondary-destructive:disabled { --button-color: var(--mer-text__on-disabled); }",
   ".button-secondary:focus-visible { --focus__outline-color: var(--mer-border-color__primary); }",
   ".button-secondary:hover { --button-color: var(--mer-text__primary--hover); }",
-  ".button-tertiary { --button-background-color: transparent; --control__border-color: transparent; --button-color: var(--mer-text__primary); }",
   ".button-tertiary { font-size: var(--font-size-body-m); line-height: var(--line-height-tight); font-weight: var(--font-weight-regular); }",
-  ".button-tertiary, .button-secondary, .button-secondary-destructive, .button-primary, .button-primary-destructive, .button-primary-success { display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: center; border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); padding-block: var(--control__padding-block); padding-inline: var(--control__padding-inline); box-sizing: border-box; background-color: var(--button-background-color); color: var(--button-color); }",
+  ".button-tertiary { padding-block: var(--control__padding-block); --button-background-color: transparent; --control__border-color: transparent; --button-color: var(--mer-text__primary); }",
+  ".button-tertiary, .button-secondary, .button-secondary-destructive, .button-primary, .button-primary-destructive, .button-primary-success { display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: center; border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); box-sizing: border-box; background-color: var(--button-background-color); color: var(--button-color); }",
   ".button-tertiary:active { --button-color: var(--mer-text__primary--active); }",
   ".button-tertiary:disabled { --button-color: var(--mer-text__on-disabled); }",
   ".button-tertiary:hover { --button-color: var(--mer-text__primary--hover); }",