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

[joyenjoyer]

Closes: INSTUI-4190

Test:
Try expanding and closing ToggleDetails controlled and uncontrolled examples in our docs app. Observe if the component flickers.

I tested whether changing properties causes flickering or any other issues, it does not. You can use the below code for testing:

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

[github-actions]

PR Preview Action v1.4.7
🚀 Deployed preview to https://instructure.github.io/instructure-ui/pr-preview/pr-1651/
on branch gh-pages at 2024-09-03 15:56 UTC

[matyasf]

I dont see any flickering in the examples even before this fix. Can you please link an example where the difference if visible? Thanks!

[joyenjoyer]

Create an example app where changing other properties (used in styles.ts) can be tested for this logic.