particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wizard: Deprecate Chip and ChipGroup components

Browse source 
`Chip` and `ChipGroup` components will be deprecated in PF6. This replaces them with recommended `Label` and `LabelGroup`.
This commit is contained in:
regexowl 2025-03-03 16:48:49 +01:00 • committed by Klara Simickova
parent 9dc66ec1d0
commit 223a6a6780
5 changed files with 30 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/Components/CreateImageWizard/ChippingInput.tsx
View file

@ -2,10 +2,10 @@ import React, { useState } from 'react';
import {
Button,
Chip,
ChipGroup,
HelperText,
HelperTextItem,
Label,
LabelGroup,
TextInputGroup,
TextInputGroupMain,
TextInputGroupUtilities,
@ -126,25 +126,29 @@ const ChippingInput = ({
</HelperText>
)}
{requiredList && requiredList.length > 0 && (
<ChipGroup
<LabelGroup
categoryName="Required by OpenSCAP"
numChips={20}
numLabels={20}
className="pf-v5-u-mt-sm pf-v5-u-w-100"
>
{requiredList.map((item) => (
<Chip key={item} isReadOnly>
<Label key={item} isCompact>
{item}
</Chip>
</Label>
))}
</ChipGroup>
</LabelGroup>
)}
<ChipGroup numChips={20} className="pf-v5-u-mt-sm pf-v5-u-w-100">
<LabelGroup numLabels={20} className="pf-v5-u-mt-sm pf-v5-u-w-100">
{list?.map((item) => (
<Chip key={item} onClick={(e) => handleRemoveItem(e, item)}>
<Label
key={item}
isCompact
onClose={(e) => handleRemoveItem(e, item)}
>
{item}
</Chip>
</Label>
))}
</ChipGroup>
</LabelGroup>
</>
);
};

12
src/Components/CreateImageWizard/steps/Locale/components/LanguagesDropDown.tsx
View file

@ -2,11 +2,11 @@ import React, { useEffect, useState } from 'react';
import {
Button,
Chip,
ChipGroup,
FormGroup,
HelperText,
HelperTextItem,
Label,
LabelGroup,
MenuToggle,
MenuToggleElement,
Select,
@ -174,13 +174,13 @@ const LanguagesDropDown = () => {
)}`}</HelperTextItem>
</HelperText>
)}
<ChipGroup numChips={5} className="pf-v5-u-mt-sm pf-v5-u-w-100">
<LabelGroup numLabels={5} className="pf-v5-u-mt-sm pf-v5-u-w-100">
{languages?.map((lang) => (
<Chip key={lang} onClick={(e) => handleRemoveLang(e, lang)}>
<Label key={lang} onClose={(e) => handleRemoveLang(e, lang)}>
{lang}
</Chip>
</Label>
))}
</ChipGroup>
</LabelGroup>
</FormGroup>
);
};