chore: unify ghost variant styling (#973)

* add global ghost variant style * add global variant style to ghost button & update button classnames * add global variant style to dropdown * add global variant style to tabItem & fix typing and classnames & add new stories * fix button default style * fix buttonToggle classnames * fix lint error * review fixes * fix lint error * replace :focus with :focus-visible
Jahia · Mar 3, 2025 · 19c34b6 · 19c34b6
1 parent 746c492
commit 19c34b6
Show file tree

Hide file tree

Showing 20 changed files with 445 additions and 551 deletions.
diff --git a/src/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.spec.js b/src/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.spec.js
@@ -15,11 +15,11 @@ describe('BreadcrumbItem', () => {
 
     it('should enforce the ghost button\'s variant', () => {
         render(<BreadcrumbItem data-testid="breadcrumb-item" variant="outlined" onClick={() => null}/>);
-        expect(screen.getByRole('button')).toHaveClass('moonstone-variant_ghost');
+        expect(screen.getByRole('button')).toHaveClass('moonstone-button_ghost');
     });
 
     it('should enforce the small button\'s size', () => {
         render(<BreadcrumbItem data-testid="breadcrumb-item" size="big" onClick={() => null}/>);
-        expect(screen.getByRole('button')).toHaveClass('moonstone-size_small');
+        expect(screen.getByRole('button')).toHaveClass('moonstone-button_small');
     });
 });
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -1,58 +1,44 @@
 @use "variants/default";
-@use "variants/ghost";
 @use "variants/outlined";
 @use "../../tokens/spacings/spacings" as *;
+@use "../../globals/variants";
 
 $button-size_small: 16px;
 $button-size_medium: 24px;
 $button-size_big: 32px;
 
 .moonstone-button {
-    display: inline-flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
+    @extend %variant_default;
+
     width: fit-content;
     height: $button-size_medium;
     padding: 0 var(--spacing-small);
 
     font-family: inherit;
 
+    border: solid 1px var(--color-gray_dark);
+
     border-radius: var(--radius);
 
     outline: none;
     cursor: pointer;
 
-    &:hover,
-    &:focus,
-    &:active {
-        box-shadow: 0 var(--spacing-nano) var(--spacing-small) var(--color-dark20);
-    }
-
-    &.moonstone-size_big {
-        height: $button-size_big;
-        padding: 0 var(--spacing-medium);
-    }
-
-    &.moonstone-size_small {
-        height: $button-size_small;
-        padding: 0 var(--spacing-nano);
-
-        > * {
-            line-height: $button-size_small - 2px;
-        }
+    &.moonstone-button_outlined,
+    &.moonstone-button_outlined_accent,
+    &.moonstone-button_outlined_danger {
+        @extend %variant_outlined;
     }
 
-    &.moonstone-variant_default {
-        @extend %variant_default;
+    &.moonstone-button_ghost {
+        @extend %variant_ghost;
     }
 
-    &.moonstone-variant_outlined {
-        @extend %variant_outlined;
+    &.moonstone-button_ghost_accent {
+        @extend %variant_ghost_accent;
     }
 
-    &.moonstone-variant_ghost {
-        @extend %variant_ghost;
+    &.moonstone-button_ghost_danger {
+        @extend %variant_ghost_danger;
     }
 
     &.moonstone-icon-button {
@@ -80,11 +66,19 @@ $button-size_big: 32px;
             gap: $spacing-icon_big;
         }
     }
+}
+
+.moonstone-button_big {
+    height: $button-size_big;
+    padding: 0 var(--spacing-medium);
+}
+
+.moonstone-button_small {
+    height: $button-size_small;
+    padding: 0 var(--spacing-nano);
 
-    &:disabled {
-        box-shadow: none;
-        cursor: not-allowed;
-        opacity: 0.4;
+    > * {
+        line-height: $button-size_small - 2px;
     }
 }
 

diff --git a/src/components/Button/Button.spec.js b/src/components/Button/Button.spec.js
@@ -45,7 +45,7 @@ describe('Button', () => {
 
     it('should use default styles', () => {
         render(<Button data-testid="moonstone-button" label="test me"/>);
-        expect(screen.getByTestId('moonstone-button')).toHaveClass('moonstone-variant_default', 'moonstone-size_default', 'moonstone-color_default');
+        expect(screen.getByTestId('moonstone-button')).toHaveClass('moonstone-button');
     });
 
     it('should use the reverse mode', () => {
@@ -84,17 +84,17 @@ describe('Button', () => {
 
     test.each(buttonVariants)('should use the specified variant %s', variant => {
         render(<Button data-testid="moonstone-button" variant={variant} label="test me"/>);
-        expect(screen.getByTestId('moonstone-button')).toHaveClass(`moonstone-variant_${variant}`);
+        expect(screen.getByTestId('moonstone-button')).toHaveClass(`moonstone-button_${variant}`);
     });
 
     test.each(buttonColors)('should use the specified color %s', color => {
         render(<Button data-testid="moonstone-button" color={color} label="test me"/>);
-        expect(screen.getByTestId('moonstone-button')).toHaveClass(`moonstone-color_${color}`);
+        expect(screen.getByTestId('moonstone-button')).toHaveClass(`moonstone-button_${color}`);
     });
 
     test.each(buttonSizes)('should use the specified size %s', size => {
         render(<Button data-testid="moonstone-button" size={size} label="test me"/>);
-        expect(screen.getByTestId('moonstone-button')).toHaveClass(`moonstone-size_${size}`);
+        expect(screen.getByTestId('moonstone-button')).toHaveClass(`moonstone-button_${size}`);
     });
 
     it('should call onClick function', async () => {

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -42,14 +42,15 @@ export const Button = ({
         <button
             ref={ButtonEl}
             className={clsx(
-                'moonstone-button',
-                `moonstone-size_${size}`,
-                `moonstone-variant_${variant}`,
-                `moonstone-color_${color}`,
+                {'moonstone-button': (variant !== 'default' || color !== 'default')},
+                `moonstone-button_${size}`,
+                `moonstone-button${variant === 'default' ? '' : `_${variant}`}${color === 'default' ? '' : `_${color}`}`,
                 {'moonstone-icon': (label && (icon || iconEnd))},
                 {'moonstone-icon-button': !label},
                 {'moonstone-reverse': isReversed},
                 {'moonstone-button_loading': isLoading},
+                'flexRow_center',
+                'alignCenter',
                 className
             )}
             type="button"

diff --git a/src/components/Button/variants/_default.scss b/src/components/Button/variants/_default.scss
@@ -1,59 +1,66 @@
 %variant_default {
-    color: var(--color-white);
+    color: var(--color-gray_dark);
 
     border: 1px solid var(--color-accent);
-    background-color: var(--color-accent);
+    background-color: var(--color-white);
 
-    &.moonstone-color_default {
-        color: var(--color-gray_dark);
-
-        border-color: var(--color-gray);
-        background-color: var(--color-white);
+    &:hover {
+        color: var(--color-accent);
 
-        &:hover {
-            color: var(--color-accent);
+        border-color: var(--color-accent);
+    }
 
-            border-color: var(--color-accent);
-        }
+    &:focus-visible {
+        color: var(--color-accent_dark);
 
-        &:focus {
-            color: var(--color-accent_dark);
+        border-color: var(--color-accent_dark);
+    }
 
-            border-color: var(--color-accent_dark);
-        }
+    &:active {
+        color: var(--color-white);
 
-        &:active {
-            color: var(--color-white);
+        border-color: var(--color-white);
+        background-color: var(--color-accent);
+    }
 
-            border-color: var(--color-white);
-            background-color: var(--color-accent);
-        }
+    &:disabled {
+        color: var(--color-gray_dark);
 
-        &:disabled {
-            color: var(--color-gray_dark);
+        border-color: var(--color-gray_light);
+        background-color: var(--color-gray_light);
 
-            border-color: var(--color-gray_light);
-            background-color: var(--color-gray_light);
+        box-shadow: none;
+        cursor: not-allowed;
+        opacity: 0.4;
 
-            &.moonstone-reverse {
-                color: var(--color-white);
+        &.moonstone-reverse {
+            color: var(--color-white);
 
-                background-color: var(--color-gray);
-            }
+            background-color: var(--color-gray);
         }
     }
 
-    &.moonstone-color_accent {
+    &.moonstone-button_accent {
+        color: var(--color-white);
+
         border-color: var(--color-accent);
         background-color: var(--color-accent);
 
-        &:hover,
-        &:focus {
+        &:hover {
             border-color: var(--color-accent_dark);
             background-color: var(--color-accent_dark);
         }
 
+        &:focus-visible {
+            color: var(--color-white);
+
+            border-color: transparent;
+            background-color: var(--color-accent_dark);
+        }
+
         &:active {
+            color: var(--color-white);
+
             border-color: var(--color-accent_dark_contrast);
             background-color: var(--color-accent_dark_contrast);
         }
@@ -64,13 +71,17 @@
         }
     }
 
-    &.moonstone-color_danger {
+    &.moonstone-button_danger {
+        color: var(--color-white);
+
         border-color: var(--color-danger);
         background-color: var(--color-danger);
 
         &:hover,
-        &:focus,
+        &:focus-visible,
         &:active {
+            color: var(--color-white);
+
             border-color: var(--color-danger_dark);
             background-color: var(--color-danger_dark);
         }
@@ -80,21 +91,4 @@
             background-color: var(--color-gray_light);
         }
     }
-
-    &:hover,
-    &:focus {
-        color: var(--color-white);
-    }
-
-    &:focus,
-    &:active {
-        border-color: var(--color-white);
-    }
-
-    &:disabled {
-        color: var(--color-gray_dark);
-
-        border-color: var(--color-gray_light);
-        background-color: var(--color-gray_light);
-    }
 }