feat(button): add support for isSelected in low emphasis

Author: gcornut

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+-   `Button`: add support of `isSelected` in `low` emphasis (in addition to `medium`).
+
 ### Changed
 
 -   `DatePicker`: update day buttons to use standard button styles

packages/lumx-core/src/scss/components/button/_index.scss

@@ -30,7 +30,7 @@
                 }
             }
 
-            &.#{$lumx-base-prefix}-button--emphasis-medium:not(.#{$lumx-base-prefix}-button--is-selected) {
+            &.#{$lumx-base-prefix}-button--emphasis-medium {
                 &.#{$lumx-base-prefix}-button--variant-button {
                     @include lumx-button-size(lumx-base-const("emphasis", "MEDIUM"), "button", $key);
                 }
@@ -40,16 +40,6 @@
                 }
             }
 
-            &.#{$lumx-base-prefix}-button--emphasis-medium.#{$lumx-base-prefix}-button--is-selected {
-                &.#{$lumx-base-prefix}-button--variant-button {
-                    @include lumx-button-size(lumx-base-const("emphasis", "SELECTED"), "button", $key);
-                }
-
-                &.#{$lumx-base-prefix}-button--variant-icon {
-                    @include lumx-button-size(lumx-base-const("emphasis", "SELECTED"), "icon", $key);
-                }
-            }
-
             &.#{$lumx-base-prefix}-button--emphasis-low {
                 &.#{$lumx-base-prefix}-button--variant-button {
                     @include lumx-button-size(lumx-base-const("emphasis", "LOW"), "button", $key);
@@ -107,16 +97,29 @@
 
 @each $key, $color in $lumx-color-palette {
     .#{$lumx-base-prefix}-button--color-#{$key} {
-        &:not(.#{$lumx-base-prefix}-button--is-selected).#{$lumx-base-prefix}-button--emphasis-medium {
+        &.#{$lumx-base-prefix}-button--emphasis-medium {
             @include lumx-button-color(lumx-base-const("emphasis", "MEDIUM"), $key);
         }
 
-        &:not(.#{$lumx-base-prefix}-button--is-selected).#{$lumx-base-prefix}-button--emphasis-low {
+        &.#{$lumx-base-prefix}-button--emphasis-low {
             @include lumx-button-color(lumx-base-const("emphasis", "LOW"), $key);
         }
+    }
+}
 
-        &.#{$lumx-base-prefix}-button--is-selected {
-            @include lumx-button-color(lumx-base-const("emphasis", "SELECTED"), $key);
+
+/* Button selected
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-button.#{$lumx-base-prefix}-button--is-selected.#{$lumx-base-prefix}-button--emphasis-medium,
+.#{$lumx-base-prefix}-button.#{$lumx-base-prefix}-button--is-selected.#{$lumx-base-prefix}-button--emphasis-low, {
+    @include lumx-button-size(lumx-base-const("emphasis", "SELECTED"));
+
+    @each $key, $color in $lumx-color-palette {
+        &.#{$lumx-base-prefix}-button--color-#{$key} {
+            &.#{$lumx-base-prefix}-button--is-selected {
+                @include lumx-button-color(lumx-base-const("emphasis", "SELECTED"), $key);
+            }
         }
     }
 }

packages/lumx-core/src/scss/components/button/_mixins.scss

@@ -28,11 +28,13 @@
     }
 }
 
-@mixin lumx-button-size($emphasis, $variant, $size) {
-    @if $size == lumx-base-const("size", "M") {
-        height: var(--lumx-button-height);
-    } @else if $size == lumx-base-const("size", "S") {
-        height: calc(var(--lumx-button-height) / 1.5);
+@mixin lumx-button-size($emphasis, $variant: null, $size: null) {
+    @if $variant {
+        @if $size == lumx-base-const("size", "M") {
+            height: var(--lumx-button-height);
+        } @else if $size == lumx-base-const("size", "S") {
+            height: calc(var(--lumx-button-height) / 1.5);
+        }
     }
 
     @if $variant == "button" {

packages/lumx-core/src/scss/components/date-picker/_index.scss

@@ -65,9 +65,5 @@
         &--is-today span {
             font-weight: var(--lumx-button-font-weight);
         }
-
-        &--is-selected {
-            @include lumx-button-is-selected(lumx-base-const("theme", "LIGHT"));
-        }
     }
 }

packages/lumx-react/src/components/button/Button.stories.tsx

@@ -22,9 +22,9 @@ const buttonEmphasis = [Emphasis.high, Emphasis.medium, Emphasis.low];
 // Combination of props that should be avoided
 const excludeCombination = ({ isSelected, emphasis, hasBackground }: any) => {
     // isSelected is only supported in medium emphasis
-    if (isSelected && emphasis && emphasis !== 'medium') return true;
+    if (isSelected && emphasis && emphasis !== Emphasis.medium && emphasis !== Emphasis.low) return true;
     // hasBackground is only supported in low emphasis
-    if (hasBackground && emphasis && emphasis !== 'low') return true;
+    if (hasBackground && emphasis && emphasis !== Emphasis.low) return true;
     return false;
 };
 

packages/lumx-react/src/components/button/ButtonRoot.tsx

@@ -31,7 +31,7 @@ export interface BaseButtonProps
     href?: string;
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
-    /** Whether the component is selected or not. */
+    /** Whether the component is selected or not (unsupported in `high` emphasis). */
     isSelected?: boolean;
     /** Native button name property. */
     name?: string;

packages/lumx-react/src/stories/utils/theming.tsx

@@ -133,7 +133,9 @@ export function withTheming<P extends PropertyTree>({
                     return (varName: string) =>
                         // Has the given arg with value
                         varName.match(new RegExp(`${argName}-${argValue}`)) ||
-                        (argName === 'emphasis' && argValue === 'medium' && varName.match(/emphasis-selected/)) ||
+                        (argName === 'emphasis' &&
+                            (argValue === 'medium' || argValue === 'low') &&
+                            varName.match(/emphasis-selected/)) ||
                         // Or does not have the arg at all
                         !varName.match(new RegExp(`${argName}-\\w+`));
                 }