Skip to content

Commit 696b937

Browse files
Mash707Mash707
authored
chore(card): add ability to hide radio button in example (#11832)
* chore(card): add ability to hide radio button in example * added docs * added hide radio checkbox to selectable example * updated a11y tags * minor changes
1 parent e53720b commit 696b937

File tree

3 files changed

+139
-109
lines changed

3 files changed

+139
-109
lines changed

‎packages/react-core/src/components/Card/examples/Card.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ You must avoid rendering any other interactive content within the `<Card>` when
131131

132132
### Single selectable
133133

134-
When a group of single selectable cards are related, you must pass the same `name` property to each card's `selectableActions` property.
134+
When a group of single selectable cards are related, you must pass the same `name` property to each card's `selectableActions` property. For more guidance on selectable cards with hidden input, see our [cards as tiles examples](#cards-as-tiles).
135135

136136
```ts file='./CardSingleSelectable.tsx'
137137

‎packages/react-core/src/components/Card/examples/CardSelectable.tsx‎

Lines changed: 73 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ export const SelectableCard: React.FunctionComponent = () => {
55
const [isChecked1, setIsChecked1] = useState(false);
66
const [isChecked2, setIsChecked2] = useState(false);
77
const [isChecked3, setIsChecked3] = useState(false);
8-
const [isSecondary, setIsSecondary] = useState<boolean>(false);
8+
const [isSecondary, setIsSecondary] = useState(false);
9+
const [displayCheckbox, setDisplayCheckbox] = useState(false);
910

1011
const id1 = 'selectable-card-input-1';
1112
const id2 = 'selectable-card-input-2';
@@ -31,6 +32,10 @@ export const SelectableCard: React.FunctionComponent = () => {
3132
setIsSecondary(checked);
3233
};
3334

35+
const toggleHide = (checked: boolean) => {
36+
setDisplayCheckbox(checked);
37+
};
38+
3439
return (
3540
<>
3641
<Checkbox
@@ -40,68 +45,76 @@ export const SelectableCard: React.FunctionComponent = () => {
4045
id="toggle-variant-selectable"
4146
name="toggle-variant"
4247
/>
43-
<div style={{ marginTop: '15px' }}>
44-
<Gallery hasGutter>
45-
<Card
46-
id="selectable-card-example-1"
47-
isSelectable
48-
isSelected={isChecked1}
49-
variant={isSecondary ? 'secondary' : 'default'}
48+
<Checkbox
49+
label="Hide checkbox"
50+
isChecked={displayCheckbox}
51+
onChange={(_event, checked) => toggleHide(checked)}
52+
id="selectable-toggle-hide-checkbox"
53+
name="toggle-hide"
54+
/>
55+
<Gallery hasGutter style={{ marginTop: '15px' }}>
56+
<Card
57+
id="selectable-card-example-1"
58+
isSelectable
59+
isSelected={isChecked1}
60+
variant={isSecondary ? 'secondary' : 'default'}
61+
>
62+
<CardHeader
63+
selectableActions={{
64+
selectableActionId: id1,
65+
selectableActionAriaLabelledby: 'selectable-card-example-1',
66+
name: id1,
67+
onChange,
68+
hasNoOffset: true,
69+
isHidden: displayCheckbox
70+
}}
5071
>
51-
<CardHeader
52-
selectableActions={{
53-
selectableActionId: id1,
54-
selectableActionAriaLabelledby: 'selectable-card-example-1',
55-
name: id1,
56-
onChange,
57-
hasNoOffset: true
58-
}}
59-
>
60-
<CardTitle>First card</CardTitle>
61-
</CardHeader>
62-
<CardBody>This card is selectable.</CardBody>
63-
</Card>
64-
<Card
65-
id="selectable-card-example-2"
66-
isSelectable
67-
isSelected={isChecked2}
68-
variant={isSecondary ? 'secondary' : 'default'}
72+
<CardTitle>First card</CardTitle>
73+
</CardHeader>
74+
<CardBody>This card is selectable.</CardBody>
75+
</Card>
76+
<Card
77+
id="selectable-card-example-2"
78+
isSelectable
79+
isSelected={isChecked2}
80+
variant={isSecondary ? 'secondary' : 'default'}
81+
>
82+
<CardHeader
83+
selectableActions={{
84+
selectableActionId: id2,
85+
selectableActionAriaLabelledby: 'selectable-card-example-2',
86+
name: id2,
87+
onChange,
88+
hasNoOffset: true,
89+
isHidden: displayCheckbox
90+
}}
6991
>
70-
<CardHeader
71-
selectableActions={{
72-
selectableActionId: id2,
73-
selectableActionAriaLabelledby: 'selectable-card-example-2',
74-
name: id2,
75-
onChange,
76-
hasNoOffset: true
77-
}}
78-
>
79-
<CardTitle>Second card</CardTitle>
80-
</CardHeader>
81-
<CardBody>This card is selectable.</CardBody>
82-
</Card>
83-
<Card
84-
id="selectable-card-example-3"
85-
isSelectable
86-
isDisabled
87-
isSelected={isChecked3}
88-
variant={isSecondary ? 'secondary' : 'default'}
92+
<CardTitle>Second card</CardTitle>
93+
</CardHeader>
94+
<CardBody>This card is selectable.</CardBody>
95+
</Card>
96+
<Card
97+
id="selectable-card-example-3"
98+
isSelectable
99+
isDisabled
100+
isSelected={isChecked3}
101+
variant={isSecondary ? 'secondary' : 'default'}
102+
>
103+
<CardHeader
104+
selectableActions={{
105+
selectableActionId: id3,
106+
selectableActionAriaLabelledby: 'selectable-card-example-3',
107+
name: id3,
108+
onChange,
109+
hasNoOffset: true,
110+
isHidden: displayCheckbox
111+
}}
89112
>
90-
<CardHeader
91-
selectableActions={{
92-
selectableActionId: id3,
93-
selectableActionAriaLabelledby: 'selectable-card-example-3',
94-
name: id3,
95-
onChange,
96-
hasNoOffset: true
97-
}}
98-
>
99-
<CardTitle>Third card</CardTitle>
100-
</CardHeader>
101-
<CardBody>This card is selectable but disabled.</CardBody>
102-
</Card>
103-
</Gallery>
104-
</div>
113+
<CardTitle>Third card</CardTitle>
114+
</CardHeader>
115+
<CardBody>This card is selectable but disabled.</CardBody>
116+
</Card>
117+
</Gallery>
105118
</>
106119
);
107120
};

‎packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx‎

Lines changed: 65 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,80 @@
11
import { useState } from 'react';
2-
import { Card, CardHeader, CardTitle, CardBody, Gallery } from '@patternfly/react-core';
2+
import { Card, CardHeader, CardTitle, CardBody, Gallery, Checkbox } from '@patternfly/react-core';
33

44
export const SingleSelectableCard: React.FunctionComponent = () => {
55
const [isChecked, setIsChecked] = useState('');
66
const id1 = 'single-selectable-card-input-1';
77
const id2 = 'single-selectable-card-input-2';
88
const id3 = 'single-selectable-card-input-3';
9+
const [displayRadioButton, setDisplayRadioButton] = useState(false);
910

1011
const onChange = (event: React.FormEvent<HTMLInputElement>) => {
1112
setIsChecked(event.currentTarget.id);
1213
};
1314

15+
const toggleHide = (checked: boolean) => {
16+
setDisplayRadioButton(checked);
17+
};
18+
1419
return (
15-
<Gallery hasGutter>
16-
<Card id="single-selectable-card-example-1" isSelectable isSelected={isChecked === id1}>
17-
<CardHeader
18-
selectableActions={{
19-
selectableActionId: id1,
20-
selectableActionAriaLabelledby: 'single-selectable-card-example-1',
21-
name: 'single-selectable-card-example',
22-
variant: 'single',
23-
onChange,
24-
hasNoOffset: true
25-
}}
26-
>
27-
<CardTitle>First card</CardTitle>
28-
</CardHeader>
29-
<CardBody>This card is single selectable.</CardBody>
30-
</Card>
31-
<Card id="single-selectable-card-example-2" isSelectable isSelected={isChecked === id2}>
32-
<CardHeader
33-
selectableActions={{
34-
selectableActionId: id2,
35-
selectableActionAriaLabelledby: 'single-selectable-card-example-2',
36-
name: 'single-selectable-card-example',
37-
variant: 'single',
38-
onChange,
39-
hasNoOffset: true
40-
}}
41-
>
42-
<CardTitle>Second card</CardTitle>
43-
</CardHeader>
44-
<CardBody>This card is single selectable.</CardBody>
45-
</Card>
46-
<Card id="single-selectable-card-example-3" isSelectable isDisabled isSelected={isChecked === id3}>
47-
<CardHeader
48-
selectableActions={{
49-
selectableActionId: id3,
50-
selectableActionAriaLabelledby: 'single-selectable-card-example-3',
51-
name: 'single-selectable-card-example',
52-
variant: 'single',
53-
onChange,
54-
hasNoOffset: true
55-
}}
56-
>
57-
<CardTitle>Third card</CardTitle>
58-
</CardHeader>
59-
<CardBody>This card is single selectable but disabled.</CardBody>
60-
</Card>
61-
</Gallery>
20+
<>
21+
<Checkbox
22+
label="Hide radio button"
23+
isChecked={displayRadioButton}
24+
onChange={(_event, checked) => toggleHide(checked)}
25+
id="single-select-toggle-hide-radio-button"
26+
name="toggle-hide"
27+
/>
28+
<Gallery hasGutter style={{ marginTop: '15px' }}>
29+
<Card id="single-selectable-card-example-1" isSelectable isSelected={isChecked === id1}>
30+
<CardHeader
31+
selectableActions={{
32+
selectableActionId: id1,
33+
selectableActionAriaLabelledby: 'single-selectable-card-example-1',
34+
name: 'single-selectable-card-example',
35+
variant: 'single',
36+
onChange,
37+
hasNoOffset: true,
38+
isHidden: displayRadioButton
39+
}}
40+
>
41+
<CardTitle>First card</CardTitle>
42+
</CardHeader>
43+
<CardBody>This card is single selectable.</CardBody>
44+
</Card>
45+
<Card id="single-selectable-card-example-2" isSelectable isSelected={isChecked === id2}>
46+
<CardHeader
47+
selectableActions={{
48+
selectableActionId: id2,
49+
selectableActionAriaLabelledby: 'single-selectable-card-example-2',
50+
name: 'single-selectable-card-example',
51+
variant: 'single',
52+
onChange,
53+
hasNoOffset: true,
54+
isHidden: displayRadioButton
55+
}}
56+
>
57+
<CardTitle>Second card</CardTitle>
58+
</CardHeader>
59+
<CardBody>This card is single selectable.</CardBody>
60+
</Card>
61+
<Card id="single-selectable-card-example-3" isSelectable isDisabled isSelected={isChecked === id3}>
62+
<CardHeader
63+
selectableActions={{
64+
selectableActionId: id3,
65+
selectableActionAriaLabelledby: 'single-selectable-card-example-3',
66+
name: 'single-selectable-card-example',
67+
variant: 'single',
68+
onChange,
69+
hasNoOffset: true,
70+
isHidden: displayRadioButton
71+
}}
72+
>
73+
<CardTitle>Third card</CardTitle>
74+
</CardHeader>
75+
<CardBody>This card is single selectable but disabled.</CardBody>
76+
</Card>
77+
</Gallery>
78+
</>
6279
);
6380
};

0 commit comments

Comments
 (0)