refactor: use consistent disabled styles from theme mixin

abelflopes · Jul 11, 2024 · 5644211 · 5644211
1 parent fa6b827
commit 5644211
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 20 deletions.
diff --git a/packages/components/_provisional/src/file-uploader/styles/index.module.scss b/packages/components/_provisional/src/file-uploader/styles/index.module.scss
@@ -42,9 +42,7 @@ $padding: theme.get-spacing(4);
 }
 
 .disabled {
-  cursor: not-allowed;
-  filter: grayscale(1);
-  opacity: 0.4;
+  @include theme.disabled;
 }
 
 // Variations
@@ -73,7 +71,7 @@ $padding: theme.get-spacing(4);
 }
 
 .disabled .file {
-  cursor: not-allowed;
+  @include theme.disabled;
 }
 
 .button {

diff --git a/packages/components/_provisional/src/menu/styles/menu-item.module.scss b/packages/components/_provisional/src/menu/styles/menu-item.module.scss
@@ -1,38 +1,35 @@
-@import "@react-ck/theme";
-@import "@react-ck/text";
+@use "@react-ck/theme";
+@use "@react-ck/text";
 
 .root {
-  @include text-base;
+  @include text.text-base;
 
   display: flex;
   box-sizing: border-box;
   align-items: center;
-  padding: get-spacing(0.75) get-spacing();
-  border-radius: get-spacing();
+  padding: theme.get-spacing(0.75) theme.get-spacing();
+  border-radius: theme.get-spacing();
   cursor: pointer;
-  gap: get-spacing();
+  gap: theme.get-spacing();
   transition: all 0.2s;
 
   &:focus:not(.disabled),
   &:hover:not(.disabled) {
-    background-color: get-color(neutral-light-2);
+    background-color: theme.get-color(neutral-light-2);
     color: currentcolor;
   }
 
   &.secondary {
-    background-color: get-color(neutral-light-1-5);
+    background-color: theme.get-color(neutral-light-1-5);
   }
 
   &.primary {
-    background-color: get-color(highlight-primary-light);
-    color: get-color(highlight-primary);
+    background-color: theme.get-color(highlight-primary-light);
+    color: theme.get-color(highlight-primary);
   }
 
   &.disabled {
-    // TODO: create shared mixin
-    cursor: not-allowed;
-    filter: grayscale(1);
-    opacity: 0.4;
+    @include theme.disabled;
   }
 
   &.horizontal {

diff --git a/packages/components/button/src/styles/index.module.scss b/packages/components/button/src/styles/index.module.scss
@@ -19,7 +19,7 @@
   transition: background-color 0.2s ease;
 
   &:disabled {
-    cursor: not-allowed;
+    @include theme.disabled;
   }
 
   &.icon-only {

diff --git a/packages/components/form-field/src/styles/_mixins.scss b/packages/components/form-field/src/styles/_mixins.scss
@@ -53,7 +53,7 @@
   }
 
   &:disabled {
-    cursor: not-allowed;
+    @include theme.disabled;
   }
 
   &:focus {

diff --git a/packages/docs/stories/src/button.stories.tsx b/packages/docs/stories/src/button.stories.tsx
@@ -58,3 +58,10 @@ export const Link: Story = {
     as: ["a", { href: "/" }],
   },
 };
+
+export const Disabled: Story = {
+  args: {
+    ...Primary.args,
+    disabled: true,
+  },
+};
diff --git a/packages/docs/stories/src/dock.stories.tsx b/packages/docs/stories/src/dock.stories.tsx
@@ -56,6 +56,7 @@ const footer = (
           <IconUserCircle />
         </Icon>
       }
+      disabled
     />
   </>
 );

diff --git a/packages/providers/theme/src/styles/_mixins.scss b/packages/providers/theme/src/styles/_mixins.scss
@@ -0,0 +1,5 @@
+@mixin disabled {
+  cursor: not-allowed;
+  filter: grayscale(1);
+  opacity: 0.4;
+}
diff --git a/packages/providers/theme/src/styles/shared.scss b/packages/providers/theme/src/styles/shared.scss
@@ -1 +1,2 @@
 @import "functions";
+@import "mixins";
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,6 +56,7 @@ const footer = ( @@
               <IconUserCircle />
             </Icon>
           }
+          disabled
         />
       </>
     );
@@ Expand Down @@