fix(ui-toggle-details): fix ToggleDetails flickering

Closes: INSTUI-4190
instructure · Sep 3, 2024 · fee93f8 · fee93f8
1 parent ba9046f
commit fee93f8
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 15 deletions.
diff --git a/packages/ui-toggle-details/src/ToggleDetails/README.md b/packages/ui-toggle-details/src/ToggleDetails/README.md
@@ -131,6 +131,89 @@ type: example
 </ToggleDetails>
 ```
 
+### Example to demonstrate more properties
+
+```js
+---
+type: example
+---
+const Example = () => {
+  const [state, setState] = useState({
+    expanded: true,
+    fluidWidth: true,
+    iconPosition: 'start',
+    size: 'small',
+    variant: 'default'
+  });
+
+  const handleChange = (field, value) => setState(prevState => ({ ...prevState, [field]: value }));
+  const handleToggle = () => setState(prevState => ({ ...prevState, expanded: !prevState.expanded }));
+
+  const renderOptions = () => {
+    const { fluidWidth, iconPosition, size, variant } = state;
+    const options = [
+      { name: 'iconPosition', values: ['start', 'end'] },
+      { name: 'size', values: ['small', 'medium', 'large'] },
+      { name: 'variant', values: ['default', 'filled'] },
+    ];
+
+    return (
+      <Flex alignItems="start">
+        {options.map(({ name, values }) => (
+          <Flex.Item margin="small" key={name}>
+            <RadioInputGroup
+              name={name}
+              description={name}
+              value={state[name]}
+              onChange={(e, value) => handleChange(name, value)}
+            >
+              {values.map(val => (
+                <RadioInput label={val} value={val} key={val} />
+              ))}
+            </RadioInputGroup>
+          </Flex.Item>
+        ))}
+        <Flex.Item margin="small">
+          <Checkbox
+            label="fluidWidth"
+            checked={fluidWidth}
+            onChange={() => handleChange('fluidWidth', !fluidWidth)}
+          />
+        </Flex.Item>
+      </Flex>
+    );
+  };
+
+  const { expanded, iconPosition, size, variant, fluidWidth } = state;
+
+  return (
+    <div>
+      {renderOptions()}
+      <Button onClick={handleToggle}>
+        This Button {expanded ? 'Collapses' : 'Expands'}
+      </Button>
+      <br />
+      <br />
+      <ToggleDetails
+        summary="Click to hide me!"
+        expanded={expanded}
+        onToggle={(_, expanded) => handleChange('expanded', expanded)}
+        fluidWidth={fluidWidth}
+        iconPosition={iconPosition}
+        size={size}
+        variant={variant}
+      >
+        <Text weight="bold">
+          I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!
+        </Text>
+      </ToggleDetails>
+    </div>
+  );
+};
+
+render(<Example />)
+```
+
 ### Guidelines
 
 ```js

diff --git a/packages/ui-toggle-details/src/ToggleDetails/index.tsx b/packages/ui-toggle-details/src/ToggleDetails/index.tsx
@@ -36,7 +36,7 @@ import { testable } from '@instructure/ui-testable'
 import { withStyle, jsx } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import type { ToggleDetailsProps, ToggleDetailsStyleProps } from './props'
+import type { ToggleDetailsProps } from './props'
 import { allowedProps, propTypes } from './props'
 import type { ExpandableToggleProps } from '@instructure/ui-expandable'
 
@@ -75,11 +75,11 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
   }
 
   componentDidMount() {
-    this.props.makeStyles?.({ animate: false } as ToggleDetailsStyleProps)
+    this.props.makeStyles?.()
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.({ animate: true } as ToggleDetailsStyleProps)
+    this.props.makeStyles?.()
   }
 
   getButtonRef = (el: Element | null) => (this._button = el as HTMLElement)
@@ -169,7 +169,6 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
     if (typeof this.props.onToggle === 'function') {
       this.props.onToggle(event, expanded)
     }
-    this.props.makeStyles?.({ animate: true })
   }
 
   render() {

diff --git a/packages/ui-toggle-details/src/ToggleDetails/styles.ts b/packages/ui-toggle-details/src/ToggleDetails/styles.ts
@@ -49,10 +49,9 @@ const contentAnimation = keyframes`
 const generateStyle = (
   componentTheme: ToggleDetailsTheme,
   props: ToggleDetailsProps,
-  state: ToggleDetailsStyleProps
+  _state: ToggleDetailsStyleProps
 ): ToggleDetailsStyle => {
   const { fluidWidth, iconPosition, size, variant } = props
-  const { animate } = state
 
   const positionIconAtEnd =
     iconPosition === 'end' && (variant === 'filled' || fluidWidth)
@@ -178,15 +177,13 @@ const generateStyle = (
       ...fontSizeStyles[size!],
       ...indentDetailsStyles[size!]
     },
-    content: animate
-      ? {
-          label: 'toggleDetails__content',
-          opacity: 0.01,
-          animationName: contentAnimation,
-          animationFillMode: 'forwards',
-          animationDuration: '.3s'
-        }
-      : {}
+    content: {
+      label: 'toggleDetails__content',
+      opacity: 0.01,
+      animationName: contentAnimation,
+      animationFillMode: 'forwards',
+      animationDuration: '.3s'
+    }
   }
 }