diff --git a/.changeset/young-squids-end.md b/.changeset/young-squids-end.md new file mode 100644 index 0000000000..d5b5b97c1a --- /dev/null +++ b/.changeset/young-squids-end.md @@ -0,0 +1,7 @@ +--- +'@backstage/ui': minor +--- + +Removed redundant `selected` and `indeterminate` props from the `Checkbox` component. Use the `isSelected` and `isIndeterminate` props instead, which are the standard React Aria props and already handle both the checkbox behaviour and the corresponding CSS data attributes. + +**Affected components:** Checkbox diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index 12159d7818..834251f088 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -830,12 +830,6 @@ export const CheckboxDefinition: { readonly indicator: 'bui-CheckboxIndicator'; }; readonly propDefs: { - readonly selected: { - readonly dataAttribute: true; - }; - readonly indeterminate: { - readonly dataAttribute: true; - }; readonly children: {}; readonly className: {}; }; @@ -843,8 +837,6 @@ export const CheckboxDefinition: { // @public (undocumented) export type CheckboxOwnProps = { - selected?: boolean; - indeterminate?: boolean; children: React.ReactNode; className?: string; }; diff --git a/packages/ui/src/components/Checkbox/Checkbox.module.css b/packages/ui/src/components/Checkbox/Checkbox.module.css index deadc96358..54705d95e9 100644 --- a/packages/ui/src/components/Checkbox/Checkbox.module.css +++ b/packages/ui/src/components/Checkbox/Checkbox.module.css @@ -20,7 +20,7 @@ .bui-Checkbox { display: flex; flex-direction: row; - align-items: center; + align-items: flex-start; gap: var(--bui-space-2); font-size: var(--bui-font-size-3); font-family: var(--bui-font-regular); diff --git a/packages/ui/src/components/Checkbox/Checkbox.stories.tsx b/packages/ui/src/components/Checkbox/Checkbox.stories.tsx index e8f7859785..94811d5cb6 100644 --- a/packages/ui/src/components/Checkbox/Checkbox.stories.tsx +++ b/packages/ui/src/components/Checkbox/Checkbox.stories.tsx @@ -16,6 +16,8 @@ import preview from '../../../../../.storybook/preview'; import { Checkbox } from './Checkbox'; import { Flex } from '../Flex'; +import { Link } from '../Link'; +import { MemoryRouter } from 'react-router-dom'; const meta = preview.meta({ title: 'Backstage UI/Checkbox', @@ -28,6 +30,12 @@ export const Default = meta.story({ }, }); +export const Selected = Default.extend({ + args: { + isSelected: true, + }, +}); + export const Indeterminate = meta.story({ args: { children: 'Select all', @@ -35,6 +43,25 @@ export const Indeterminate = meta.story({ }, }); +export const WithLongText = Default.extend({ + args: { + children: ( + <> + I agree to receive future communication from Spotify. You may + unsubscribe from these communications at any time. Please review our{' '} + Privacy Policy + + ), + }, + decorators: [ + Story => ( + + + + ), + ], +}); + export const AllVariants = meta.story({ ...Default.input, render: () => ( diff --git a/packages/ui/src/components/Checkbox/Checkbox.tsx b/packages/ui/src/components/Checkbox/Checkbox.tsx index a825ccfb8a..62599d7ae9 100644 --- a/packages/ui/src/components/Checkbox/Checkbox.tsx +++ b/packages/ui/src/components/Checkbox/Checkbox.tsx @@ -46,7 +46,7 @@ export const Checkbox = forwardRef( )} - {children} + {children} )} diff --git a/packages/ui/src/components/Checkbox/definition.ts b/packages/ui/src/components/Checkbox/definition.ts index 5aa2473eac..b6666924ee 100644 --- a/packages/ui/src/components/Checkbox/definition.ts +++ b/packages/ui/src/components/Checkbox/definition.ts @@ -29,8 +29,6 @@ export const CheckboxDefinition = defineComponent()({ indicator: 'bui-CheckboxIndicator', }, propDefs: { - selected: { dataAttribute: true }, - indeterminate: { dataAttribute: true }, children: {}, className: {}, }, diff --git a/packages/ui/src/components/Checkbox/types.ts b/packages/ui/src/components/Checkbox/types.ts index 8507df1e5b..d9b220eb2a 100644 --- a/packages/ui/src/components/Checkbox/types.ts +++ b/packages/ui/src/components/Checkbox/types.ts @@ -17,8 +17,6 @@ import type { CheckboxProps as RACheckboxProps } from 'react-aria-components'; /** @public */ export type CheckboxOwnProps = { - selected?: boolean; - indeterminate?: boolean; children: React.ReactNode; className?: string; };