Skip to content

Commit d550980

Browse files
erkanercanerkanercan
authored
fix: forward given role to chip component (#8383)
* fix: forward given role to chip component #8353 * fix: spread props to all chips #8383 (comment) * fix: class overrides * refactor: props spread at the end * fix: props spreaded in a different way
1 parent e76f4e8 commit d550980

File tree

6 files changed

+76
-2
lines changed

6 files changed

+76
-2
lines changed

‎packages/react-core/src/components/Chip/Chip.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
8383
});
8484

8585
renderOverflowChip = () => {
86-
const { children, className, onClick, ouiaId } = this.props;
86+
const { children, className, onClick, ouiaId, ...props } = this.props;
8787
const Component = this.props.component as any;
8888
return (
8989
<Component
@@ -95,14 +95,15 @@ export class Chip extends React.Component<ChipProps, ChipState> {
9595
className={css(styles.chip, styles.modifiers.overflow, className)}
9696
{...(this.props.component === 'button' ? { type: 'button' } : {})}
9797
{...getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
98+
{...props}
9899
>
99100
<span className={css(styles.chipText)}>{children}</span>
100101
</Component>
101102
);
102103
};
103104

104105
renderInnerChip(id: string) {
105-
const { children, className, onClick, closeBtnAriaLabel, isReadOnly, component, ouiaId } = this.props;
106+
const { children, className, onClick, closeBtnAriaLabel, isReadOnly, component, ouiaId, ...props } = this.props;
106107
const Component = component as any;
107108
return (
108109
<Component
@@ -112,6 +113,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
112113
className={css(styles.chip, className)}
113114
{...(this.state.isTooltipVisible && { tabIndex: 0 })}
114115
{...getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
116+
{...props}
115117
>
116118
<span ref={this.span} className={css(styles.chipText)} id={id}>
117119
{children}

‎packages/react-core/src/components/Chip/__tests__/Chip.test.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,4 +47,13 @@ describe('Chip', () => {
4747
);
4848
expect(asFragment()).toMatchSnapshot();
4949
});
50+
51+
test("with role='gridcell'", () => {
52+
const { asFragment } = render(
53+
<Chip className="my-chp-cls" role="gridcell">
54+
I'm a roled chip
55+
</Chip>
56+
);
57+
expect(asFragment()).toMatchSnapshot();
58+
});
5059
});

‎packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ exports[`Chip closable 1`] = `
77
data-ouia-component-id="OUIA-Generated-Chip-2"
88
data-ouia-component-type="PF4/Chip"
99
data-ouia-safe="true"
10+
id="chip_one"
11+
tooltipposition="top"
1012
>
1113
<span
1214
class="pf-c-chip__text"
@@ -50,6 +52,8 @@ exports[`Chip closable with tooltip 1`] = `
5052
data-ouia-component-id="OUIA-Generated-Chip-3"
5153
data-ouia-component-type="PF4/Chip"
5254
data-ouia-safe="true"
55+
id="chip_one"
56+
tooltipposition="top"
5357
>
5458
<span
5559
class="pf-c-chip__text"
@@ -94,6 +98,8 @@ exports[`Chip custom max-width text 1`] = `
9498
data-ouia-component-type="PF4/Chip"
9599
data-ouia-safe="true"
96100
style="--pf-c-chip__text--MaxWidth: 100px;"
101+
textmaxwidth="100px"
102+
tooltipposition="top"
97103
>
98104
<span
99105
class="pf-c-chip__text"
@@ -134,9 +140,12 @@ exports[`Chip overflow 1`] = `
134140
<DocumentFragment>
135141
<div
136142
class="pf-c-chip pf-m-overflow my-chp-cls"
143+
closebtnarialabel="close"
144+
component="div"
137145
data-ouia-component-id="OUIA-Generated-Chip-1"
138146
data-ouia-component-type="PF4/OverflowChip"
139147
data-ouia-safe="true"
148+
tooltipposition="top"
140149
>
141150
<span
142151
class="pf-c-chip__text"
@@ -154,6 +163,7 @@ exports[`Chip readonly 1`] = `
154163
data-ouia-component-id="OUIA-Generated-Chip-4"
155164
data-ouia-component-type="PF4/Chip"
156165
data-ouia-safe="true"
166+
tooltipposition="top"
157167
>
158168
<span
159169
class="pf-c-chip__text"
@@ -164,3 +174,48 @@ exports[`Chip readonly 1`] = `
164174
</div>
165175
</DocumentFragment>
166176
`;
177+
178+
exports[`Chip with role='gridcell' 1`] = `
179+
<DocumentFragment>
180+
<div
181+
class="pf-c-chip my-chp-cls"
182+
data-ouia-component-id="OUIA-Generated-Chip-6"
183+
data-ouia-component-type="PF4/Chip"
184+
data-ouia-safe="true"
185+
role="gridcell"
186+
tooltipposition="top"
187+
>
188+
<span
189+
class="pf-c-chip__text"
190+
id="pf-random-id-5"
191+
>
192+
I'm a roled chip
193+
</span>
194+
<button
195+
aria-disabled="false"
196+
aria-label="close"
197+
aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
198+
class="pf-c-button pf-m-plain"
199+
data-ouia-component-id="close"
200+
data-ouia-component-type="PF4/Button"
201+
data-ouia-safe="true"
202+
id="remove_pf-random-id-5"
203+
type="button"
204+
>
205+
<svg
206+
aria-hidden="true"
207+
fill="currentColor"
208+
height="1em"
209+
role="img"
210+
style="vertical-align: -0.125em;"
211+
viewBox="0 0 352 512"
212+
width="1em"
213+
>
214+
<path
215+
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
216+
/>
217+
</svg>
218+
</button>
219+
</div>
220+
</DocumentFragment>
221+
`;

‎packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ exports[`ChipGroup chip group default 1`] = `
2525
data-ouia-component-id="OUIA-Generated-Chip-1"
2626
data-ouia-component-type="PF4/Chip"
2727
data-ouia-safe="true"
28+
tooltipposition="top"
2829
>
2930
<span
3031
class="pf-c-chip__text"
@@ -96,6 +97,7 @@ exports[`ChipGroup chip group with category 1`] = `
9697
data-ouia-component-id="OUIA-Generated-Chip-2"
9798
data-ouia-component-type="PF4/Chip"
9899
data-ouia-safe="true"
100+
tooltipposition="top"
99101
>
100102
<span
101103
class="pf-c-chip__text"
@@ -167,6 +169,7 @@ exports[`ChipGroup chip group with category and tooltip 1`] = `
167169
data-ouia-component-id="OUIA-Generated-Chip-9"
168170
data-ouia-component-type="PF4/Chip"
169171
data-ouia-safe="true"
172+
tooltipposition="top"
170173
>
171174
<span
172175
class="pf-c-chip__text"
@@ -238,6 +241,7 @@ exports[`ChipGroup chip group with closable category 1`] = `
238241
data-ouia-component-id="OUIA-Generated-Chip-3"
239242
data-ouia-component-type="PF4/Chip"
240243
data-ouia-safe="true"
244+
tooltipposition="top"
241245
>
242246
<span
243247
class="pf-c-chip__text"

‎packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1859,6 +1859,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
18591859
data-ouia-component-id="OUIA-Generated-Chip-1"
18601860
data-ouia-component-type="PF4/Chip"
18611861
data-ouia-safe="true"
1862+
tooltipposition="top"
18621863
>
18631864
<span
18641865
class="pf-c-chip__text"
@@ -1901,6 +1902,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
19011902
data-ouia-component-id="OUIA-Generated-Chip-2"
19021903
data-ouia-component-type="PF4/Chip"
19031904
data-ouia-safe="true"
1905+
tooltipposition="top"
19041906
>
19051907
<span
19061908
class="pf-c-chip__text"

‎packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
297297
data-ouia-component-id="OUIA-Generated-Chip-1"
298298
data-ouia-component-type="PF4/Chip"
299299
data-ouia-safe="true"
300+
tooltipposition="top"
300301
>
301302
<span
302303
class="pf-c-chip__text"
@@ -339,6 +340,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
339340
data-ouia-component-id="OUIA-Generated-Chip-2"
340341
data-ouia-component-type="PF4/Chip"
341342
data-ouia-safe="true"
343+
tooltipposition="top"
342344
>
343345
<span
344346
class="pf-c-chip__text"

0 commit comments

Comments
 (0)