diff --git a/.changeset/stale-frogs-search.md b/.changeset/stale-frogs-search.md new file mode 100644 index 0000000..cd293ab --- /dev/null +++ b/.changeset/stale-frogs-search.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": patch +--- + +fix Radio, Checkbox fullWidth diff --git a/packages/react/src/components/Forms/Checkbox/index.scss b/packages/react/src/components/Forms/Checkbox/index.scss index 0479109..90966f9 100644 --- a/packages/react/src/components/Forms/Checkbox/index.scss +++ b/packages/react/src/components/Forms/Checkbox/index.scss @@ -125,4 +125,12 @@ color: var(--c--theme--colors--greyscale-600); } } + + &--full-width { + width: 100%; + + .c__field { + align-items: flex-start; + } + } } diff --git a/packages/react/src/components/Forms/Checkbox/index.stories.tsx b/packages/react/src/components/Forms/Checkbox/index.stories.tsx index 41ffd1f..ff8a2f2 100644 --- a/packages/react/src/components/Forms/Checkbox/index.stories.tsx +++ b/packages/react/src/components/Forms/Checkbox/index.stories.tsx @@ -68,6 +68,17 @@ export const WithTexts = { }, }; +export const FullWidth = { + render: Template, + + args: { + checked: true, + fullWidth: true, + label: "Label", + text: "This is an optional text", + }, +}; + export const Disabled = { render: Template, diff --git a/packages/react/src/components/Forms/Checkbox/index.tsx b/packages/react/src/components/Forms/Checkbox/index.tsx index 5074cbe..0a5f117 100644 --- a/packages/react/src/components/Forms/Checkbox/index.tsx +++ b/packages/react/src/components/Forms/Checkbox/index.tsx @@ -37,6 +37,7 @@ export const Checkbox = forwardRef(