diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss index be22d912728..32b764c6f23 100644 --- a/polaris-react/src/components/Button/Button.scss +++ b/polaris-react/src/components/Button/Button.scss @@ -1,10 +1,10 @@ @import '../../styles/common'; .Button { - // stylelint-disable -- Polaris component custom properties - --pc-button-micro-min-height: var(--p-font-line-height-2); + // stylelint-disable -- Button custom properties + --pc-button-micro-min-height: var(--p-font-line-height-3); --pc-button-slim-min-height: var(--p-font-line-height-4); - --pc-button-large-min-height: 44px; + --pc-button-large-min-height: 32px; --pc-button-vertical-padding: calc( (36px - var(--p-font-line-height-2) - var(--p-space-05)) / 2 ); @@ -14,69 +14,55 @@ var(--p-space-05) ) / 2 ); - --pc-button-large-vertical-padding: calc( - ( - var(--pc-button-large-min-height) - var(--p-font-line-height-2) - - var(--p-space-05) - ) / 2 - ); + --pc-button-large-vertical-padding: var(--p-space-2); --pc-button-spinner-size: 20px; --pc-button-segment: 10; --pc-button-focused: 20; --pc-button-disclosure-icon-offset: -6px; + --pc-button-shadow: inset 0px -1px 0px #b5b5b5, inset -1px 0px 0px #e3e3e3, + inset 1px 0px 0px #e3e3e3, inset 0px 1px 0px #e3e3e3; + --pc-button-shadow-hover: inset 0px -1px 0px #cccccc, + inset 1px 0px 0px #ebebeb, inset -1px 0px 0px #ebebeb, + inset 0px 1px 0px #ebebeb; + --pc-button-shadow-primary: inset 0px -1px 0px rgba(0, 0, 0, 0.25), + inset 1px 0px 0px rgba(255, 255, 255, 0.25), + inset -1px 0px 0px rgba(255, 255, 255, 0.25); // stylelint-enable // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include button-base; - #{$se23} & { - // stylelint-disable -- Polaris component custom properties - --pc-button-shadow: inset 0px -1px 0px #b5b5b5, inset -1px 0px 0px #e3e3e3, - inset 1px 0px 0px #e3e3e3, inset 0px 1px 0px #e3e3e3; - --pc-button-shadow-hover: inset 0px -1px 0px #cccccc, - inset 1px 0px 0px #ebebeb, inset -1px 0px 0px #ebebeb, - inset 0px 1px 0px #ebebeb; - --pc-button-shadow-primary: inset 0px -1px 0px rgba(0, 0, 0, 0.25), - inset 1px 0px 0px rgba(255, 255, 255, 0.25), - inset -1px 0px 0px rgba(255, 255, 255, 0.25); - --pc-button-large-min-height: 32px; - --pc-button-large-vertical-padding: var(--p-space-2); - --pc-button-micro-min-height: var(--p-font-line-height-3); + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property + box-shadow: var(--pc-button-shadow); + // stylelint-disable-next-line polaris/motion/declaration-property-unit-disallowed-list -- set transition + transition: background-color 75ms var(--p-motion-ease-out), + box-shadow 75ms var(--p-motion-ease-out); - box-shadow: var(--pc-button-shadow); - transition: background-color 75ms var(--p-motion-ease-out), - box-shadow 75ms var(--p-motion-ease-out); - // stylelint-enable + &:active { + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property + --pc-button-shadow: var(--p-shadow-inset-md); + background: var(--p-color-bg-active); - &:active { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - --pc-button-shadow: var(--p-shadow-inset-md); - background: var(--p-color-bg-active); - // stylelint-disable selector-max-combinators -- se23 - .Content { - transform: translateY(1px); - } - // stylelint-enable selector-max-combinators + .Content { + transform: translateY(1px); } + } - &:focus:not(.primary):not(.plain), - &:focus-visible:not(.primary):not(.plain) { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - box-shadow: var(--pc-button-shadow); - } + // stylelint-disable selector-max-specificity -- focus styles + &:focus:not(.primary):not(.plain), + &:focus-visible:not(.primary):not(.plain) { + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property + box-shadow: var(--pc-button-shadow); + } + // stylelint-enable selector-max-specificity - &:hover { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - box-shadow: var(--pc-button-shadow-hover); - } + &:hover { + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property + box-shadow: var(--pc-button-shadow-hover); } &.disabled { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include base-button-disabled; - #{$se23} & { - box-shadow: none; - background: var(--p-color-bg-transparent-disabled-experimental); - } } &.connectedDisclosure { @@ -85,6 +71,11 @@ border-top-right-radius: 0; border-bottom-right-radius: 0; + &::before { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + &::after { border-top-right-radius: 0; border-bottom-right-radius: 0; @@ -94,41 +85,13 @@ // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY z-index: var(--pc-button-focused); } - - #{$se23} & { - // Bump specificity - border-top-right-radius: 0; - border-bottom-right-radius: 0; - - &::before { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - &::after { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } } } .Content { - #{$se23} & { - font-size: var(--p-font-size-80-experimental); - line-height: var(--p-font-line-height-2); - transform: translateY(0); - // stylelint-disable-next-line polaris/motion/declaration-property-unit-disallowed-list -- se23 temporary styles - transition: transform 75ms cubic-bezier(0.19, 0.91, 0.38, 1); - - @media #{$p-breakpoints-md-up} { - font-size: var(--p-font-size-75); - line-height: var(--p-font-line-height-1); - } - } - font-size: var(--p-font-size-100); + font-size: var(--p-font-size-80-experimental); font-weight: var(--p-font-weight-medium); - line-height: var(--p-font-line-height-1); + line-height: var(--p-font-line-height-2); letter-spacing: initial; position: relative; display: flex; @@ -136,6 +99,14 @@ align-items: center; min-width: 1px; min-height: 1px; + transform: translateY(0); + // stylelint-disable-next-line polaris/motion/declaration-property-unit-disallowed-list -- set transition + transition: transform 75ms cubic-bezier(0.19, 0.91, 0.38, 1); + + @media #{$p-breakpoints-md-up} { + font-size: var(--p-font-size-75); + line-height: var(--p-font-line-height-1); + } .Button:not(.plain) & { width: 100%; @@ -188,11 +159,9 @@ // inset within its bounding box. margin-left: calc(-1 * (var(--p-space-1))); - #{$se23} & { - @media #{$p-breakpoints-md-up} { - margin-top: calc(-1 * var(--p-space-05)); - margin-bottom: calc(-1 * var(--p-space-05)); - } + @media #{$p-breakpoints-md-up} { + margin-top: calc(-1 * var(--p-space-05)); + margin-bottom: calc(-1 * var(--p-space-05)); } &:last-child { @@ -200,11 +169,7 @@ // inset within the viewbox // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY margin-right: var(--pc-button-disclosure-icon-offset); - margin-left: var(--p-space-1); - - #{$se23} & { - margin-left: var(--p-space-05); - } + margin-left: var(--p-space-05); } // stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY @@ -213,11 +178,7 @@ } + *:not(.Icon) { - margin-left: var(--p-space-1); - - #{$se23} & { - margin-left: var(--p-space-05); - } + margin-left: var(--p-space-05); } } @@ -296,7 +257,7 @@ } .primary { - // stylelint-disable -- Polaris component custom properties + // stylelint-disable -- Button custom properties --pc-button-color: var(--p-color-bg-primary); --pc-button-text: var(--p-color-text-on-color); --pc-button-color-hover: var(--p-color-bg-primary-hover); @@ -304,258 +265,230 @@ --pc-button-color-depressed: var(--p-color-bg-primary-active); // stylelint-enable - #{$se23} & { - &:not(.disabled) { - box-shadow: none; + &::before { + /* shine */ + // stylelint-disable -- set primary styles + content: ''; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.07) 80%, + rgba(255, 255, 255, 0.15) 100% + ); + box-shadow: var(--p-shadow-button-primary-strong-experimental); + border-radius: 9px; + transition: opacity 75ms cubic-bezier(0.19, 0.91, 0.38, 1); + mix-blend-mode: luminosity; + // stylelint-enable + } + + &:not(.disabled) { + box-shadow: none; + } + + &:hover { + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- Button custom property + --pc-button-text: var(--p-color-text-inverse); + + &::before { + box-shadow: var(--p-shadow-button-primary-strong-experimental); + } + + svg { + fill: var(--p-color-text-inverse); } + } + &:active { + // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- Button custom properties + --pc-button-text: var(--p-color-text-inverse-subdued); + background: var(--pc-button-color-active); + box-shadow: var(--p-shadow-button-inset-experimental); + // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list + + // stylelint-enable-next-line length-zero-no-unit &::before { - /* shine */ - // stylelint-disable -- se23 temporary styles - content: ''; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; + opacity: 1; + // stylelint-disable-next-line -- override background background: linear-gradient( 180deg, - rgba(255, 255, 255, 0.07) 80%, - rgba(255, 255, 255, 0.15) 100% + rgba(255, 255, 255, 0.1) 0%, + rgba(255, 255, 255, 0) 100% ); - box-shadow: var(--p-shadow-button-primary-strong-experimental); - border-radius: 9px; - transition: opacity 75ms cubic-bezier(0.19, 0.91, 0.38, 1); - mix-blend-mode: luminosity; - // stylelint-enable + box-shadow: var(--p-shadow-button-primary-strong-inset-experimental); + } + + svg { + fill: var(--p-color-text-inverse-subdued); + } + } + + &.disabled { + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property + color: var(--pc-button-text); + background: var(--p-color-bg-transparent-primary-disabled-experimental); + box-shadow: none; + + &::before { + display: none; + } + + svg { + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list, declaration-no-important -- override Spinner fill color + fill: var(--pc-button-text) !important; + } + } + + &.destructive, + &.success { + &::before { + left: 0.5px; + right: 0.5px; + top: 0.5px; + bottom: 0.5px; + border-radius: inherit; + // adjust shine for destructive and success buttons + box-shadow: var(--p-shadow-button-primary-experimental); + background: none; } &:hover { - // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- Button custom property --pc-button-text: var(--p-color-text-inverse); - // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list + // stylelint-disable-next-line selector-max-specificity -- set box shadow &::before { - box-shadow: var(--p-shadow-button-primary-strong-experimental); + box-shadow: var(--p-shadow-button-primary-experimental); } - // stylelint-disable-next-line selector-max-combinators -- se23 temporary styles + // stylelint-disable-next-line selector-max-specificity -- set svg fill svg { fill: var(--p-color-text-inverse); } } &:active { - // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- Button custom property --pc-button-text: var(--p-color-text-inverse-subdued); - background: var(--pc-button-color-active); box-shadow: var(--p-shadow-button-inset-experimental); - // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list - // stylelint-enable-next-line length-zero-no-unit + + // stylelint-disable-next-line -- set opacity &::before { - opacity: 1; - // stylelint-disable-next-line -- se23 overrides - background: linear-gradient( - 180deg, - rgba(255, 255, 255, 0.1) 0%, - rgba(255, 255, 255, 0) 100% - ); - box-shadow: var(--p-shadow-button-primary-strong-inset-experimental); + opacity: 0; } - // stylelint-disable-next-line selector-max-combinators -- se23 temporary styles + // stylelint-disable-next-line selector-max-specificity -- set svg fill svg { fill: var(--p-color-text-inverse-subdued); } } + } - &.disabled { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - color: var(--pc-button-text); - background: var(--p-color-bg-transparent-primary-disabled-experimental); - box-shadow: none; - - &::before { - display: none; - } + &.destructive { + // stylelint-disable -- Button custom properties + --pc-button-color: var(--p-color-bg-critical-strong); + --pc-button-text: var(--p-color-text-on-color); + --pc-button-color-hover: var(--p-color-bg-critical-strong-hover); + --pc-button-color-active: var(--p-color-bg-critical-strong-active); + --pc-button-color-depressed: var(--p-color-bg-critical-strong-active); + // stylelint-enable - // stylelint-disable-next-line selector-max-combinators -- se23 temporary styles - svg { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - fill: var(--pc-button-text); - } + &:not(.disabled) { + box-shadow: none; } - &.destructive, - &.success { - &::before { - left: 0.5px; - right: 0.5px; - top: 0.5px; - bottom: 0.5px; - border-radius: inherit; - // adjust shine for destructive and success buttons - box-shadow: var(--p-shadow-button-primary-experimental); - background: none; - } - - &:hover { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - --pc-button-text: var(--p-color-text-inverse); - // stylelint-disable-next-line max-nesting-depth -- se23 temporary styles - &::before { - box-shadow: var(--p-shadow-button-primary-experimental); - } - - // stylelint-disable-next-line selector-max-combinators, max-nesting-depth -- se23 temporary styles - svg { - fill: var(--p-color-text-inverse); - } - } - - &:active { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - --pc-button-text: var(--p-color-text-inverse-subdued); - box-shadow: var(--p-shadow-button-inset-experimental); - - // stylelint-disable-next-line -- se23 overrides - &::before { - opacity: 0; - } + svg { + fill: var(--p-color-icon-on-color); + } - // stylelint-disable-next-line selector-max-combinators, max-nesting-depth -- se23 temporary styles - svg { - fill: var(--p-color-text-inverse-subdued); - } - } + &:active { + box-shadow: var(--p-shadow-button-inset-experimental); } - &.destructive { - // stylelint-disable -- Polaris component custom properties - --pc-button-color: var(--p-color-bg-critical-strong); - --pc-button-text: var(--p-color-text-on-color); - --pc-button-color-hover: var(--p-color-bg-critical-strong-hover); - --pc-button-color-active: var(--p-color-bg-critical-strong-active); - --pc-button-color-depressed: var(--p-color-bg-critical-strong-active); - // stylelint-enable - - &:not(.disabled) { - box-shadow: none; + // stylelint-disable-next-line selector-max-class -- set disabled styles + &.disabled { + // stylelint-disable-next-line selector-max-specificity, selector-max-class -- set display + &::before { + display: none; } - // stylelint-disable-next-line selector-max-combinators -- se23 temporary styles + // stylelint-disable-next-line selector-max-specificity, selector-max-class -- set svg fill svg { - fill: var(--p-color-icon-on-color); - } - - &:active { - box-shadow: var(--p-shadow-button-inset-experimental); - } - - // stylelint-disable-next-line selector-max-class -- se23 temporary styles - &.disabled { - // stylelint-disable-next-line selector-max-class, max-nesting-depth -- se23 temporary styles - &::before { - display: none; - } - - // stylelint-disable-next-line selector-max-combinators, max-nesting-depth, selector-max-class -- se23 temporary styles - svg { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - fill: var(--pc-button-text); - } + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property + fill: var(--pc-button-text); } } + } - &.success { - // stylelint-disable -- Polaris component custom properties - --pc-button-color: var(--p-color-bg-success-strong); - --pc-button-text: var(--p-color-text-on-color); - --pc-button-color-hover: var( - --p-color-bg-success-strong-hover-experimental - ); - --pc-button-color-active: var( - --p-color-bg-success-strong-active-experimental - ); - --pc-button-color-depressed: var( - --p-color-bg-success-strong-active-experimental - ); - // stylelint-enable - box-shadow: none; - } + &.success { + // stylelint-disable -- Button custom properties + --pc-button-color: var(--p-color-bg-success-strong); + --pc-button-text: var(--p-color-text-on-color); + --pc-button-color-hover: var( + --p-color-bg-success-strong-hover-experimental + ); + --pc-button-color-active: var( + --p-color-bg-success-strong-active-experimental + ); + --pc-button-color-depressed: var( + --p-color-bg-success-strong-active-experimental + ); + // stylelint-enable + box-shadow: none; } svg { fill: var(--p-color-icon-on-color); } - - &.disabled { - background: var(--p-color-bg-disabled); - } } .destructive { - // stylelint-disable -- Polaris component custom properties - --pc-button-color: var(--p-color-bg-critical-strong); - --pc-button-text: var(--p-color-text-on-color); - --pc-button-color-hover: var(--p-color-bg-critical-strong-hover); - --pc-button-color-active: var(--p-color-bg-critical-strong-active); - --pc-button-color-depressed: var(--p-color-bg-critical-strong-active); + // stylelint-disable -- Button custom properties + --pc-button-color: var(--p-color-bg); + --pc-button-text: var(--p-color-text-critical); + --pc-button-color-hover: var(--p-color-bg-hover); + --pc-button-color-active: var(--p-color-bg-active); + --pc-button-color-depressed: var(--p-color-bg-active); // stylelint-enable + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property + box-shadow: var(--pc-button-shadow); + svg { - fill: var(--p-color-icon-on-color); + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property + fill: var(--pc-button-text); } &.disabled { - background: var(--p-color-bg-disabled); - } - - #{$se23} & { - // stylelint-disable -- Polaris component custom properties - --pc-button-color: var(--p-color-bg); - --pc-button-text: var(--p-color-text-critical); - --pc-button-color-hover: var(--p-color-bg-hover); - --pc-button-color-active: var(--p-color-bg-active); - --pc-button-color-depressed: var(--p-color-bg-active); - // stylelint-enable - - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - box-shadow: var(--pc-button-shadow); - - // stylelint-disable-next-line selector-max-combinators -- se23 temporary styles svg { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - fill: var(--pc-button-text); - } - - &.disabled { - // stylelint-disable-next-line selector-max-combinators -- se23 temporary styles - svg { - fill: var(--p-color-text-disabled); - } + fill: var(--p-color-text-disabled); } + } - &:focus, - &:focus-visible { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - box-shadow: var(--pc-button-shadow); - } + &:focus, + &:focus-visible { + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property + box-shadow: var(--pc-button-shadow); } } .primaryPlain { - // stylelint-disable -- Polaris component custom properties - --pc-button-color: var(--p-color-bg-interactive-subdued-active); - --pc-button-text: var(--p-color-text-interactive-hover); - --pc-button-color-hover: var(--p-color-bg-interactive-subdued-active); - --pc-button-color-active: var(--p-color-bg-interactive-subdued-active); + // stylelint-disable -- Button custom properties + --pc-button-color: transparent; + --pc-button-text: var(--p-color-text); + --pc-button-color-hover: var(--p-color-bg-transparent-hover-experimental); + --pc-button-color-active: var(--p-color-bg-transparent-active-experimental); --pc-button-color-depressed: var(--p-surface-selected-depressed); // stylelint-enable box-shadow: none; path { - fill: var(--p-color-icon-on-color); + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property + fill: var(--pc-button-text); } &:is(:hover, :focus, :active) { @@ -564,116 +497,95 @@ } &.disabled { - background: var(--p-color-bg-disabled); + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- Button custom property + --pc-button-text: var(--p-color-text-disabled); + background: transparent; } - #{$se23} & { - // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - --pc-button-color: transparent; + &:active { + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- Button custom property --pc-button-text: var(--p-color-text); - --pc-button-color-hover: var(--p-color-bg-transparent-hover-experimental); - --pc-button-color-active: var(--p-color-bg-transparent-active-experimental); - // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles + + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property + color: var(--pc-button-text); box-shadow: none; - // stylelint-disable-next-line selector-max-combinators -- se23 temporary styles - path { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - fill: var(--pc-button-text); + .Content { + transform: translateY(0); } + } - &:active { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - --pc-button-text: var(--p-color-text); - box-shadow: none; - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - color: var(--pc-button-text); + &:hover { + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- Button custom property + --pc-button-text: var(--p-color-text); + box-shadow: none; + } - // stylelint-disable-next-line selector-max-combinators -- se23 temporary styles - .Content { - transform: translateY(0); - } - } + &:hover, + &:focus:not(.disabled) { + text-decoration: none; + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property + color: var(--pc-button-text); + } - &:hover { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - --pc-button-text: var(--p-color-text); - box-shadow: none; - } + &::before { + display: none; + } + + &.destructive { + // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- Button custom properties + --pc-button-color: transparent; + --pc-button-text: var(--p-color-text-critical); + --pc-button-color-hover: var(--p-color-bg-transparent-hover-experimental); + --pc-button-color-active: var(--p-color-bg-transparent-active-experimental); &:hover, - &:focus:not(.disabled) { - text-decoration: none; - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - color: var(--pc-button-text); + &:active { + --pc-button-text: var(--p-color-text-critical); } + // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list - &::before { - display: none; + // stylelint-disable-next-line selector-max-class -- set destructive styles + &.destructive { + box-shadow: none; } + // stylelint-disable-next-line selector-max-class -- set disabled styles &.disabled { - // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- Button custom property --pc-button-text: var(--p-color-text-disabled); - // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - background: transparent; } + } - &.destructive { - // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - --pc-button-color: transparent; - --pc-button-text: var(--p-color-text-critical); - --pc-button-color-hover: var(--p-color-bg-transparent-hover-experimental); - --pc-button-color-active: var( - --p-color-bg-transparent-active-experimental - ); - - &:hover, - &:active { - --pc-button-text: var(--p-color-text-critical); - } - // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list - - // stylelint-disable-next-line selector-max-class -- se23 temporary styles - &.destructive { - box-shadow: none; - } + &.iconOnly { + margin: calc(-1 * var(--p-space-1)); - // stylelint-disable-next-line selector-max-class -- se23 temporary styles - &.disabled { - // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - --pc-button-text: var(--p-color-text-disabled); - background: transparent; - } + path { + fill: var(--p-color-icon-subdued); } - &.iconOnly { - margin: calc(-1 * var(--p-space-1)); - - // stylelint-disable selector-max-combinators, max-nesting-depth, selector-max-class -- se23 temporary styles + &:active, + &:hover { + // stylelint-disable-next-line selector-max-specificity -- set svg fill path { - fill: var(--p-color-icon-subdued); - } - - &:active, - &:hover { - path { - fill: var(--p-color-icon); - } + fill: var(--p-color-icon); } + } - &.destructive { - path { - fill: var(--p-color-text-critical); - } + // stylelint-disable-next-line selector-max-class -- set destructive styles + &.destructive { + // stylelint-disable-next-line selector-max-class, selector-max-specificity -- set svg fill + path { + fill: var(--p-color-text-critical); } + } - &.disabled { - path { - fill: var(--p-color-icon-disabled); - } + // stylelint-disable-next-line selector-max-class -- set disabled styles + &.disabled { + // stylelint-disable-next-line selector-max-class, selector-max-specificity -- set svg fill + path { + fill: var(--p-color-icon-disabled); } - // stylelint-enable selector-max-combinators, max-nesting-depth, selector-max-class } } } @@ -720,8 +632,6 @@ &.disabled { border: var(--p-border-width-1) solid var(--p-color-border-disabled); color: var(--p-color-text-disabled); - background: transparent; - box-shadow: none; } &.destructive { @@ -753,7 +663,6 @@ // stylelint-disable-next-line selector-max-class -- too many classes &.disabled { border: var(--p-border-width-1) solid var(--p-color-border-disabled); - background: transparent; color: var(--p-color-text-disabled); } @@ -776,10 +685,7 @@ &, &:hover, - &.disabled, - #{$se23} &, - #{$se23} &:hover, - #{$se23} &.disabled { + &.disabled { color: transparent; } } @@ -795,36 +701,22 @@ .plain { // stylelint-disable-next-line -- polaris/conventions/polaris/custom-property-allowed-list margin: calc(-1 * var(--pc-button-vertical-padding)) - calc(-1 * var(--p-space-2)); - padding-left: var(--p-space-2); - padding-right: var(--p-space-2); + calc(-1 * var(--p-space-3)); background: transparent; border: 0; box-shadow: none; color: var(--p-color-text-interactive); - #{$se23} & { - box-shadow: none; - // stylelint-disable-next-line -- polaris/conventions/polaris/custom-property-allowed-list - margin: calc(-1 * var(--pc-button-vertical-padding)) - calc(-1 * var(--p-space-3)); - } - svg { fill: var(--p-color-icon-interactive); } > .Content { + // stylelint-disable-next-line -- remove focus-ring mixing + @include no-focus-ring; + font-size: var(--p-font-size-80-experimental); font-weight: var(--p-font-weight-regular); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include focus-ring; - - #{$se23} & { - line-height: var(--p-font-line-height-1); - font-size: var(--p-font-size-80-experimental); - // stylelint-disable-next-line -- se23 override - @include no-focus-ring; - } + line-height: var(--p-font-line-height-1); } &:hover, @@ -833,10 +725,6 @@ background: transparent; box-shadow: none; - #{$se23} & { - box-shadow: none; - } - svg { fill: var(--p-color-icon-interactive-hover); } @@ -849,27 +737,15 @@ &.pressed, &:active { color: var(--p-color-text-interactive-active); - background: transparent; + background-color: transparent; box-shadow: none; - #{$se23} & { - background-color: transparent; - // Specificity bump - color: var(--p-color-text-interactive-active); - - // stylelint-disable-next-line -- se23 override - > .Content { - transform: translateY(0); - } + > .Content { + transform: translateY(0); } svg { fill: var(--p-color-icon-interactive-active); - - #{$se23} & { - // Specificity bump - fill: var(--p-color-icon-interactive-active); - } } @media (-ms-high-contrast: active) { @@ -880,10 +756,7 @@ &:focus-visible { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include no-focus-ring; - - #{$se23} & { - outline: none; - } + outline: none; @media (-ms-high-contrast: active) { outline: none; @@ -893,24 +766,17 @@ @media (-ms-high-contrast: active) { outline: var(--p-border-width-2) dotted; } - #{$se23} & { - outline: var(--p-border-width-2) solid - var(--p-color-border-interactive-focus); - outline-offset: var(--p-space-05); - border-radius: var(--p-border-radius-1_5-experimental); - } + outline: var(--p-border-width-2) solid + var(--p-color-border-interactive-focus); + outline-offset: var(--p-space-05); + border-radius: var(--p-border-radius-1_5-experimental); } } &:focus-visible:not(:active) { > .Content { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include focus-ring($style: 'focused'); - - #{$se23} & { - // stylelint-disable-next-line -- se23 override - @include no-focus-ring; - } + @include no-focus-ring; } } @@ -918,11 +784,8 @@ &.pressed:not(.iconOnly) > .Content { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include plain-button-backdrop; - - #{$se23} & { - padding: unset; - margin: unset; - } + padding: unset; + margin: unset; } &.fullWidth { @@ -933,42 +796,25 @@ &.disabled { color: var(--p-color-text-disabled); background: none; + box-shadow: none; - #{$se23} & { - box-shadow: none; - background: none; - } - - &.loading, - #{$se23} &.loading { + &.loading { color: transparent; } } &.destructive { color: var(--p-color-text-critical); - - #{$se23} & { - box-shadow: none; - } + box-shadow: none; svg { - fill: var(--p-color-icon-critical); - - #{$se23} & { - fill: var(--p-color-icon-critical-strong-experimental); - } - } - - &:hover { - color: var(--p-color-bg-critical-strong-hover); + fill: var(--p-color-icon-critical-strong-experimental); } - #{$se23} &:hover, - #{$se23} &:focus:not(:active):not(.pressed):not(.disabled) { + &:hover, + &:focus:not(:active):not(.pressed):not(.disabled) { color: var(--p-color-text-critical-hover-experimental); - // stylelint-disable-next-line -- se23 override svg { fill: var(--p-color-icon-critical-strong-hover-experimental); } @@ -978,137 +824,100 @@ &.pressed { color: var(--p-color-text-critical-active); - #{$se23} & { - // Specificity bump - color: var(--p-color-text-critical-active); - - // stylelint-disable-next-line -- se23 override - svg { - fill: var(--p-color-icon-critical-strong-active-experimental); - } + svg { + fill: var(--p-color-icon-critical-strong-active-experimental); } } &.disabled { color: var(--p-color-text-disabled); - #{$se23} & svg { + svg { fill: var(--p-color-icon-disabled); } } } + &.sizeMicro { + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property + margin: calc(var(--pc-button-vertical-padding) * -1) + calc(var(--p-space-3) * -1); + + > .Content { + font-size: var(--p-font-size-80-experimental); + } + } + &.sizeSlim { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - margin-top: calc(-1 * var(--pc-button-slim-vertical-padding)); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - margin-bottom: calc(-1 * var(--pc-button-slim-vertical-padding)); + // stylelint-disable-next-line -- custom properties + margin: calc(var(--pc-button-vertical-padding) * -1) + calc(var(--p-space-3) * -1); } &.sizeLarge { - // stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property margin: calc(-1 * var(--pc-button-large-vertical-padding)) calc(-1 * var(--p-space-5)); - // stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list } &.iconOnly { - margin: calc(-1 * var(--p-space-2)); - - #{$se23} & { - margin: 0; - padding: 0; - min-height: var(--p-font-line-height-2); - min-width: var(--p-font-line-height-2); - } + margin: 0; + padding: 0; + min-height: var(--p-font-line-height-2); + min-width: var(--p-font-line-height-2); svg { - fill: var(--p-color-icon); - - #{$se23} & { - fill: var(--p-color-icon-subdued); - } + fill: var(--p-color-icon-subdued); } &:hover svg { fill: var(--p-color-icon-hover); - - #{$se23} & { - // Specificity bump - fill: var(--p-color-icon-hover); - } } &:active svg, &.pressed svg { fill: var(--p-color-icon-active); - - #{$se23} & { - // Specificity bump - fill: var(--p-color-icon-active); - } } &:focus svg { - #{$se23} & { - // Specificity bump - fill: var(--p-color-icon-hover); - } + fill: var(--p-color-icon-hover); } &.disabled svg { fill: var(--p-color-icon-disabled); - - #{$se23} & { - // Specificity bump - fill: var(--p-color-icon-disabled); - } } } &.destructive.iconOnly { svg { - fill: var(--p-color-bg-critical-strong); - - #{$se23} & { - fill: var(--p-color-icon-critical-strong-experimental); - } + fill: var(--p-color-icon-critical-strong-experimental); } &:hover svg { - fill: var(--p-color-bg-critical-strong-hover); - - #{$se23} & { - fill: var(--p-color-icon-critical-strong-hover-experimental); - } + fill: var(--p-color-icon-critical-strong-hover-experimental); } - #{$se23} &:focus:not(:active):not(.pressed):not(.disabled) svg { + &:focus:not(:active):not(.pressed):not(.disabled) svg { fill: var(--p-color-icon-critical-strong-experimental); } &:active svg, &.pressed svg { - fill: var(--p-color-bg-critical-strong-active); - - #{$se23} & { - fill: var(--p-color-icon-critical-strong-active-experimental); - } + fill: var(--p-color-icon-critical-strong-active-experimental); } &.disabled svg { - fill: var(--p-color-bg-disabled); - - #{$se23} & { - // Specificity bump - fill: var(--p-color-icon-disabled); - } + fill: var(--p-color-icon-disabled); } } .Icon { margin-left: 0; margin-right: 0; + + &:last-child { + margin-left: var(--p-space-05); + } } } @@ -1118,33 +927,23 @@ } .iconOnly { - padding-left: var(--p-space-2); - padding-right: var(--p-space-2); - - #{$se23} & { - padding-left: var(--p-space-1_5-experimental); - padding-right: var(--p-space-1_5-experimental); + padding-left: var(--p-space-1_5-experimental); + padding-right: var(--p-space-1_5-experimental); - @media #{$p-breakpoints-md-up} { - padding-left: var(--p-space-1); - padding-right: var(--p-space-1); - } + @media #{$p-breakpoints-md-up} { + padding-left: var(--p-space-1); + padding-right: var(--p-space-1); } &.sizeLarge { - padding-left: var(--p-space-3); - padding-right: var(--p-space-3); - - #{$se23} & { - // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - padding-left: var(--pc-button-large-vertical-padding); - padding-right: var(--pc-button-large-vertical-padding); - // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - - @media #{$p-breakpoints-md-up} { - padding-left: var(--p-space-1_5-experimental); - padding-right: var(--p-space-1_5-experimental); - } + // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- custom properties + padding-left: var(--pc-button-large-vertical-padding); + padding-right: var(--pc-button-large-vertical-padding); + // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list -- custom properties + + @media #{$p-breakpoints-md-up} { + padding-left: var(--p-space-1_5-experimental); + padding-right: var(--p-space-1_5-experimental); } } @@ -1155,10 +954,6 @@ .Icon:first-child { margin-left: 0; - - #{$se23} & { - margin-left: 0; - } } .Icon:last-child { @@ -1171,82 +966,64 @@ } .sizeMicro { - border-radius: var(--p-border-radius-1); + border-radius: var(--p-border-radius-2); padding: var(--p-space-1) var(--p-space-2); - // stylelint-disable-next-line -- custom property + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property min-height: var(--pc-button-micro-min-height); .Content { - font-size: var(--p-font-size-100); - font-weight: var(--p-font-weight-semibold); + font-size: var(--p-font-size-80-experimental); + font-weight: var(--p-font-weight-medium); line-height: var(--p-font-line-height-2); } - #{$se23} & { + @media #{$p-breakpoints-md-up} { padding: var(--p-space-1) var(--p-space-2); - // stylelint-disable-next-line -- custom property + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property min-height: var(--pc-button-micro-min-height); - // stylelint-disable-next-line -- se23 override - .Content { - font-weight: var(--p-font-weight-medium); - } - } - - @media #{$p-breakpoints-md-up} { - padding: var(--p-space-05) var(--p-space-2); - .Content { font-size: var(--p-font-size-75); line-height: var(--p-font-line-height-1); } - - #{$se23} & { - padding: var(--p-space-1) var(--p-space-2); - // stylelint-disable-next-line -- custom property - min-height: var(--pc-button-micro-min-height); - } } } .sizeSlim { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY + // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom property min-height: var(--pc-button-slim-min-height); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - padding: var(--pc-button-slim-vertical-padding) var(--p-space-3); + padding: var(--p-space-1_5-experimental) var(--p-space-3); + + &.iconOnly { + padding-left: var(--p-space-1_5-experimental); + padding-right: var(--p-space-1_5-experimental); + + @media #{$p-breakpoints-md-up} { + padding-left: var(--p-space-1); + padding-right: var(--p-space-1); + } + } } .sizeLarge { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY + // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- Button custom properties min-height: var(--pc-button-large-min-height); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY min-width: var(--pc-button-large-min-height); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - padding: var(--pc-button-large-vertical-padding) var(--p-space-6); + padding: var(--pc-button-large-vertical-padding) var(--p-space-3); + // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list .Content { - font-size: var(--p-font-size-200); + font-size: var(--p-font-size-80-experimental); font-weight: var(--p-font-weight-medium); line-height: var(--p-font-line-height-2); letter-spacing: initial; - } - - #{$se23} & { - // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - min-height: var(--pc-button-large-min-height); - min-width: var(--pc-button-large-min-height); - padding: var(--pc-button-large-vertical-padding) var(--p-space-3); - // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles - // stylelint-disable selector-max-combinators -- se23 temporary styles - .Content { - font-size: var(--p-font-size-80-experimental); + @media #{$p-breakpoints-md-up} { + line-height: var(--p-font-line-height-1); } - // stylelint-enable selector-max-combinators -- se23 temporary styles } } -// stylelint-disable selector-max-specificity -- generated by polaris-migrator DO NOT COPY .monochrome { &.outline, &.plain { @@ -1266,7 +1043,6 @@ } } - // stylelint-disable selector-max-class -- generated by polaris-migrator DO NOT COPY &.disabled { color: currentColor; opacity: 0.4; @@ -1295,21 +1071,17 @@ fill: currentColor; } } - // stylelint-enable selector-max-class } &.plain { - // stylelint-disable selector-max-class -- generated by polaris-migrator DO NOT COPY .Text:not(.removeUnderline) { text-decoration: underline; } - // stylelint-enable selector-max-class } &.outline { position: relative; border-color: currentColor; - // stylelint-disable selector-max-class -- generated by polaris-migrator DO NOT COPY box-shadow: 0 0 0 var(--p-border-width-1) currentColor; // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include focus-ring($border-width: 2px); @@ -1364,10 +1136,9 @@ opacity: 0.05; } } - // stylelint-enable selector-max-class } } -// stylelint-enable selector-max-specificity +// stylelint-enable selector-max-specificity, selector-max-class .ConnectedDisclosureWrapper { display: flex; @@ -1376,9 +1147,9 @@ .ConnectedDisclosure { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY z-index: var(--pc-button-segment); - margin-left: calc(-1 * var(--p-space-025)); - border-top-left-radius: 0; + margin-left: calc(-1 * var(--p-space-05)); border-bottom-left-radius: 0; + border-top-left-radius: 0; height: 100%; &:focus, @@ -1389,7 +1160,7 @@ &.primary, &.destructive { - margin-left: var(--p-space-025); + margin-left: calc(var(--p-space-05) * -1); // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY &.outline { @@ -1398,80 +1169,52 @@ } } - &::after { + &:active { + .Icon { + transform: translateY(1px); + } + } + + &::before { border-top-left-radius: 0; border-bottom-left-radius: 0; } - // Bump specificity - #{$se23} & { + &::after { border-top-left-radius: 0; border-bottom-left-radius: 0; - margin-left: calc(-1 * var(--p-space-05)); - - &::before { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - &:active { - // stylelint-disable-next-line selector-max-combinators -- se23 - .Icon { - transform: translateY(1px); - } - } } } + // stylelint-disable selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY [data-buttongroup-segmented='true'] { .Button, .Button::after { border-radius: 0; - - // Bump specificity - #{$se23} & { - border-radius: 0; - } } .Button.pressed { - #{$se23} & { - // stylelint-disable-next-line -- se23 required for styling specificicty - clip-path: none !important; - } + // stylelint-disable-next-line -- required for styling specificicty + clip-path: none !important; } > :first-child .Button, > :first-child .Button::after { border-radius: 0; - border-top-left-radius: var(--p-border-radius-1); - border-bottom-left-radius: var(--p-border-radius-1); - - #{$se23} & { - border-top-left-radius: var(--p-border-radius-2); - border-bottom-left-radius: var(--p-border-radius-2); - } + border-top-left-radius: var(--p-border-radius-2); + border-bottom-left-radius: var(--p-border-radius-2); } > :last-child .Button, > :last-child .Button::after { border-radius: 0; - border-top-right-radius: var(--p-border-radius-1); - border-bottom-right-radius: var(--p-border-radius-1); - - #{$se23} & { - border-top-right-radius: var(--p-border-radius-2); - border-bottom-right-radius: var(--p-border-radius-2); - } + border-top-right-radius: var(--p-border-radius-2); + border-bottom-right-radius: var(--p-border-radius-2); } > :last-child:first-child .Button, > :last-child:first-child .Button::after { - border-radius: var(--p-border-radius-1); - - #{$se23} & { - border-radius: var(--p-border-radius-2); - } + border-radius: var(--p-border-radius-2); } } diff --git a/polaris-react/src/components/Button/Button.tsx b/polaris-react/src/components/Button/Button.tsx index 850ae4b1cf5..a70caf0b55f 100644 --- a/polaris-react/src/components/Button/Button.tsx +++ b/polaris-react/src/components/Button/Button.tsx @@ -1,7 +1,5 @@ import React, {useCallback, useState} from 'react'; import { - CaretDownMinor, - CaretUpMinor, SelectMinor, ChevronDownMinor, ChevronUpMinor, @@ -19,7 +17,6 @@ import {ActionList} from '../ActionList'; import {UnstyledButton} from '../UnstyledButton'; import type {UnstyledButtonProps} from '../UnstyledButton'; import {useDisableClick} from '../../utilities/use-disable-interaction'; -import {useFeatures} from '../../utilities/features'; import styles from './Button.scss'; @@ -144,12 +141,9 @@ export function Button({ const isDisabled = disabled || loading; - const {polarisSummerEditions2023} = useFeatures(); - const className = classNames( styles.Button, primary && styles.primary, - outline && !polarisSummerEditions2023 && styles.outline, destructive && styles.destructive, primary && plain && styles.primaryPlain, isDisabled && styles.disabled, @@ -165,21 +159,10 @@ export function Button({ removeUnderline && styles.removeUnderline, primarySuccess && styles.primary, primarySuccess && styles.success, - polarisSummerEditions2023 && - destructive && - !outline && - !plain && - styles.primary, - polarisSummerEditions2023 && outline && destructive && styles.destructive, + destructive && !outline && !plain && styles.primary, + outline && destructive && styles.destructive, ); - const disclosureUpIcon = polarisSummerEditions2023 - ? ChevronUpMinor - : CaretUpMinor; - const disclosureDownIcon = polarisSummerEditions2023 - ? ChevronDownMinor - : CaretDownMinor; - const disclosureMarkup = disclosure ? (
@@ -278,11 +261,7 @@ export function Button({ tabIndex={disabled ? -1 : undefined} > - + ); diff --git a/polaris-react/src/components/Button/tests/Button.test.tsx b/polaris-react/src/components/Button/tests/Button.test.tsx index 631909edc77..bc7172b2901 100644 --- a/polaris-react/src/components/Button/tests/Button.test.tsx +++ b/polaris-react/src/components/Button/tests/Button.test.tsx @@ -1,7 +1,5 @@ import React from 'react'; import { - CaretDownMinor, - CaretUpMinor, ChevronDownMinor, ChevronUpMinor, PlusMinor, @@ -222,9 +220,7 @@ describe('