fix: disabled file selector

etchteam · Feb 27, 2024 · d931437 · d931437
1 parent fcef04b
commit d931437
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/components/control/Button/Button.css b/components/control/Button/Button.css
@@ -52,7 +52,7 @@ diamond-button {
     user-select: none;
 
     @media (hover: hover) {
-      &:hover {
+      &:not([disabled]):hover {
         --_background: var(--_background-hover);
         --_border-color: var(--_border-color-hover);
         --_color: var(--_color-hover);
@@ -63,20 +63,22 @@ diamond-button {
       outline-offset: var(--diamond-button-outline-offset);
     }
 
-    &[disabled] {
-      --_background: var(--_background-disabled);
-      --_color: var(--_color-disabled);
-      --_border-color: var(--_border-color-disabled);
-      cursor: not-allowed;
-    }
-
     svg {
       block-size: var(--diamond-icon-size);
       flex-shrink: 0;
       inline-size: var(--diamond-icon-size);
     }
   }
 
+  button[disabled],
+  input[disabled],
+  input[type='file'][disabled]::file-selector-button {
+    --_background: var(--_background-disabled);
+    --_color: var(--_color-disabled);
+    --_border-color: var(--_border-color-disabled);
+    cursor: not-allowed;
+  }
+
   &[size='sm'] {
     --_size: 0.875rem;
   }

diff --git a/components/control/Button/Button.stories.ts b/components/control/Button/Button.stories.ts
@@ -225,6 +225,11 @@ export const HtmlButtonTypes: StoryObj = {
           <input type="file" />
         </diamond-button>
       </diamond-grid-item>
+      <diamond-grid-item>
+        <diamond-button>
+          <input type="file" disabled />
+        </diamond-button>
+      </diamond-grid-item>
     </diamond-grid>
   `,
 };