diff --git a/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx b/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx index 9380ff4d4e2..51553032071 100644 --- a/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx +++ b/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx @@ -42,13 +42,7 @@ export const AsyncLiveRegionAlert: React.FunctionComponent = () => { text="Async alerts on" buttonId="async-alerts-on" isSelected={isActive} - onChange={() => setIsActive(true)} - /> - setIsActive(false)} + onChange={() => setIsActive(!isActive)} /> diff --git a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx index 8ec28417902..a00c8c2063c 100644 --- a/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx +++ b/packages/react-core/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx @@ -5,7 +5,8 @@ export const ToggleGroupDefaultSingle: React.FunctionComponent = () => { const [isSelected, setIsSelected] = useState(''); const handleItemClick = (event, _isSelected: boolean) => { const id = event.currentTarget.id; - setIsSelected(id); + // Allow toggling off if clicking the already selected item + setIsSelected(isSelected === id ? '' : id); }; return ( diff --git a/packages/react-table/src/components/Table/examples/TableActions.tsx b/packages/react-table/src/components/Table/examples/TableActions.tsx index a7aec8bea0d..c3922cec3c5 100644 --- a/packages/react-table/src/components/Table/examples/TableActions.tsx +++ b/packages/react-table/src/components/Table/examples/TableActions.tsx @@ -23,7 +23,7 @@ interface Repository { singleAction: string; } -type ExampleType = 'defaultToggle' | 'customToggle'; +type ExampleType = 'customToggle'; export const TableActions: React.FunctionComponent = () => { // In real usage, this data would come from some external source like an API via props. @@ -45,10 +45,11 @@ export const TableActions: React.FunctionComponent = () => { }; // This state is just for the ToggleGroup in this example and isn't necessary for Table usage. - const [exampleChoice, setExampleChoice] = useState('defaultToggle'); + const [exampleChoice, setExampleChoice] = useState(''); const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (event, _isSelected) => { const id = event.currentTarget.id; - setExampleChoice(id as ExampleType); + // Allow toggling off if clicking the already selected item + setExampleChoice(exampleChoice === id ? '' : (id as ExampleType)); }; const customActionsToggle = (props: CustomActionsToggleProps) => ( @@ -95,12 +96,6 @@ export const TableActions: React.FunctionComponent = () => { return ( - { // In real usage, this data would come from some external source like an API via props. @@ -29,21 +29,16 @@ export const TableBasic: React.FunctionComponent = () => { }; // This state is just for the ToggleGroup in this example and isn't necessary for Table usage. - const [exampleChoice, setExampleChoice] = useState('default'); + const [exampleChoice, setExampleChoice] = useState(''); const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (event, _isSelected) => { const id = event.currentTarget.id; - setExampleChoice(id as ExampleType); + // Allow toggling off if clicking the already selected item + setExampleChoice(exampleChoice === id ? '' : (id as ExampleType)); }; return ( - {
Simple table using composable components