Update styles and types on Checkbox

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.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

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;
 };

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);

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{' '}
+        <Link href="#">Privacy Policy</Link>
+      </>
+    ),
+  },
+  decorators: [
+    Story => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+});
+
 export const AllVariants = meta.story({
   ...Default.input,
   render: () => (

packages/ui/src/components/Checkbox/Checkbox.tsx

@@ -46,7 +46,7 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
                 <RiCheckLine size={12} />
               )}
             </div>
-            {children}
+            <span>{children}</span>
           </>
         )}
       </RACheckbox>

packages/ui/src/components/Checkbox/definition.ts

@@ -29,8 +29,6 @@ export const CheckboxDefinition = defineComponent<CheckboxOwnProps>()({
     indicator: 'bui-CheckboxIndicator',
   },
   propDefs: {
-    selected: { dataAttribute: true },
-    indeterminate: { dataAttribute: true },
     children: {},
     className: {},
   },

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;
 };