feat: synced styles and added large variant of IconButton

dequelabs · Dec 27, 2023 · 95439f8 · 95439f8
1 parent 9b55195
commit 95439f8
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 57 deletions.
diff --git a/docs/pages/components/IconButton.mdx b/docs/pages/components/IconButton.mdx
@@ -72,6 +72,19 @@ If there are multiple icon buttons with the same label, the visible label text c
 </div>
 ```
 
+### Large
+
+Large icon button use exactly the same settings as usual variant, but the size is used to be 36px
+
+```jsx example
+<IconButton variant="error" icon="pencil" label="Edit" large />
+<IconButton variant="error" icon="pencil" label="Edit" disabled large />
+<IconButton variant="secondary" icon="pencil" label="Edit" large />
+<IconButton variant="secondary" icon="pencil" label="Edit" disabled large />
+<IconButton variant="primary" icon="pencil" label="Edit" large />
+<IconButton variant="primary" icon="pencil" label="Edit" disabled large />
+```
+
 ## Props
 
 <ComponentProps

diff --git a/packages/react/src/components/IconButton/index.tsx b/packages/react/src/components/IconButton/index.tsx
@@ -25,6 +25,7 @@ export interface IconButtonOwnProps {
   tooltipVariant?: TooltipProps['variant'];
   tooltipPortal?: TooltipProps['portal'];
   variant?: 'primary' | 'secondary' | 'error';
+  large?: boolean;
 }
 
 type PolymorphicIconButton = Polymorphic.ForwardRefComponent<
@@ -52,6 +53,7 @@ const IconButton = forwardRef(
       variant = 'secondary',
       disabled,
       tabIndex = 0,
+      large,
       ...other
     }: any,
     ref
@@ -81,7 +83,8 @@ const IconButton = forwardRef(
             IconButton: true,
             'IconButton--primary': variant === 'primary',
             'IconButton--secondary': variant === 'secondary',
-            'IconButton--error': variant === 'error'
+            'IconButton--error': variant === 'error',
+            'IconButton--large': large
           })}
           ref={internalRef}
           disabled={disabled}

diff --git a/packages/styles/icon-button.css b/packages/styles/icon-button.css
@@ -1,46 +1,41 @@
 :root {
+  --icon-button-content-color-light-disabled: #ccc;
+  --icon-button-background-color-light: #dadada;
+  --icon-button-background-color-light-active: #c2c2c2;
+  --icon-button-outline-color-light: var(--icon-button-background-color-light);
+
+  --icon-button-content-color-dark-disabled: #fff 40%;
+  --icon-button-background-color-dark: var(--accent-medium);
+  --icon-button-background-color-dark-disabled: var(--accent-medium);
+  --icon-button-background-color-dark-active: var(--accent-dark);
+  --icon-button-outline-color-dark: var(--icon-button-background-color-dark);
+
+  /* Primary */
+  --icon-button-primary-color: var(--button-text-color-light);
   --icon-button-background-color-primary: var(
     --button-background-color-primary
   );
-  --icon-button-background-color-primary-disabled: var(
-    --button-background-color-primary-disabled
-  );
   --icon-button-background-color-primary-active: var(
     --button-background-color-primary-active
   );
   --icon-button-outline-color-primary: var(--button-outline-color-primary);
 
+  --icon-button-large-size: 36px;
+
+  /* Secondary */
+  --icon-button-secondary-color: var(--button-text-color-dark);
   --icon-button-background-color-secondary: var(
     --button-background-color-secondary
   );
-  --icon-button-background-color-secondary-disabled: var(
-    --button-background-color-secondary-disabled
-  );
   --icon-button-background-color-secondary-active: var(
     --button-background-color-secondary-active
   );
   --icon-button-outline-color-secondary: var(--button-outline-color-secondary);
   --icon-button-border-color-secondary: var(--gray-40);
 
+  /* Error */
   --icon-button-background-color-error: var(--button-background-color-error);
-  --icon-button-background-color-error-disabled: var(
-    --button-background-color-error-disabled
-  );
-  --icon-button-background-color-error-active: var(
-    --button-background-color-error-active
-  );
   --icon-button-outline-color-error: var(--button-outline-color-error);
-
-  --icon-button-content-color-light-disabled: #ccc;
-  --icon-button-background-color-light: #dadada;
-  --icon-button-background-color-light-active: #c2c2c2;
-  --icon-button-outline-color-light: var(--icon-button-background-color-light);
-
-  --icon-button-content-color-dark-disabled: #fff 40%;
-  --icon-button-background-color-dark: var(--accent-medium);
-  --icon-button-background-color-dark-disabled: var(--accent-medium);
-  --icon-button-background-color-dark-active: var(--accent-dark);
-  --icon-button-outline-color-dark: var(--icon-button-background-color-dark);
 }
 
 .IconButton {
@@ -91,6 +86,11 @@ a.IconButton {
   pointer-events: none;
 }
 
+.IconButton--large {
+  height: var(--icon-button-large-size);
+  width: var(--icon-button-large-size);
+}
+
 .IconButton--secondary[aria-disabled='true'],
 .IconButton--secondary[disabled] {
   color: var(--disabled);
@@ -117,7 +117,7 @@ a.IconButton {
 
 .IconButton--primary {
   background-color: var(--icon-button-background-color-primary);
-  color: var(--button-text-color-light);
+  color: var(--icon-button-primary-color);
 }
 
 .IconButton--primary:not([disabled]):not([aria-disabled='true']):hover:before {
@@ -131,10 +131,12 @@ a.IconButton {
 .IconButton--secondary {
   border: 1px solid var(--icon-button-border-color-secondary);
   background-color: var(--icon-button-background-color-secondary);
-  color: var(--button-text-color-dark);
+  color: var(--icon-button-secondary-color);
 }
 
-.IconButton--secondary:not([disabled]):not([aria-disabled='true']):hover:before {
+.IconButton--secondary:not([disabled]):not(
+    [aria-disabled='true']
+  ):hover:before {
   box-shadow: 0 0 0 1px var(--icon-button-outline-color-secondary);
 }
 
@@ -152,61 +154,83 @@ a.IconButton {
 }
 
 .IconButton--error:active {
-  background-color: var(--icon-button-background-color-error-active);
+  background-color: var(--button-background-color-error-active);
 }
 
 /* Dark Theme */
 
 .cauldron--theme-dark {
-  --icon-button-border-color-secondary: var(--accent-medium);
-  --icon-button-background-color-secondary: var(--accent-medium);
-  --icon-button-background-color-primary: var(--gray-20);
   --icon-button-icon-color: var(--white);
-}
+  --icon-button-outline-shadow-color: var(--accent-medium);
 
-.cauldron--theme-dark .IconButton--error {
-  background-color: var(--accent-dark);
-  color: var(--white);
-}
+  /* Primary */
+  --icon-button-primary-color: var(--white);
+  --icon-button-background-color-primary: var(--accent-medium);
+  --icon-button-background-color-primary-active: var(--accent-info-active);
+  --icon-button-outline-color-primary: var(--accent-info);
 
-.cauldron--theme-dark .IconButton--primary {
-  color: var(--gray-90);
-}
+  /* Secondary */
+  --icon-button-border-color-secondary: var(--accent-light);
+  --icon-button-background-color-secondary: var(--accent-medium);
+  --icon-button-secondary-color: var(--white);
+  --icon-button-background-color-secondary-active: var(--accent-light);
+  --icon-button-outline-color-secondary: var(--accent-light);
 
-.cauldron--theme-dark .IconButton--primary[aria-disabled='true'],
-.cauldron--theme-dark .IconButton--primary[disabled] {
-  background-color: var(--gray-20);
-  color: var(--gray-40);
+  /* Error */
+  --icon-button-background-color-error: var(--accent-medium);
+  --icon-button-outline-color-error: var(--accent-danger);
 }
 
-.cauldron--theme-dark .IconButton--secondary[aria-disabled='true'],
-.cauldron--theme-dark .IconButton--secondary[disabled] {
-  color: #5d676f;
+.cauldron--theme-dark .IconButton--primary {
+  border: 2px solid var(--accent-info);
 }
 
 .cauldron--theme-dark .IconButton--secondary {
-  color: var(--white);
+  border-width: 2px;
 }
 
 .cauldron--theme-dark .IconButton--error {
-  background-color: var(--accent-danger);
-  color: var(--accent-dark);
+  border: 2px solid var(--accent-danger);
 }
 
-.cauldron--theme-dark .IconButton--primary:active {
-  background-color: #e5ebec;
+.cauldron--theme-dark .IconButton--primary[aria-disabled='true'],
+.cauldron--theme-dark .IconButton--primary[disabled],
+.cauldron--theme-dark .IconButton--secondary[aria-disabled='true'],
+.cauldron--theme-dark .IconButton--secondary[disabled],
+.cauldron--theme-dark .IconButton--error[aria-disabled='true'],
+.cauldron--theme-dark .IconButton--error[disabled] {
+  color: var(--dark-workspace-color);
 }
 
-.cauldron--theme-dark .IconButton--secondary:active {
-  background-color: var(--accent-dark);
+.cauldron--theme-dark .IconButton--primary:active,
+.cauldron--theme-dark .IconButton--secondary:active,
+.cauldron--theme-dark .IconButton--error:active {
+  color: var(--accent-medium);
 }
 
 .cauldron--theme-dark
-  .IconButton--primary:not([disabled]):not([aria-disabled='true']):hover:before {
-  box-shadow: 0 0 0 1px var(--accent-light);
+  .IconButton--primary:not([disabled]):not(
+    [aria-disabled='true']
+  ):hover:before {
+  box-shadow: 0px 0px 0px 1px var(--icon-button-outline-shadow-color),
+    0px 0px 0px 2px var(--icon-button-outline-color-primary);
 }
 
 .cauldron--theme-dark
-  .IconButton--secondary:not([disabled]):not([aria-disabled='true']):hover:before {
-  box-shadow: 0 0 0 1px var(--white);
+  .IconButton--secondary:not([disabled]):not(
+    [aria-disabled='true']
+  ):hover:before {
+  box-shadow: 0px 0px 0px 1px var(--icon-button-outline-shadow-color),
+    0px 0px 0px 2px var(--icon-button-outline-color-secondary);
+}
+
+.cauldron--theme-dark
+  .IconButton--error:not([disabled]):not([aria-disabled='true']):hover:before {
+  box-shadow: 0px 0px 0px 1px var(--icon-button-outline-shadow-color),
+    0px 0px 0px 2px var(--icon-button-outline-color-error);
+}
+
+.cauldron--theme-dark .IconButton:focus:before {
+  box-shadow: 0px 0px 0px 2px var(--icon-button-outline-shadow-color),
+    0px 0px 0px 4px var(--button-focus-ring-color, --focus);
 }