Skip to content

Commit

Permalink
fix: make the changes work with v6
Browse files Browse the repository at this point in the history
  • Loading branch information
@fhlavac
fhlavac committed Nov 22, 2024
1 parent 8de74b4 commit 317462f
Show file tree
Hide file tree
Showing 9 changed files with 1,622 additions and 702 deletions.
1,848 changes: 1,358 additions & 490 deletions package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
"eslint-config-standard-with-typescript": "^23.0.0",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-markdown": "^1.0.2",
"eslint-plugin-n": "^17.13.1",
"eslint-plugin-n": "^15.7.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-promise": "^6.2.0",
"eslint-plugin-react": "^7.34.3",
Expand Down
8 changes: 4 additions & 4 deletions packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ import {
MenuProps,
MenuToggle,
Popper,
ToolbarChip,
ToolbarLabel,
ToolbarFilter,
} from '@patternfly/react-core';
import { FilterIcon } from '@patternfly/react-icons';
import { DataViewFilterOption } from '../DataViewFilters';

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

export const isDataViewFilterOption = (obj: unknown): obj is DataViewFilterOption =>
Expand Down Expand Up @@ -113,11 +113,11 @@ export const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps> = ({
<ToolbarFilter
key={ouiaId}
data-ouia-component-id={ouiaId}
chips={value.map(item => {
labels={value.map(item => {
const activeOption = normalizeOptions.find(option => option.value === item);
return ({ key: activeOption?.value as string, node: activeOption?.label })
})}
deleteChip={(_, chip) =>
deleteLabel={(_, chip) =>
onChange?.(undefined, value.filter(item => item !== (isToolbarChip(chip) ? chip.key : chip)))
}
categoryName={title}
Expand Down
135 changes: 69 additions & 66 deletions ...ages/module/src/DataViewCheckboxFilter/__snapshots__/DataViewCheckboxFilter.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,40 @@
exports[`DataViewCheckboxFilter component should render correctly 1`] = `
<div>
<div
class="pf-v5-c-toolbar"
class="pf-v6-c-toolbar"
data-ouia-component-id="DataViewToolbar"
data-ouia-component-type="PF5/Toolbar"
data-ouia-component-type="PF6/Toolbar"
data-ouia-safe="true"
id="pf-random-id-0"
>
<div
class="pf-v5-c-toolbar__content"
class="pf-v6-c-toolbar__content"
>
<div
class="pf-v5-c-toolbar__content-section"
class="pf-v6-c-toolbar__content-section"
>
<div
class="pf-v5-c-toolbar__item pf-m-search-filter"
class="pf-v6-c-toolbar__item"
>
<div
class="pf-v5-c-toolbar__item"
class="pf-v6-c-toolbar__item"
data-ouia-component-id="DataViewCheckboxFilter"
>
<button
aria-expanded="false"
class="pf-v5-c-menu-toggle"
class="pf-v6-c-menu-toggle"
data-ouia-component-id="DataViewCheckboxFilter-toggle"
data-ouia-component-type="PF5/MenuToggle"
data-ouia-component-type="PF6/MenuToggle"
data-ouia-safe="true"
style="width: 200px;"
type="button"
>
<span
class="pf-v5-c-menu-toggle__icon"
class="pf-v6-c-menu-toggle__icon"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
class="pf-v6-svg"
fill="currentColor"
height="1em"
role="img"
Expand All @@ -49,29 +49,29 @@ exports[`DataViewCheckboxFilter component should render correctly 1`] = `
</svg>
</span>
<span
class="pf-v5-c-menu-toggle__text"
class="pf-v6-c-menu-toggle__text"
>
Test Checkbox Filter
</span>
<span
class="pf-v5-c-menu-toggle__count"
class="pf-v6-c-menu-toggle__count"
>
<span
class="pf-v5-c-badge pf-m-read"
class="pf-v6-c-badge pf-m-read"
data-ouia-component-id="DataViewCheckboxFilter-badge"
>
1
</span>
</span>
<span
class="pf-v5-c-menu-toggle__controls"
class="pf-v6-c-menu-toggle__controls"
>
<span
class="pf-v5-c-menu-toggle__toggle-icon"
class="pf-v6-c-menu-toggle__toggle-icon"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
class="pf-v6-svg"
fill="currentColor"
height="1em"
role="img"
Expand All @@ -90,103 +90,106 @@ exports[`DataViewCheckboxFilter component should render correctly 1`] = `
</div>
</div>
<div
class="pf-v5-c-toolbar__content pf-m-chip-container"
class="pf-v6-c-toolbar__content"
>
<div
class="pf-v5-c-toolbar__group"
class="pf-v6-c-toolbar__group"
>
<div
class="pf-v5-c-toolbar__item pf-m-chip-group"
class="pf-v6-c-toolbar__item pf-m-label-group pf-m-label-group"
>
<div
aria-labelledby="pf-random-id-1"
class="pf-v5-c-chip-group pf-m-category"
data-ouia-component-type="PF5/ChipGroup"
data-ouia-safe="true"
role="group"
class="pf-v6-c-label-group pf-m-category"
>
<div
class="pf-v5-c-chip-group__main"
class="pf-v6-c-label-group__main"
>
<span
class="pf-v5-c-chip-group__label"
aria-hidden="true"
class="pf-v6-c-label-group__label"
id="pf-random-id-1"
>
Test Checkbox Filter
</span>
<ul
aria-labelledby="pf-random-id-1"
class="pf-v5-c-chip-group__list"
class="pf-v6-c-label-group__list"
role="list"
>
<li
class="pf-v5-c-chip-group__list-item"
class="pf-v6-c-label-group__list-item"
>
<div
class="pf-v5-c-chip"
data-ouia-component-id="OUIA-Generated-Chip-1"
data-ouia-component-type="PF5/Chip"
data-ouia-safe="true"
<span
class="pf-v6-c-label pf-m-filled"
>
<span
class="pf-v5-c-chip__content"
class="pf-v6-c-label__content"
>
<span
class="pf-v5-c-chip__text"
id="pf-random-id-2"
class="pf-v6-c-label__text"
>
Workspace one
</span>
</span>
<span
class="pf-v5-c-chip__actions"
class="pf-v6-c-label__actions"
>
<button
aria-disabled="false"
aria-label="close"
aria-labelledby="remove_pf-random-id-2 pf-random-id-2"
class="pf-v5-c-button pf-m-plain"
data-ouia-component-id="close"
data-ouia-component-type="PF5/Button"
aria-label="Close Workspace one"
class="pf-v6-c-button pf-m-plain pf-m-no-padding"
data-ouia-component-id="OUIA-Generated-Button-plain-1"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
id="remove_pf-random-id-2"
type="button"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 352 512"
width="1em"
<span
class="pf-v6-c-button__icon"
>
<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>
<svg
aria-hidden="true"
class="pf-v6-svg"
fill="currentColor"
height="1em"
role="img"
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>
</span>
</button>
</span>
</div>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class="pf-v5-c-toolbar__item"
class="pf-v6-c-toolbar__group pf-m-action-group-inline"
>
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-link pf-m-inline"
data-ouia-component-id="DataViewToolbar-clear-all-filters"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
type="button"
<div
class="pf-v6-c-toolbar__item"
>
Clear filters
</button>
<button
aria-disabled="false"
class="pf-v6-c-button pf-m-link pf-m-inline"
data-ouia-component-id="DataViewToolbar-clear-all-filters"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
>
<span
class="pf-v6-c-button__text"
>
Clear filters
</span>
</button>
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 317462f

Please sign in to comment.