fix(calendar): fix select-button disabled+selected state

core-ds · Jul 9, 2021 · 4f54c01 · 4f54c01
1 parent 3bfbe70
commit 4f54c01
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 24 deletions.
diff --git a/packages/calendar/src/components/select-button/Component.tsx b/packages/calendar/src/components/select-button/Component.tsx
@@ -17,16 +17,13 @@ export type SelectButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
 };
 
 export const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(
-    ({ className, children, disabled, view = 'default', ...restProps }, ref) => (
+    ({ className, children, view = 'default', ...restProps }, ref) => (
         <Button
             {...restProps}
             ref={ref}
             view='ghost'
             size='xs'
-            disabled={disabled}
-            className={cn(styles.button, styles[view], className, {
-                [styles.disabled]: disabled,
-            })}
+            className={cn(styles.button, styles[view], className)}
         >
             {children}
         </Button>

diff --git a/packages/calendar/src/components/select-button/index.module.css b/packages/calendar/src/components/select-button/index.module.css
@@ -10,34 +10,35 @@
     background-color: transparent;
     border-radius: var(--border-radius-s);
 
-    &:not(.disabled):hover {
+    &:not(:disabled):hover {
         background-color: var(--color-light-bg-tertiary);
         color: var(--color-light-text-primary);
     }
 
-    & > * {
-        flex-grow: 1;
-    }
-}
-
-.filled {
-    background-color: var(--color-light-bg-tertiary);
+    &.filled {
+        background-color: var(--color-light-bg-tertiary);
 
-    &:not(.disabled):hover {
-        background-color: color-mod(var(--color-light-bg-tertiary) shade(7%));
+        &:not(:disabled):hover {
+            background-color: color-mod(var(--color-light-bg-tertiary) shade(7%));
+        }
     }
-}
 
-.outlined {
-    border: 1px solid var(--calendar-selector-button-outline-border-color);
-}
-
-.selected {
-    background-color: var(--color-light-bg-primary-inverted);
-    color: var(--color-light-text-primary-inverted);
+    &.outlined {
+        border: 1px solid var(--calendar-selector-button-outline-border-color);
+    }
 
-    &:not(.disabled):hover {
+    &.selected,
+    &.selected:disabled {
         background-color: var(--color-light-bg-primary-inverted);
         color: var(--color-light-text-primary-inverted);
+
+        &:not(:disabled):hover {
+            background-color: var(--color-light-bg-primary-inverted);
+            color: var(--color-light-text-primary-inverted);
+        }
+    }
+
+    & > * {
+        flex-grow: 1;
     }
 }