Skip to content

Commit 1bf94b6

Browse files
fhlavacfhlavac
committed
feat: add v6 compatibility changes
1 parent 8de74b4 commit 1bf94b6

File tree

8 files changed

+1764
-842
lines changed

8 files changed

+1764
-842
lines changed

‎package-lock.json‎

Lines changed: 1501 additions & 631 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ import {
88
MenuProps,
99
MenuToggle,
1010
Popper,
11-
ToolbarChip,
11+
ToolbarLabel,
1212
ToolbarFilter,
1313
} from '@patternfly/react-core';
1414
import { FilterIcon } from '@patternfly/react-icons';
1515
import { DataViewFilterOption } from '../DataViewFilters';
1616

17-
const isToolbarChip = (chip: string | ToolbarChip): chip is ToolbarChip =>
17+
const isToolbarChip = (chip: string | ToolbarLabel): chip is ToolbarLabel =>
1818
typeof chip === 'object' && 'key' in chip;
1919

2020
export const isDataViewFilterOption = (obj: unknown): obj is DataViewFilterOption =>
@@ -113,11 +113,11 @@ export const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps> = ({
113113
<ToolbarFilter
114114
key={ouiaId}
115115
data-ouia-component-id={ouiaId}
116-
chips={value.map(item => {
116+
labels={value.map(item => {
117117
const activeOption = normalizeOptions.find(option => option.value === item);
118118
return ({ key: activeOption?.value as string, node: activeOption?.label })
119119
})}
120-
deleteChip={(_, chip) =>
120+
deleteLabel={(_, chip) =>
121121
onChange?.(undefined, value.filter(item => item !== (isToolbarChip(chip) ? chip.key : chip)))
122122
}
123123
categoryName={title}

‎packages/module/src/DataViewCheckboxFilter/__snapshots__/DataViewCheckboxFilter.test.tsx.snap‎

Lines changed: 69 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,40 @@
33
exports[`DataViewCheckboxFilter component should render correctly 1`] = `
44
<div>
55
<div
6-
class="pf-v5-c-toolbar"
6+
class="pf-v6-c-toolbar"
77
data-ouia-component-id="DataViewToolbar"
8-
data-ouia-component-type="PF5/Toolbar"
8+
data-ouia-component-type="PF6/Toolbar"
99
data-ouia-safe="true"
1010
id="pf-random-id-0"
1111
>
1212
<div
13-
class="pf-v5-c-toolbar__content"
13+
class="pf-v6-c-toolbar__content"
1414
>
1515
<div
16-
class="pf-v5-c-toolbar__content-section"
16+
class="pf-v6-c-toolbar__content-section"
1717
>
1818
<div
19-
class="pf-v5-c-toolbar__item pf-m-search-filter"
19+
class="pf-v6-c-toolbar__item"
2020
>
2121
<div
22-
class="pf-v5-c-toolbar__item"
22+
class="pf-v6-c-toolbar__item"
2323
data-ouia-component-id="DataViewCheckboxFilter"
2424
>
2525
<button
2626
aria-expanded="false"
27-
class="pf-v5-c-menu-toggle"
27+
class="pf-v6-c-menu-toggle"
2828
data-ouia-component-id="DataViewCheckboxFilter-toggle"
29-
data-ouia-component-type="PF5/MenuToggle"
29+
data-ouia-component-type="PF6/MenuToggle"
3030
data-ouia-safe="true"
3131
style="width: 200px;"
3232
type="button"
3333
>
3434
<span
35-
class="pf-v5-c-menu-toggle__icon"
35+
class="pf-v6-c-menu-toggle__icon"
3636
>
3737
<svg
3838
aria-hidden="true"
39-
class="pf-v5-svg"
39+
class="pf-v6-svg"
4040
fill="currentColor"
4141
height="1em"
4242
role="img"
@@ -49,29 +49,29 @@ exports[`DataViewCheckboxFilter component should render correctly 1`] = `
4949
</svg>
5050
</span>
5151
<span
52-
class="pf-v5-c-menu-toggle__text"
52+
class="pf-v6-c-menu-toggle__text"
5353
>
5454
Test Checkbox Filter
5555
</span>
5656
<span
57-
class="pf-v5-c-menu-toggle__count"
57+
class="pf-v6-c-menu-toggle__count"
5858
>
5959
<span
60-
class="pf-v5-c-badge pf-m-read"
60+
class="pf-v6-c-badge pf-m-read"
6161
data-ouia-component-id="DataViewCheckboxFilter-badge"
6262
>
6363
1
6464
</span>
6565
</span>
6666
<span
67-
class="pf-v5-c-menu-toggle__controls"
67+
class="pf-v6-c-menu-toggle__controls"
6868
>
6969
<span
70-
class="pf-v5-c-menu-toggle__toggle-icon"
70+
class="pf-v6-c-menu-toggle__toggle-icon"
7171
>
7272
<svg
7373
aria-hidden="true"
74-
class="pf-v5-svg"
74+
class="pf-v6-svg"
7575
fill="currentColor"
7676
height="1em"
7777
role="img"
@@ -90,103 +90,106 @@ exports[`DataViewCheckboxFilter component should render correctly 1`] = `
9090
</div>
9191
</div>
9292
<div
93-
class="pf-v5-c-toolbar__content pf-m-chip-container"
93+
class="pf-v6-c-toolbar__content"
9494
>
9595
<div
96-
class="pf-v5-c-toolbar__group"
96+
class="pf-v6-c-toolbar__group"
9797
>
9898
<div
99-
class="pf-v5-c-toolbar__item pf-m-chip-group"
99+
class="pf-v6-c-toolbar__item pf-m-label-group pf-m-label-group"
100100
>
101101
<div
102-
aria-labelledby="pf-random-id-1"
103-
class="pf-v5-c-chip-group pf-m-category"
104-
data-ouia-component-type="PF5/ChipGroup"
105-
data-ouia-safe="true"
106-
role="group"
102+
class="pf-v6-c-label-group pf-m-category"
107103
>
108104
<div
109-
class="pf-v5-c-chip-group__main"
105+
class="pf-v6-c-label-group__main"
110106
>
111107
<span
112-
class="pf-v5-c-chip-group__label"
108+
aria-hidden="true"
109+
class="pf-v6-c-label-group__label"
113110
id="pf-random-id-1"
114111
>
115112
Test Checkbox Filter
116113
</span>
117114
<ul
118115
aria-labelledby="pf-random-id-1"
119-
class="pf-v5-c-chip-group__list"
116+
class="pf-v6-c-label-group__list"
120117
role="list"
121118
>
122119
<li
123-
class="pf-v5-c-chip-group__list-item"
120+
class="pf-v6-c-label-group__list-item"
124121
>
125-
<div
126-
class="pf-v5-c-chip"
127-
data-ouia-component-id="OUIA-Generated-Chip-1"
128-
data-ouia-component-type="PF5/Chip"
129-
data-ouia-safe="true"
122+
<span
123+
class="pf-v6-c-label pf-m-filled"
130124
>
131125
<span
132-
class="pf-v5-c-chip__content"
126+
class="pf-v6-c-label__content"
133127
>
134128
<span
135-
class="pf-v5-c-chip__text"
136-
id="pf-random-id-2"
129+
class="pf-v6-c-label__text"
137130
>
138131
Workspace one
139132
</span>
140133
</span>
141134
<span
142-
class="pf-v5-c-chip__actions"
135+
class="pf-v6-c-label__actions"
143136
>
144137
<button
145138
aria-disabled="false"
146-
aria-label="close"
147-
aria-labelledby="remove_pf-random-id-2 pf-random-id-2"
148-
class="pf-v5-c-button pf-m-plain"
149-
data-ouia-component-id="close"
150-
data-ouia-component-type="PF5/Button"
139+
aria-label="Close Workspace one"
140+
class="pf-v6-c-button pf-m-plain pf-m-no-padding"
141+
data-ouia-component-id="OUIA-Generated-Button-plain-1"
142+
data-ouia-component-type="PF6/Button"
151143
data-ouia-safe="true"
152-
id="remove_pf-random-id-2"
153144
type="button"
154145
>
155-
<svg
156-
aria-hidden="true"
157-
class="pf-v5-svg"
158-
fill="currentColor"
159-
height="1em"
160-
role="img"
161-
viewBox="0 0 352 512"
162-
width="1em"
146+
<span
147+
class="pf-v6-c-button__icon"
163148
>
164-
<path
165-
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"
166-
/>
167-
</svg>
149+
<svg
150+
aria-hidden="true"
151+
class="pf-v6-svg"
152+
fill="currentColor"
153+
height="1em"
154+
role="img"
155+
viewBox="0 0 352 512"
156+
width="1em"
157+
>
158+
<path
159+
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"
160+
/>
161+
</svg>
162+
</span>
168163
</button>
169164
</span>
170-
</div>
165+
</span>
171166
</li>
172167
</ul>
173168
</div>
174169
</div>
175170
</div>
176171
</div>
177172
<div
178-
class="pf-v5-c-toolbar__item"
173+
class="pf-v6-c-toolbar__group pf-m-action-group-inline"
179174
>
180-
<button
181-
aria-disabled="false"
182-
class="pf-v5-c-button pf-m-link pf-m-inline"
183-
data-ouia-component-id="DataViewToolbar-clear-all-filters"
184-
data-ouia-component-type="PF5/Button"
185-
data-ouia-safe="true"
186-
type="button"
175+
<div
176+
class="pf-v6-c-toolbar__item"
187177
>
188-
Clear filters
189-
</button>
178+
<button
179+
aria-disabled="false"
180+
class="pf-v6-c-button pf-m-link pf-m-inline"
181+
data-ouia-component-id="DataViewToolbar-clear-all-filters"
182+
data-ouia-component-type="PF6/Button"
183+
data-ouia-safe="true"
184+
type="button"
185+
>
186+
<span
187+
class="pf-v6-c-button__text"
188+
>
189+
Clear filters
190+
</span>
191+
</button>
192+
</div>
190193
</div>
191194
</div>
192195
</div>

0 commit comments

Comments
 (0)