feat(Checkbox): add labelPosition prop

CHANGELOG.md

@@ -16,6 +16,8 @@
 This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+
+### Fixes
 - Fix `Dropdown` and `DropdownItem` styles to match [redlines] - modified `ListItem` and ListItemStyles to not set gap in component definition @bcalvery ([#1523](https://github.com/stardust-ui/react/pull/1523))
 
 ### Features
@@ -24,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `alert`, `info`, `share-alt` and `microsoft-stream` icons to Teams theme @marst89 ([#1544](https://github.com/stardust-ui/react/pull/1544))
 - Add `custom` `kind` for `items` in `Toolbar` component @miroslavstastny ([#1558](https://github.com/stardust-ui/react/pull/1558))
 - Add `hand` icon to Teams theme @t-proko ([#1567](https://github.com/stardust-ui/react/pull/1567))
+ - Add `labelPosition` prop to `Checkbox` component @layershifter ([#1578](https://github.com/stardust-ui/react/pull/1578))
 
 ### Documentation
 - Ensure docs content doesn't overlap with sidebar @kuzhelov ([#1568](https://github.com/stardust-ui/react/pull/1568))

docs/src/examples/components/Checkbox/Slots/CheckboxExampleLabel.shorthand.tsx

@@ -0,0 +1,11 @@
+import { Checkbox, Flex } from '@stardust-ui/react'
+import * as React from 'react'
+
+const CheckboxExampleLabel = () => (
+  <Flex>
+    <Checkbox label="At start" labelPosition="start" />
+    <Checkbox label="At end" />
+  </Flex>
+)
+
+export default CheckboxExampleLabel

docs/src/examples/components/Checkbox/Slots/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Slots = () => (
+  <ExampleSection title="Slots">
+    <ComponentExample
+      title="Label"
+      description="A checkbox can have a label."
+      examplePath="components/Checkbox/Slots/CheckboxExampleLabel"
+    />
+  </ExampleSection>
+)
+
+export default Slots

docs/src/examples/components/Checkbox/States/CheckboxExampleChecked.shorthand.tsx

@@ -0,0 +1,16 @@
+import { useBooleanKnob } from '@stardust-ui/docs-components'
+import { Checkbox } from '@stardust-ui/react'
+import * as React from 'react'
+
+const CheckboxExampleChecked = () => {
+  const [checked] = useBooleanKnob({ name: 'checked', initialValue: true })
+
+  return (
+    <>
+      <Checkbox checked={checked} label="Checked" />
+      <Checkbox checked={checked} label="Checked toggle" toggle />
+    </>
+  )
+}
+
+export default CheckboxExampleChecked

docs/src/examples/components/Checkbox/States/index.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const States = () => (
+  <ExampleSection title="States">
+    <ComponentExample
+      title="Checked"
+      description="A checkbox can be checked."
+      examplePath="components/Checkbox/States/CheckboxExampleChecked"
+    />
+    <ComponentExample
+      title="Disabled"
+      description="A checkbox can be read-only and unable to change states."
+      examplePath="components/Checkbox/States/CheckboxExampleDisabled"
+    />
+  </ExampleSection>
+)
+
+export default States

docs/src/examples/components/Checkbox/Types/index.tsx

@@ -10,11 +10,6 @@ const Types = () => (
       description="A standard checkbox."
       examplePath="components/Checkbox/Types/CheckboxExample"
     />
-    <ComponentExample
-      title="Disabled"
-      description="A checkbox can be read-only and unable to change states."
-      examplePath="components/Checkbox/Types/CheckboxExampleDisabled"
-    />
     <ComponentExample
       title="Toggle"
       description="A checkbox can be formatted to show an on or off choice."

docs/src/examples/components/Checkbox/index.tsx

@@ -1,9 +1,14 @@
 import * as React from 'react'
+
+import Slots from './Slots'
+import States from './States'
 import Types from './Types'
 
 const CheckboxExamples = () => (
   <>
     <Types />
+    <States />
+    <Slots />
   </>
 )
 

packages/react/src/components/Checkbox/Checkbox.tsx

@@ -40,6 +40,9 @@ export interface CheckboxProps extends UIComponentProps, ChildrenComponentProps
   /** The label of the item. */
   label?: ShorthandValue
 
+  /** A label in the loader can have different positions. */
+  labelPosition?: 'start' | 'end'
+
   /**
    * Called after item checked state is changed.
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
@@ -79,6 +82,7 @@ class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, Checkb
     disabled: PropTypes.bool,
     icon: customPropTypes.itemShorthand,
     label: customPropTypes.itemShorthand,
+    labelPosition: PropTypes.oneOf(['start', 'end']),
     onChange: PropTypes.func,
     onClick: PropTypes.func,
     toggle: PropTypes.bool,
@@ -87,6 +91,7 @@ class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, Checkb
   static defaultProps = {
     accessibility: checkboxBehavior,
     icon: {},
+    labelPosition: 'end',
   }
 
   static autoControlledProps = ['checked']
@@ -133,7 +138,13 @@ class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, Checkb
   }
 
   renderComponent({ ElementType, classes, unhandledProps, styles, accessibility }) {
-    const { label, icon, toggle } = this.props
+    const { label, labelPosition, icon, toggle } = this.props
+
+    const labelElement = Text.create(label, {
+      defaultProps: {
+        styles: styles.label,
+      },
+    })
 
     return (
       <ElementType
@@ -145,13 +156,14 @@ class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, Checkb
         {...unhandledProps}
         {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
       >
+        {labelPosition === 'start' && labelElement}
         {Icon.create(icon, {
           defaultProps: {
             name: toggle ? 'stardust-circle' : 'stardust-checkmark',
             styles: toggle ? styles.toggle : styles.checkbox,
           },
         })}
-        {Text.create(label)}
+        {labelPosition === 'end' && labelElement}
       </ElementType>
     )
   }

packages/react/src/themes/base/components/Checkbox/checkboxStyles.ts

@@ -17,6 +17,10 @@ const checkboxStyles: ComponentSlotStylesInput<CheckboxProps & CheckboxState, Ch
       color: v.disabledColor,
       cursor: 'default',
     }),
+
+    '> *:not(:last-child)': {
+      marginRight: v.checkboxGap,
+    },
   }),
 
   checkbox: ({ props: p, variables: v }): ICSSInJSStyle => ({

packages/react/src/themes/base/components/Checkbox/checkboxVariables.ts

@@ -7,6 +7,7 @@ export type CheckboxVariables = {
   checkboxBorderRadius: string
   checkboxBorderWidth: string
   checkboxColor: string
+  checkboxGap: string
   checkboxMargin: string
   checkboxPadding: string
 
@@ -45,7 +46,8 @@ export default (siteVars: any): CheckboxVariables => ({
   checkboxBorderRadius: pxToRem(4),
   checkboxBorderWidth: pxToRem(1),
   checkboxColor: 'transparent',
-  checkboxMargin: `0 ${pxToRem(12)} 0 0`,
+  checkboxGap: pxToRem(12),
+  checkboxMargin: '0',
   checkboxPadding: '0',
 
   toggleBackground: 'transparent',
@@ -54,7 +56,7 @@ export default (siteVars: any): CheckboxVariables => ({
   toggleBorderRadius: pxToRem(999),
   toggleBorderWidth: pxToRem(1),
   toggleColor: 'inherit',
-  toggleMargin: `0 ${pxToRem(12)} 0 0`,
+  toggleMargin: '0',
   togglePadding: `0 ${pxToRem(20)} 0 0`,
 
   checkedCheckboxBackground: 'transparent',