From fee93f8a27ea88a31fb137be76a0d74cc4934d23 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Tue, 3 Sep 2024 13:21:45 +0200
Subject: [PATCH] fix(ui-toggle-details): fix ToggleDetails flickering

Closes: INSTUI-4190
---
 .../src/ToggleDetails/README.md               | 83 +++++++++++++++++++
 .../src/ToggleDetails/index.tsx               |  7 +-
 .../src/ToggleDetails/styles.ts               | 19 ++---
 3 files changed, 94 insertions(+), 15 deletions(-)

diff --git a/packages/ui-toggle-details/src/ToggleDetails/README.md b/packages/ui-toggle-details/src/ToggleDetails/README.md
index 212c4d418f..b298ba213e 100644
--- 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
index 03e0df7c04..7c0502ed51 100644
--- 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
index acd5b9b1e3..014ca2f9bc 100644
--- 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'
+    }
   }
 }