@instructure/ui-toggle-details 9.6.1-snapshot-2 → 9.7.2

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.6.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v9.6.0...v9.6.1-snapshot-2) (2024-09-06)
+## [9.7.2](https://github.com/instructure/instructure-ui/compare/v9.7.0...v9.7.2) (2024-10-10)
 
 **Note:** Version bump only for package @instructure/ui-toggle-details
 
@@ -11,6 +11,25 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+## [9.7.1](https://github.com/instructure/instructure-ui/compare/v9.7.0...v9.7.1) (2024-10-10)
+
+**Note:** Version bump only for package @instructure/ui-toggle-details
+
+
+
+
+
+# [9.7.0](https://github.com/instructure/instructure-ui/compare/v9.6.0...v9.7.0) (2024-09-23)
+
+
+### Bug Fixes
+
+* **ui-toggle-details:** fix ToggleDetails flickering ([4c55bc9](https://github.com/instructure/instructure-ui/commit/4c55bc9cf751944cae4fceda983ea060f9398c54))
+
+
+
+
+
 # [9.6.0](https://github.com/instructure/instructure-ui/compare/v9.5.2...v9.6.0) (2024-08-14)
 
 **Note:** Version bump only for package @instructure/ui-toggle-details

package/es/ToggleDetails/index.js

@@ -46,13 +46,9 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     this._button = null;
     this.getButtonRef = el => this._button = el;
     this.handleToggle = (event, expanded) => {
-      var _this$props$makeStyle, _this$props;
       if (typeof this.props.onToggle === 'function') {
         this.props.onToggle(event, expanded);
       }
-      (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, {
-        animate: true
-      });
     };
   }
   get focused() {
@@ -63,22 +59,18 @@ let ToggleDetails = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     (_this$_button = this._button) === null || _this$_button === void 0 ? void 0 : _this$_button.focus();
   }
   componentDidMount() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
-      animate: false
-    });
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
   componentDidUpdate() {
-    var _this$props$makeStyle3, _this$props3;
-    (_this$props$makeStyle3 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle3 === void 0 ? void 0 : _this$props$makeStyle3.call(_this$props3, {
-      animate: true
-    });
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
   renderSummary(expanded) {
     var _this$props$styles, _this$props$styles2;
-    const _this$props4 = this.props,
-      summary = _this$props4.summary,
-      iconPosition = _this$props4.iconPosition;
+    const _this$props3 = this.props,
+      summary = _this$props3.summary,
+      iconPosition = _this$props3.iconPosition;
     return jsx("span", {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.summary
     }, iconPosition === 'start' && this.renderIcon(expanded), jsx("span", {

package/es/ToggleDetails/styles.js

@@ -38,12 +38,11 @@ const contentAnimation = keyframes`
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props, state) => {
+const generateStyle = (componentTheme, props, _state) => {
   const fluidWidth = props.fluidWidth,
     iconPosition = props.iconPosition,
     size = props.size,
     variant = props.variant;
-  const animate = state.animate;
   const positionIconAtEnd = iconPosition === 'end' && (variant === 'filled' || fluidWidth);
   const fluidWidthStyles = fluidWidth ? {
     display: 'block',
@@ -183,13 +182,13 @@ const generateStyle = (componentTheme, props, state) => {
       ...fontSizeStyles[size],
       ...indentDetailsStyles[size]
     },
-    content: animate ? {
+    content: {
       label: 'toggleDetails__content',
       opacity: 0.01,
       animationName: contentAnimation,
       animationFillMode: 'forwards',
       animationDuration: '.3s'
-    } : {}
+    }
   };
 };
 export default generateStyle;

package/lib/ToggleDetails/index.js

@@ -56,13 +56,9 @@ let ToggleDetails = exports.ToggleDetails = (_dec = (0, _emotion.withStyle)(_sty
     this._button = null;
     this.getButtonRef = el => this._button = el;
     this.handleToggle = (event, expanded) => {
-      var _this$props$makeStyle, _this$props;
       if (typeof this.props.onToggle === 'function') {
         this.props.onToggle(event, expanded);
       }
-      (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, {
-        animate: true
-      });
     };
   }
   get focused() {
@@ -73,22 +69,18 @@ let ToggleDetails = exports.ToggleDetails = (_dec = (0, _emotion.withStyle)(_sty
     (_this$_button = this._button) === null || _this$_button === void 0 ? void 0 : _this$_button.focus();
   }
   componentDidMount() {
-    var _this$props$makeStyle2, _this$props2;
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
-      animate: false
-    });
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
   componentDidUpdate() {
-    var _this$props$makeStyle3, _this$props3;
-    (_this$props$makeStyle3 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle3 === void 0 ? void 0 : _this$props$makeStyle3.call(_this$props3, {
-      animate: true
-    });
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
   renderSummary(expanded) {
     var _this$props$styles, _this$props$styles2;
-    const _this$props4 = this.props,
-      summary = _this$props4.summary,
-      iconPosition = _this$props4.iconPosition;
+    const _this$props3 = this.props,
+      summary = _this$props3.summary,
+      iconPosition = _this$props3.iconPosition;
     return (0, _emotion.jsx)("span", {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.summary
     }, iconPosition === 'start' && this.renderIcon(expanded), (0, _emotion.jsx)("span", {

package/lib/ToggleDetails/styles.js

@@ -44,12 +44,11 @@ const contentAnimation = (0, _emotion.keyframes)`
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props, state) => {
+const generateStyle = (componentTheme, props, _state) => {
   const fluidWidth = props.fluidWidth,
     iconPosition = props.iconPosition,
     size = props.size,
     variant = props.variant;
-  const animate = state.animate;
   const positionIconAtEnd = iconPosition === 'end' && (variant === 'filled' || fluidWidth);
   const fluidWidthStyles = fluidWidth ? {
     display: 'block',
@@ -189,13 +188,13 @@ const generateStyle = (componentTheme, props, state) => {
       ...fontSizeStyles[size],
       ...indentDetailsStyles[size]
     },
-    content: animate ? {
+    content: {
       label: 'toggleDetails__content',
       opacity: 0.01,
       animationName: contentAnimation,
       animationFillMode: 'forwards',
       animationDuration: '.3s'
-    } : {}
+    }
   };
 };
 var _default = exports.default = generateStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-toggle-details",
-  "version": "9.6.1-snapshot-2",
+  "version": "9.7.2",
   "description": "A styled toggleable, accordion-like component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,28 +23,28 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "9.6.1-snapshot-2",
-    "@instructure/ui-test-locator": "9.6.1-snapshot-2",
-    "@instructure/ui-test-queries": "9.6.1-snapshot-2",
-    "@instructure/ui-test-utils": "9.6.1-snapshot-2",
-    "@instructure/ui-themes": "9.6.1-snapshot-2"
+    "@instructure/ui-babel-preset": "9.7.2",
+    "@instructure/ui-test-locator": "9.7.2",
+    "@instructure/ui-test-queries": "9.7.2",
+    "@instructure/ui-test-utils": "9.7.2",
+    "@instructure/ui-themes": "9.7.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/emotion": "9.6.1-snapshot-2",
-    "@instructure/shared-types": "9.6.1-snapshot-2",
-    "@instructure/ui-buttons": "9.6.1-snapshot-2",
-    "@instructure/ui-dom-utils": "9.6.1-snapshot-2",
-    "@instructure/ui-expandable": "9.6.1-snapshot-2",
-    "@instructure/ui-flex": "9.6.1-snapshot-2",
-    "@instructure/ui-icons": "9.6.1-snapshot-2",
-    "@instructure/ui-motion": "9.6.1-snapshot-2",
-    "@instructure/ui-prop-types": "9.6.1-snapshot-2",
-    "@instructure/ui-react-utils": "9.6.1-snapshot-2",
-    "@instructure/ui-testable": "9.6.1-snapshot-2",
-    "@instructure/ui-utils": "9.6.1-snapshot-2",
-    "@instructure/ui-view": "9.6.1-snapshot-2",
-    "@instructure/uid": "9.6.1-snapshot-2",
+    "@instructure/emotion": "9.7.2",
+    "@instructure/shared-types": "9.7.2",
+    "@instructure/ui-buttons": "9.7.2",
+    "@instructure/ui-dom-utils": "9.7.2",
+    "@instructure/ui-expandable": "9.7.2",
+    "@instructure/ui-flex": "9.7.2",
+    "@instructure/ui-icons": "9.7.2",
+    "@instructure/ui-motion": "9.7.2",
+    "@instructure/ui-prop-types": "9.7.2",
+    "@instructure/ui-react-utils": "9.7.2",
+    "@instructure/ui-testable": "9.7.2",
+    "@instructure/ui-utils": "9.7.2",
+    "@instructure/ui-view": "9.7.2",
+    "@instructure/uid": "9.7.2",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/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

package/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() {

package/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'
+    }
   }
 }