Skip to content

Commit 096d40c

Browse files
jiveyjivey
committed
accept RAC props for toggle button components and add disabled style
1 parent 22eb984 commit 096d40c

5 files changed

Lines changed: 43 additions & 32 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@openstax/ui-components",
3-
"version": "1.17.4",
3+
"version": "1.18.1",
44
"license": "MIT",
55
"source": "./src/index.ts",
66
"types": "./dist/index.d.ts",

‎src/components/ToggleButtonGroup.stories.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { ToggleButtonGroup } from "./ToggleButtonGroup/index";
2+
import { ToggleButton, ToggleButtonGroup } from "./ToggleButtonGroup/index";
33
import type { Key } from "react-aria-components";
44

55
const childrenListWithKeys = [
@@ -38,3 +38,17 @@ export const SingleSelection = () => {
3838
</>
3939
);
4040
};
41+
42+
export const Disabled = () => {
43+
const [selectedItem, setSelectedItem] = React.useState('');
44+
return (
45+
<>
46+
<ToggleButtonGroup
47+
selectedItems={new Set<Key>([selectedItem])}
48+
onSelectionChange={(newSet) => setSelectedItem(newSet.size ? [...newSet][0] as string : '')}
49+
disallowEmptySelection={true}
50+
items={[...childrenListWithKeys, { id: 'purple', value: 'Purple', isDisabled: true }]}
51+
/>
52+
</>
53+
);
54+
};

‎src/components/ToggleButtonGroup/index.tsx‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import { StyledToggleButtonGroup, StyledToggleButton } from "./styles";
2-
import { Key } from "react-aria-components";
2+
import { ToggleButtonGroupProps as RACToggleButtonGroupProps, ToggleButtonProps as RACToggleButtonProps, Key } from "react-aria-components";
33

4-
export interface ToggleButtonGroupProps {
5-
items: { id: string, value: string }[];
4+
export interface ToggleButtonGroupProps extends RACToggleButtonGroupProps {
5+
items: (RACToggleButtonProps & { value: string })[];
66
selectedItems?: Iterable<Key>;
7-
onSelectionChange?: ((keys: Set<Key>) => void);
8-
selectionMode?: 'single' | 'multiple';
9-
className?: string;
107
}
118

129
export const ToggleButton = StyledToggleButton;
@@ -15,27 +12,23 @@ export const ToggleButtonGroup = (
1512
{
1613
items,
1714
selectedItems,
18-
onSelectionChange,
19-
selectionMode = 'single',
2015
...props
2116
}: ToggleButtonGroupProps) => {
2217

2318
return (
2419
<StyledToggleButtonGroup
25-
selectionMode={selectionMode}
2620
selectedKeys={selectedItems}
27-
onSelectionChange={onSelectionChange}
2821
{...props}
2922
>
30-
{items.map((item) =>
23+
{items.map(({ value, ...itemProps }) =>
3124
<StyledToggleButton
32-
key={item.id}
33-
data-button-id={item.id}
34-
id={item.id}
25+
key={itemProps.id}
26+
data-button-id={itemProps.id}
27+
{...itemProps}
3528
// Allow parents to trigger handlers, works with onPointer events but not with onMouse events
3629
onPressStart={e => e.continuePropagation()}
3730
>
38-
{item.value}
31+
{value}
3932
</StyledToggleButton>
4033
)}
4134
</StyledToggleButtonGroup>

‎src/components/ToggleButtonGroup/styles.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ export const StyledToggleButton = styled(ToggleButton)`
2727
background-color: ${colors.palette.neutralLighter};
2828
}
2929
30+
&[data-disabled] {
31+
color: ${colors.palette.neutralLight};
32+
}
33+
3034
&[data-focus-visible] {
3135
outline: none;
3236
box-shadow: inset 0 0 0 0.1rem ${colors.palette.black};

‎src/components/__snapshots__/ToggleButtonGroup.spec.tsx.snap‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
1313
>
1414
<button
1515
aria-pressed={true}
16-
className="sc-dkzDqf cQxaky"
16+
className="sc-dkzDqf ivRDBW"
1717
data-button-id="red"
1818
data-rac=""
1919
data-react-aria-pressable={true}
@@ -39,7 +39,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
3939
</button>
4040
<button
4141
aria-pressed={false}
42-
className="sc-dkzDqf cQxaky"
42+
className="sc-dkzDqf ivRDBW"
4343
data-button-id="green"
4444
data-rac=""
4545
data-react-aria-pressable={true}
@@ -64,7 +64,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
6464
</button>
6565
<button
6666
aria-pressed={false}
67-
className="sc-dkzDqf cQxaky"
67+
className="sc-dkzDqf ivRDBW"
6868
data-button-id="blue"
6969
data-rac=""
7070
data-react-aria-pressable={true}
@@ -89,7 +89,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
8989
</button>
9090
<button
9191
aria-pressed={false}
92-
className="sc-dkzDqf cQxaky"
92+
className="sc-dkzDqf ivRDBW"
9393
data-button-id="yellow"
9494
data-rac=""
9595
data-react-aria-pressable={true}
@@ -114,7 +114,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
114114
</button>
115115
<button
116116
aria-pressed={false}
117-
className="sc-dkzDqf cQxaky"
117+
className="sc-dkzDqf ivRDBW"
118118
data-button-id="orange"
119119
data-rac=""
120120
data-react-aria-pressable={true}
@@ -153,7 +153,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
153153
>
154154
<button
155155
aria-checked={true}
156-
className="sc-dkzDqf cQxaky"
156+
className="sc-dkzDqf ivRDBW"
157157
data-button-id="red"
158158
data-rac=""
159159
data-react-aria-pressable={true}
@@ -180,7 +180,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
180180
</button>
181181
<button
182182
aria-checked={false}
183-
className="sc-dkzDqf cQxaky"
183+
className="sc-dkzDqf ivRDBW"
184184
data-button-id="green"
185185
data-rac=""
186186
data-react-aria-pressable={true}
@@ -206,7 +206,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
206206
</button>
207207
<button
208208
aria-checked={false}
209-
className="sc-dkzDqf cQxaky"
209+
className="sc-dkzDqf ivRDBW"
210210
data-button-id="blue"
211211
data-rac=""
212212
data-react-aria-pressable={true}
@@ -232,7 +232,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
232232
</button>
233233
<button
234234
aria-checked={false}
235-
className="sc-dkzDqf cQxaky"
235+
className="sc-dkzDqf ivRDBW"
236236
data-button-id="yellow"
237237
data-rac=""
238238
data-react-aria-pressable={true}
@@ -258,7 +258,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
258258
</button>
259259
<button
260260
aria-checked={false}
261-
className="sc-dkzDqf cQxaky"
261+
className="sc-dkzDqf ivRDBW"
262262
data-button-id="orange"
263263
data-rac=""
264264
data-react-aria-pressable={true}
@@ -298,7 +298,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
298298
>
299299
<button
300300
aria-checked={true}
301-
className="sc-dkzDqf cQxaky"
301+
className="sc-dkzDqf ivRDBW"
302302
data-button-id="red"
303303
data-rac=""
304304
data-react-aria-pressable={true}
@@ -325,7 +325,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
325325
</button>
326326
<button
327327
aria-checked={false}
328-
className="sc-dkzDqf cQxaky"
328+
className="sc-dkzDqf ivRDBW"
329329
data-button-id="green"
330330
data-rac=""
331331
data-react-aria-pressable={true}
@@ -351,7 +351,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
351351
</button>
352352
<button
353353
aria-checked={false}
354-
className="sc-dkzDqf cQxaky"
354+
className="sc-dkzDqf ivRDBW"
355355
data-button-id="blue"
356356
data-rac=""
357357
data-react-aria-pressable={true}
@@ -377,7 +377,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
377377
</button>
378378
<button
379379
aria-checked={false}
380-
className="sc-dkzDqf cQxaky"
380+
className="sc-dkzDqf ivRDBW"
381381
data-button-id="yellow"
382382
data-rac=""
383383
data-react-aria-pressable={true}
@@ -403,7 +403,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
403403
</button>
404404
<button
405405
aria-checked={false}
406-
className="sc-dkzDqf cQxaky"
406+
className="sc-dkzDqf ivRDBW"
407407
data-button-id="orange"
408408
data-rac=""
409409
data-react-aria-pressable={true}

0 commit comments

Comments
 (0)