diff --git a/.changeset/wet-spiders-hide.md b/.changeset/wet-spiders-hide.md new file mode 100644 index 0000000..dfbc348 --- /dev/null +++ b/.changeset/wet-spiders-hide.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": minor +--- + +add disable property to select option diff --git a/packages/react/src/components/Forms/Select/index.mdx b/packages/react/src/components/Forms/Select/index.mdx index a3519db..831b66d 100644 --- a/packages/react/src/components/Forms/Select/index.mdx +++ b/packages/react/src/components/Forms/Select/index.mdx @@ -26,6 +26,7 @@ The available options must be given via the `options` props. It is an array of o code={`{ label: string value?: string + disabled?: boolean; }`} /> @@ -83,6 +84,15 @@ By default, the select is clearable ( the cross icon on the right is shown ). Yo + +## Disabled options + +You can disable some options by using the `disabled` props on the `Option` object. + + + + + ## Controlled / Non Controlled Like a native select, you can use the Select component in a controlled or non controlled way. You can see the example below diff --git a/packages/react/src/components/Forms/Select/index.scss b/packages/react/src/components/Forms/Select/index.scss index 8791ef4..9a8f30f 100644 --- a/packages/react/src/components/Forms/Select/index.scss +++ b/packages/react/src/components/Forms/Select/index.scss @@ -121,6 +121,11 @@ &--selected { background-color: var(--c--components--forms-select--item-background-color--selected); } + + &--disabled { + color: var(--c--components--forms-select--item-color--disabled); + cursor: default; + } } } diff --git a/packages/react/src/components/Forms/Select/index.spec.tsx b/packages/react/src/components/Forms/Select/index.spec.tsx index f18f1e3..e35fdd9 100644 --- a/packages/react/src/components/Forms/Select/index.spec.tsx +++ b/packages/react/src/components/Forms/Select/index.spec.tsx @@ -35,6 +35,12 @@ describe("", () => { }) ).not.toBeInTheDocument(); }); + it("is not possible to select disabled options", async () => { + render( + +