Skip to content

Commit 18da1e5

Browse files
nineteen88nineteen88
committed
feat(multi-select): update multi-select to use updated pill
1 parent 14a75e2 commit 18da1e5

10 files changed

Lines changed: 109 additions & 95 deletions

File tree

‎skills/carbon-react/components/multi-select.md‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -922,17 +922,16 @@ description: Carbon MultiSelect component props and usage examples.
922922
value={value}
923923
onChange={onChangeHandler}
924924
>
925-
<Option text="Amber" value="1" borderColor="#FFBF00" fill />
926-
<Option text="Black" value="2" borderColor="blackOpacity65" fill />
927-
<Option text="Blue" value="3" borderColor="productBlue" />
928-
<Option text="Brown" value="4" borderColor="brown" fill />
929-
<Option text="Green" value="5" borderColor="productGreen" />
930-
<Option text="Orange" value="6" borderColor="orange" />
931-
<Option text="Pink" value="7" borderColor="pink" />
932-
<Option text="Purple" value="8" borderColor="purple" />
933-
<Option text="Red" value="9" borderColor="red" fill />
934-
<Option text="White" value="10" borderColor="white" />
935-
<Option text="Yellow" value="11" borderColor="yellow" fill />
925+
<Option text="Grey" value="1" variant="grey" />
926+
<Option text="Green" value="2" variant="green" fill />
927+
<Option text="Red" value="3" variant="red" />
928+
<Option text="Orange" value="4" variant="orange" />
929+
<Option text="Blue" value="5" variant="blue" />
930+
<Option text="Purple" value="6" variant="purple" />
931+
<Option text="Teal" value="7" variant="teal" fill />
932+
<Option text="Lime" value="8" variant="lime" fill />
933+
<Option text="Pink" value="9" variant="pink" />
934+
<Option text="Slate" value="10" variant="slate" fill />
936935
</MultiSelect>
937936
</Box>
938937
);
@@ -1056,17 +1055,16 @@ description: Carbon MultiSelect component props and usage examples.
10561055
value={value}
10571056
onChange={onChangeHandler}
10581057
>
1059-
<Option text="Amber" value="1" borderColor="#FFBF00" fill />
1060-
<Option text="Black" value="2" borderColor="blackOpacity65" fill />
1061-
<Option text="Blue" value="3" borderColor="productBlue" />
1062-
<Option text="Brown" value="4" borderColor="brown" fill />
1063-
<Option text="Green" value="5" borderColor="productGreen" />
1064-
<Option text="Orange" value="6" borderColor="orange" />
1065-
<Option text="Pink" value="7" borderColor="pink" />
1066-
<Option text="Purple" value="8" borderColor="purple" />
1067-
<Option text="Red" value="9" borderColor="red" fill />
1068-
<Option text="White" value="10" borderColor="white" />
1069-
<Option text="Yellow" value="11" borderColor="yellow" fill />
1058+
<Option text="Grey" value="1" variant="grey" />
1059+
<Option text="Green" value="2" variant="green" />
1060+
<Option text="Red" value="3" variant="red" />
1061+
<Option text="Orange" value="4" variant="orange" />
1062+
<Option text="Blue" value="5" variant="blue" />
1063+
<Option text="Purple" value="6" variant="purple" />
1064+
<Option text="Teal" value="7" variant="teal" />
1065+
<Option text="Lime" value="8" variant="lime" />
1066+
<Option text="Pink" value="9" variant="pink" />
1067+
<Option text="Slate" value="10" variant="slate" />
10701068
</MultiSelect>
10711069
</Box>
10721070
);

‎skills/carbon-react/components/option.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ description: Carbon Option component props and usage examples.
2424
| autoCorrect | string \| undefined | No | | | | | |
2525
| autoFocus | boolean \| undefined | No | | | | | |
2626
| autoSave | string \| undefined | No | | | | | |
27-
| borderColor | string \| undefined | No | | | | MultiSelect only - custom Pill border color - provide any color from palette or any valid css color value. | |
2827
| capture | boolean \| "user" \| "environment" \| undefined | No | | | | | |
2928
| checked | boolean \| undefined | No | | | | | |
3029
| children | React.ReactNode | No | | | | Alternative rendered content, displayed within `<SelectList>` of `<Select>` (eg: an icon, an image, etc) | |
@@ -256,6 +255,7 @@ description: Carbon Option component props and usage examples.
256255
| typeof | string \| undefined | No | | | | | |
257256
| unselectable | "off" \| "on" \| undefined | No | | | | | |
258257
| value | string \| Record<string, unknown> \| undefined | No | | | | The option's invisible internal value, if this is not passed the option will not be treated as interactive or selectable | |
258+
| variant | "grey" \| "green" \| "red" \| "orange" \| "blue" \| "purple" \| "teal" \| "lime" \| "pink" \| "slate" \| undefined | No | | | | MultiSelect only - set Pill color variant | |
259259
| vocab | string \| undefined | No | | | | | |
260260
| width | string \| number \| undefined | No | | | | | |
261261
| data-element | string \| undefined | No | | | | Identifier used for testing purposes, applied to the root element of the component. | |
@@ -311,6 +311,7 @@ description: Carbon Option component props and usage examples.
311311
| aria-valuemin | number \| undefined | No | | | | Defines the minimum allowed value for a range widget. | |
312312
| aria-valuenow | number \| undefined | No | | | | Defines the current value for a range widget. | |
313313
| aria-valuetext | string \| undefined | No | | | | Defines the human readable text alternative of aria-valuenow for a range widget. | |
314+
| borderColor | string \| undefined | No | | Yes | Use `variant` prop instead. | MultiSelect only - legacy Pill color override retained for backwards compatibility. | |
314315
| onKeyPress | KeyboardEventHandler<T> \| undefined | No | | Yes | Use `onKeyUp` or `onKeyDown` instead | | |
315316
| onKeyPressCapture | KeyboardEventHandler<T> \| undefined | No | | Yes | Use `onKeyUpCapture` or `onKeyDownCapture` instead | | |
316317
| aria-dropeffect | "copy" \| "link" \| "none" \| "execute" \| "move" \| "popup" \| undefined | No | | Yes | in ARIA 1.1 | Indicates what functions can be performed when a dragged object is released on the drop target. | |

‎src/components/select/multi-select/components.test-pw.tsx‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -65,17 +65,17 @@ export const MultiSelectDefaultValueComponent = (
6565
value={values}
6666
onChange={onChangeHandler}
6767
>
68-
<Option text="Amber" value="1" />
69-
<Option text="Black" value="2" />
70-
<Option text="Blue" value="3" />
71-
<Option text="Brown" value="4" />
72-
<Option text="Green" value="5" />
73-
<Option text="Orange" value="6" />
74-
<Option text="Pink" value="7" />
75-
<Option text="Purple" value="8" />
76-
<Option text="Red" value="9" />
77-
<Option text="White" value="10" />
78-
<Option text="Yellow" value="11" />
68+
<Option text="Amber" value="1" variant="orange" />
69+
<Option text="Black" value="2" variant="grey" />
70+
<Option text="Blue" value="3" variant="blue" />
71+
<Option text="Brown" value="4" variant="grey" />
72+
<Option text="Green" value="5" variant="green" />
73+
<Option text="Orange" value="6" variant="orange" />
74+
<Option text="Pink" value="7" variant="pink" />
75+
<Option text="Purple" value="8" variant="purple" />
76+
<Option text="Red" value="9" variant="red" />
77+
<Option text="White" value="10" variant="grey" />
78+
<Option text="Yellow" value="11" variant="lime" />
7979
</MultiSelect>
8080
);
8181
};
@@ -256,17 +256,16 @@ export const MultiSelectCustomColorComponent = (
256256
onChange={onChangeHandler}
257257
{...props}
258258
>
259-
<Option text="Amber" value="1" borderColor="#FFBF00" fill />
260-
<Option text="Black" value="2" borderColor="blackOpacity65" fill />
261-
<Option text="Blue" value="3" borderColor="productBlue" />
262-
<Option text="Brown" value="4" borderColor="brown" fill />
263-
<Option text="Green" value="5" borderColor="productGreen" />
264-
<Option text="Orange" value="6" borderColor="orange" />
265-
<Option text="Pink" value="7" borderColor="pink" />
266-
<Option text="Purple" value="8" borderColor="purple" />
267-
<Option text="Red" value="9" borderColor="red" fill />
268-
<Option text="White" value="10" borderColor="white" />
269-
<Option text="Yellow" value="11" borderColor="yellow" fill />
259+
<Option text="Grey" value="1" variant="grey" fill />
260+
<Option text="Green" value="2" variant="green" fill />
261+
<Option text="Red" value="3" variant="red" />
262+
<Option text="Orange" value="4" variant="orange" fill />
263+
<Option text="Blue" value="5" variant="blue" />
264+
<Option text="Purple" value="6" variant="purple" fill />
265+
<Option text="Teal" value="7" variant="teal" />
266+
<Option text="Lime" value="8" variant="lime" fill />
267+
<Option text="Pink" value="9" variant="pink" />
268+
<Option text="Slate" value="10" variant="slate" fill />
270269
</MultiSelect>
271270
);
272271
};

‎src/components/select/multi-select/multi-select-interaction.stories.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -237,12 +237,12 @@ export const WithCustomColoredPills: Story = {
237237
label="Color"
238238
value={["1", "2", "3", "4", "5", "6"]}
239239
>
240-
<Option text="Amber" value="1" borderColor="#FFBF00" fill />
241-
<Option text="Black" value="2" borderColor="blackOpacity65" fill />
242-
<Option text="Blue" value="3" borderColor="productBlue" />
243-
<Option text="Brown" value="4" borderColor="brown" fill />
244-
<Option text="Green" value="5" borderColor="productGreen" />
245-
<Option text="Orange" value="6" borderColor="orange" />
240+
<Option text="Grey" value="1" variant="grey" />
241+
<Option text="Green" value="2" variant="green" />
242+
<Option text="Red" value="3" variant="red" />
243+
<Option text="Orange" value="4" variant="orange" />
244+
<Option text="Blue" value="5" variant="blue" />
245+
<Option text="Purple" value="6" variant="purple" />
246246
</ControlledMultiSelectWithOptions>
247247
</Box>
248248
),

‎src/components/select/multi-select/multi-select-test.stories.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -573,17 +573,16 @@ export const MultiSelectCustomColorComponent = (
573573
onChange={onChangeHandler}
574574
{...props}
575575
>
576-
<Option text="Amber" value="1" borderColor="#FFBF00" fill />
577-
<Option text="Black" value="2" borderColor="blackOpacity65" fill />
578-
<Option text="Blue" value="3" borderColor="productBlue" />
579-
<Option text="Brown" value="4" borderColor="brown" fill />
580-
<Option text="Green" value="5" borderColor="productGreen" />
581-
<Option text="Orange" value="6" borderColor="orange" />
582-
<Option text="Pink" value="7" borderColor="pink" />
583-
<Option text="Purple" value="8" borderColor="purple" />
584-
<Option text="Red" value="9" borderColor="red" fill />
585-
<Option text="White" value="10" borderColor="white" />
586-
<Option text="Yellow" value="11" borderColor="yellow" fill />
576+
<Option text="Grey" value="1" variant="grey" />
577+
<Option text="Green" value="2" variant="green" />
578+
<Option text="Red" value="3" variant="red" />
579+
<Option text="Orange" value="4" variant="orange" />
580+
<Option text="Blue" value="5" variant="blue" />
581+
<Option text="Purple" value="6" variant="purple" />
582+
<Option text="Teal" value="7" variant="teal" />
583+
<Option text="Lime" value="8" variant="lime" />
584+
<Option text="Pink" value="9" variant="pink" />
585+
<Option text="Slate" value="10" variant="slate" />
587586
</MultiSelect>
588587
);
589588
};

‎src/components/select/multi-select/multi-select.component.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -360,8 +360,9 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
360360

361361
pillProps = {
362362
title: matchingOption.props.text,
363-
fill: matchingOption.props.fill,
364363
borderColor: matchingOption.props.borderColor,
364+
variant: matchingOption.props.variant,
365+
fill: matchingOption.props.fill,
365366
};
366367
}
367368

‎src/components/select/multi-select/multi-select.pw.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -670,10 +670,13 @@ test.describe("MultiSelect component", () => {
670670

671671
const firstPill = multiSelectPillByPosition(page, 0);
672672
const secondPill = multiSelectPillByPosition(page, 1);
673-
await expect(firstPill).toHaveCSS("border-color", "rgb(255, 191, 0)");
674-
await expect(firstPill).toHaveCSS("background-color", "rgb(255, 191, 0)");
675-
await expect(secondPill).toHaveCSS("border-color", "rgb(0, 119, 200)");
676-
await expect(secondPill).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
673+
await expect(firstPill).toHaveCSS("border-color", "rgb(111, 111, 111)");
674+
await expect(firstPill).toHaveCSS("background-color", "rgb(111, 111, 111)");
675+
await expect(secondPill).toHaveCSS("border-color", "rgb(219, 0, 78)");
676+
await expect(secondPill).toHaveCSS(
677+
"background-color",
678+
"rgb(255, 245, 246)",
679+
);
677680
});
678681

679682
(
@@ -712,7 +715,7 @@ test.describe("MultiSelect component", () => {
712715
"box-shadow",
713716
"rgb(0, 0, 0) 0px 0px 0px 2px, rgb(255, 181, 0) 0px 0px 0px 4px",
714717
);
715-
await expect(closeIcon).toHaveCSS("background-color", "rgb(0, 103, 56)");
718+
await expect(closeIcon).toHaveCSS("background-color", "rgb(238, 238, 238)");
716719
});
717720

718721
test("should delete pill option with delete button", async ({

‎src/components/select/multi-select/multi-select.stories.tsx‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -502,17 +502,16 @@ export const WithCustomColoredPills: Story = () => {
502502
value={value}
503503
onChange={onChangeHandler}
504504
>
505-
<Option text="Amber" value="1" borderColor="#FFBF00" fill />
506-
<Option text="Black" value="2" borderColor="blackOpacity65" fill />
507-
<Option text="Blue" value="3" borderColor="productBlue" />
508-
<Option text="Brown" value="4" borderColor="brown" fill />
509-
<Option text="Green" value="5" borderColor="productGreen" />
510-
<Option text="Orange" value="6" borderColor="orange" />
511-
<Option text="Pink" value="7" borderColor="pink" />
512-
<Option text="Purple" value="8" borderColor="purple" />
513-
<Option text="Red" value="9" borderColor="red" fill />
514-
<Option text="White" value="10" borderColor="white" />
515-
<Option text="Yellow" value="11" borderColor="yellow" fill />
505+
<Option text="Grey" value="1" variant="grey" />
506+
<Option text="Green" value="2" variant="green" fill />
507+
<Option text="Red" value="3" variant="red" />
508+
<Option text="Orange" value="4" variant="orange" />
509+
<Option text="Blue" value="5" variant="blue" />
510+
<Option text="Purple" value="6" variant="purple" />
511+
<Option text="Teal" value="7" variant="teal" fill />
512+
<Option text="Lime" value="8" variant="lime" fill />
513+
<Option text="Pink" value="9" variant="pink" />
514+
<Option text="Slate" value="10" variant="slate" fill />
516515
</MultiSelect>
517516
</Box>
518517
);
@@ -625,17 +624,16 @@ export const WithCustomMaxWidth: Story = () => {
625624
value={value}
626625
onChange={onChangeHandler}
627626
>
628-
<Option text="Amber" value="1" borderColor="#FFBF00" fill />
629-
<Option text="Black" value="2" borderColor="blackOpacity65" fill />
630-
<Option text="Blue" value="3" borderColor="productBlue" />
631-
<Option text="Brown" value="4" borderColor="brown" fill />
632-
<Option text="Green" value="5" borderColor="productGreen" />
633-
<Option text="Orange" value="6" borderColor="orange" />
634-
<Option text="Pink" value="7" borderColor="pink" />
635-
<Option text="Purple" value="8" borderColor="purple" />
636-
<Option text="Red" value="9" borderColor="red" fill />
637-
<Option text="White" value="10" borderColor="white" />
638-
<Option text="Yellow" value="11" borderColor="yellow" fill />
627+
<Option text="Grey" value="1" variant="grey" />
628+
<Option text="Green" value="2" variant="green" />
629+
<Option text="Red" value="3" variant="red" />
630+
<Option text="Orange" value="4" variant="orange" />
631+
<Option text="Blue" value="5" variant="blue" />
632+
<Option text="Purple" value="6" variant="purple" />
633+
<Option text="Teal" value="7" variant="teal" />
634+
<Option text="Lime" value="8" variant="lime" />
635+
<Option text="Pink" value="9" variant="pink" />
636+
<Option text="Slate" value="10" variant="slate" />
639637
</MultiSelect>
640638
</Box>
641639
);

‎src/components/select/multi-select/multi-select.test.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -125,16 +125,19 @@ describe("when value prop is provided", () => {
125125
value={["amber"]}
126126
placeholder="Select a colour"
127127
>
128-
<Option text="amber" value="amber" borderColor="red" fill />
128+
<Option text="amber" value="amber" variant="red" fill />
129129
</InteractiveComponent>,
130130
);
131131

132132
const amberPill = screen.getByTitle("amber");
133133
expect(amberPill).toHaveStyle(`
134-
background-color: rgb(255, 0, 0);
134+
background-color: var(--pill-red-bg-default);
135135
`);
136136

137-
expect(amberPill).toHaveStyleRule("border", "2px solid red");
137+
expect(amberPill).toHaveStyleRule(
138+
"border",
139+
"var(--global-borderwidth-s) solid var(--pill-red-border-default)",
140+
);
138141
});
139142

140143
it("does not display a pill, when value array contains an unmatched option", () => {

‎src/components/select/option/option.component.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import guid from "../../../__internal__/utils/helpers/guid";
33
import { TagProps } from "../../../__internal__/utils/helpers/tags";
44
import StyledOption from "./option.style";
55
import SelectListContext from "../__internal__/select-list/select-list.context";
6+
import type { PillProps } from "../../pill";
67

78
type OptionData = {
89
id?: string;
@@ -27,8 +28,13 @@ export interface OptionProps
2728
children?: React.ReactNode;
2829
/** The option's invisible internal value, if this is not passed the option will not be treated as interactive or selectable */
2930
value?: string | Record<string, unknown>;
30-
/** MultiSelect only - custom Pill border color - provide any color from palette or any valid css color value. */
31+
/**
32+
* MultiSelect only - legacy Pill color override retained for backwards compatibility.
33+
* @deprecated Use `variant` prop instead.
34+
*/
3135
borderColor?: string;
36+
/** MultiSelect only - set Pill color variant */
37+
variant?: PillProps["variant"];
3238
/** MultiSelect only - fill Pill background with color */
3339
fill?: boolean;
3440
/** If true, the component will be disabled */
@@ -70,6 +76,12 @@ const Option = React.forwardRef(
7076
const selectListContext = useContext(SelectListContext);
7177
let isSelected = selectListContext.currentOptionsListIndex === index;
7278
const internalIdRef = useRef(id || guid());
79+
const {
80+
variant: _variant,
81+
borderColor: _borderColor,
82+
fill: _fill,
83+
...restForLi
84+
} = rest;
7385

7486
if (selectListContext.multiselectValues && value) {
7587
isSelected = selectListContext.multiselectValues.includes(value);
@@ -100,7 +112,7 @@ const Option = React.forwardRef(
100112
hidden={hidden}
101113
style={style}
102114
isInteractive={!!value}
103-
{...{ ...rest, fill: undefined }}
115+
{...restForLi}
104116
data-component="option"
105117
>
106118
{children || text}

0 commit comments

Comments
 (0)