Skip to content

fix: forward given role to chip component #8383

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tlabaj merged 5 commits into from
Jan 19, 2023
Merged

fix: forward given role to chip component #8383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
538c2d6
fix: forward given role to chip component
erkanercan Nov 22, 2022
628237a
fix: spread props to all chips
erkanercan Dec 14, 2022
98e2bc6
fix: class overrides
erkanercan Dec 14, 2022
7c77791
refactor: props spread at the end
erkanercan Jan 7, 2023
337e245
fix: props spreaded in a different way
erkanercan Jan 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions packages/react-core/src/components/Chip/Chip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
});

renderOverflowChip = () => {
const { children, className, onClick, ouiaId } = this.props;
const { children, className, onClick, ouiaId, ...props } = this.props;
const Component = this.props.component as any;
return (
<Component
Expand All @@ -95,14 +95,15 @@ export class Chip extends React.Component<ChipProps, ChipState> {
className={css(styles.chip, styles.modifiers.overflow, className)}
{...(this.props.component === 'button' ? { type: 'button' } : {})}
{...getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
{...props}
>
<span className={css(styles.chipText)}>{children}</span>
</Component>
);
};

renderInnerChip(id: string) {
const { children, className, onClick, closeBtnAriaLabel, isReadOnly, component, ouiaId } = this.props;
const { children, className, onClick, closeBtnAriaLabel, isReadOnly, component, ouiaId, ...props } = this.props;
const Component = component as any;
return (
<Component
Expand All @@ -112,6 +113,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
className={css(styles.chip, className)}
{...(this.state.isTooltipVisible && { tabIndex: 0 })}
{...getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
{...props}
>
<span ref={this.span} className={css(styles.chipText)} id={id}>
{children}
Expand Down
9 changes: 9 additions & 0 deletions packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,13 @@ describe('Chip', () => {
);
expect(asFragment()).toMatchSnapshot();
});

test("with role='gridcell'", () => {
const { asFragment } = render(
<Chip className="my-chp-cls" role="gridcell">
I'm a roled chip
</Chip>
);
expect(asFragment()).toMatchSnapshot();
});
});
55 changes: 55 additions & 0 deletions packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ exports[`Chip closable 1`] = `
data-ouia-component-id="OUIA-Generated-Chip-2"
data-ouia-component-type="PF4/Chip"
data-ouia-safe="true"
id="chip_one"
tooltipposition="top"
>
<span
class="pf-c-chip__text"
Expand Down Expand Up @@ -50,6 +52,8 @@ exports[`Chip closable with tooltip 1`] = `
data-ouia-component-id="OUIA-Generated-Chip-3"
data-ouia-component-type="PF4/Chip"
data-ouia-safe="true"
id="chip_one"
tooltipposition="top"
>
<span
class="pf-c-chip__text"
Expand Down Expand Up @@ -94,6 +98,8 @@ exports[`Chip custom max-width text 1`] = `
data-ouia-component-type="PF4/Chip"
data-ouia-safe="true"
style="--pf-c-chip__text--MaxWidth: 100px;"
textmaxwidth="100px"
tooltipposition="top"
>
<span
class="pf-c-chip__text"
Expand Down Expand Up @@ -134,9 +140,12 @@ exports[`Chip overflow 1`] = `
<DocumentFragment>
<div
class="pf-c-chip pf-m-overflow my-chp-cls"
closebtnarialabel="close"
component="div"
data-ouia-component-id="OUIA-Generated-Chip-1"
data-ouia-component-type="PF4/OverflowChip"
data-ouia-safe="true"
tooltipposition="top"
>
<span
class="pf-c-chip__text"
Expand All @@ -154,6 +163,7 @@ exports[`Chip readonly 1`] = `
data-ouia-component-id="OUIA-Generated-Chip-4"
data-ouia-component-type="PF4/Chip"
data-ouia-safe="true"
tooltipposition="top"
>
<span
class="pf-c-chip__text"
Expand All @@ -164,3 +174,48 @@ exports[`Chip readonly 1`] = `
</div>
</DocumentFragment>
`;

exports[`Chip with role='gridcell' 1`] = `
<DocumentFragment>
<div
class="pf-c-chip my-chp-cls"
data-ouia-component-id="OUIA-Generated-Chip-6"
data-ouia-component-type="PF4/Chip"
data-ouia-safe="true"
role="gridcell"
tooltipposition="top"
>
<span
class="pf-c-chip__text"
id="pf-random-id-5"
>
I'm a roled chip
</span>
<button
aria-disabled="false"
aria-label="close"
aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
class="pf-c-button pf-m-plain"
data-ouia-component-id="close"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
id="remove_pf-random-id-5"
type="button"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 352 512"
width="1em"
>
<path
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"
/>
</svg>
</button>
</div>
</DocumentFragment>
`;
4 changes: 4 additions & 0 deletions packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ exports[`ChipGroup chip group default 1`] = `
data-ouia-component-id="OUIA-Generated-Chip-1"
data-ouia-component-type="PF4/Chip"
data-ouia-safe="true"
tooltipposition="top"
>
<span
class="pf-c-chip__text"
Expand Down Expand Up @@ -96,6 +97,7 @@ exports[`ChipGroup chip group with category 1`] = `
data-ouia-component-id="OUIA-Generated-Chip-2"
data-ouia-component-type="PF4/Chip"
data-ouia-safe="true"
tooltipposition="top"
>
<span
class="pf-c-chip__text"
Expand Down Expand Up @@ -167,6 +169,7 @@ exports[`ChipGroup chip group with category and tooltip 1`] = `
data-ouia-component-id="OUIA-Generated-Chip-9"
data-ouia-component-type="PF4/Chip"
data-ouia-safe="true"
tooltipposition="top"
>
<span
class="pf-c-chip__text"
Expand Down Expand Up @@ -238,6 +241,7 @@ exports[`ChipGroup chip group with closable category 1`] = `
data-ouia-component-id="OUIA-Generated-Chip-3"
data-ouia-component-type="PF4/Chip"
data-ouia-safe="true"
tooltipposition="top"
>
<span
class="pf-c-chip__text"
Expand Down
2 changes: 2 additions & 0 deletions packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1859,6 +1859,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
data-ouia-component-id="OUIA-Generated-Chip-1"
data-ouia-component-type="PF4/Chip"
data-ouia-safe="true"
tooltipposition="top"
>
<span
class="pf-c-chip__text"
Expand Down Expand Up @@ -1901,6 +1902,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
data-ouia-component-id="OUIA-Generated-Chip-2"
data-ouia-component-type="PF4/Chip"
data-ouia-safe="true"
tooltipposition="top"
>
<span
class="pf-c-chip__text"
Expand Down
2 changes: 2 additions & 0 deletions packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
data-ouia-component-id="OUIA-Generated-Chip-1"
data-ouia-component-type="PF4/Chip"
data-ouia-safe="true"
tooltipposition="top"
>
<span
class="pf-c-chip__text"
Expand Down Expand Up @@ -339,6 +340,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
data-ouia-component-id="OUIA-Generated-Chip-2"
data-ouia-component-type="PF4/Chip"
data-ouia-safe="true"
tooltipposition="top"
>
<span
class="pf-c-chip__text"
Expand Down