fix(buttons): improve stroke/fill icon swap for ToggleIconButton (#893)

zendeskgarden · Oct 7, 2020 · 4c2407e · 4c2407e
1 parent aefdef3
commit 4c2407e
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 14 deletions.
diff --git a/packages/buttons/.size-snapshot.json b/packages/buttons/.size-snapshot.json
@@ -19,21 +19,21 @@
     }
   },
   "index.cjs.js": {
-    "bundled": 26510,
-    "minified": 18990,
-    "gzipped": 4600
+    "bundled": 26591,
+    "minified": 19052,
+    "gzipped": 4630
   },
   "index.esm.js": {
-    "bundled": 24550,
-    "minified": 17287,
-    "gzipped": 4448,
+    "bundled": 24631,
+    "minified": 17349,
+    "gzipped": 4477,
     "treeshaked": {
       "rollup": {
-        "code": 13593,
+        "code": 13655,
         "import_statements": 383
       },
       "webpack": {
-        "code": 15464
+        "code": 15526
       }
     }
   }

diff --git a/packages/buttons/examples/basic.md b/packages/buttons/examples/basic.md
@@ -388,7 +388,8 @@ Either click or use the keyboard to toggle each button's pressed state.
 ```jsx
 const { Well } = require('@zendeskgarden/react-notifications/src');
 const { Toggle, Field, Input, Label } = require('@zendeskgarden/react-forms/src');
-const Icon = require('@zendeskgarden/svg-icons/src/16/eye-stroke.svg').default;
+const IconStroke = require('@zendeskgarden/svg-icons/src/16/leaf-stroke.svg').default;
+const IconFill = require('@zendeskgarden/svg-icons/src/16/leaf-fill.svg').default;
 
 initialState = {
   buttonPressed: false,
@@ -457,7 +458,10 @@ initialState = {
             disabled={state.disabled}
             onClick={event => setState({ iconButtonPressed: !state.iconButtonPressed })}
           >
-            <Icon />
+            <svg>
+              <IconFill style={{ opacity: state.iconButtonPressed ? 1 : 0 }} />
+              <IconStroke style={{ opacity: state.iconButtonPressed ? 0 : 1 }} />
+            </svg>
           </ToggleIconButton>
         </Col>
       </Row>

diff --git a/packages/buttons/src/styled/StyledIcon.ts b/packages/buttons/src/styled/StyledIcon.ts
@@ -34,7 +34,7 @@ const sizeStyles = (props: IStyledIconProps & ThemeProps<DefaultTheme>) => {
 };
 
 /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-export const StyledIcon = styled(({ children, isRotated, ...props }) =>
+export const StyledIcon = styled(({ children, isRotated, theme, ...props }) =>
   React.cloneElement(Children.only(children), props)
 ).attrs({
   'data-garden-id': COMPONENT_ID,

diff --git a/packages/buttons/src/styled/StyledIconButton.ts b/packages/buttons/src/styled/StyledIconButton.ts
@@ -46,18 +46,22 @@ const iconButtonStyles = (props: IStyledButtonProps & ThemeProps<DefaultTheme>)
   `;
 };
 
+/**
+ * 1. Ease opacity transition between embedded icons (i.e. stroke-fill).
+ */
 const iconStyles = (props: IStyledButtonProps & ThemeProps<DefaultTheme>) => {
   const size = props.theme.iconSizes.md;
 
   return css`
     width: ${size};
     height: ${size};
+
+    & > svg {
+      transition: opacity 0.15s ease-in-out; /* [1] */
+    }
   `;
 };
 
-/**
- * Accepts all `<button>` props
- */
 export const StyledIconButton = styled(StyledButton).attrs(() => ({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION