fix(Checkbox): support checkbox value inside forms (#281)

Author: tenphi

.changeset/friendly-snails-kick.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Checkbox now has an abilility to have both a label and a text value inside forms.

src/components/forms/Checkbox/Checkbox.stories.tsx

@@ -28,10 +28,10 @@ const Template = (props) => (
 );
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = { children: 'Checkbox' };
 
-export const WithoutLabel = Template.bind({});
-WithoutLabel.args = {
+export const WithoutValue = Template.bind({});
+WithoutValue.args = {
   label: '',
 };
 

src/components/forms/Checkbox/Checkbox.tsx

@@ -26,6 +26,7 @@ import {
   castNullableIsSelected,
   WithNullableSelected,
 } from '../../../utils/react/nullableValue';
+import { Text } from '../../content/Text';
 
 import { CheckboxGroup } from './CheckboxGroup';
 import { CheckboxGroupContext } from './context';
@@ -142,8 +143,6 @@ function Checkbox(
     ...otherProps
   } = props;
 
-  label = label || children;
-
   // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.
   // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,
   // but since the checkbox won't move in and out of a group, it should be safe.
@@ -223,6 +222,7 @@ function Checkbox(
       <CheckboxElement qa="Checkbox" mods={mods} styles={inputStyles}>
         {markIcon}
       </CheckboxElement>
+      {children && <Text>{children}</Text>}
     </CheckboxWrapperElement>
   );
 
@@ -233,6 +233,7 @@ function Checkbox(
           as: 'label',
           labelPosition,
           label,
+          children,
           extra,
           styles,
           isRequired,
@@ -275,7 +276,7 @@ function Checkbox(
           }}
           {...filterBaseProps(labelProps)}
         >
-          {label}
+          {label || children}
         </Element>
       )}
     </CheckboxWrapperElement>

src/components/forms/Form/ComplexForm.stories.tsx

@@ -316,7 +316,7 @@ const Template: StoryFn<typeof Form> = (args) => {
           name="checkbox"
           rules={[{ required: true, message: 'This field is required' }]}
         >
-          <Checkbox label="Checkbox field" />
+          <Checkbox label="Checkbox field">Checkbox value</Checkbox>
         </Field>
         <Field
           name="switch"

src/components/forms/NumberInput/NumberInput.tsx

@@ -28,7 +28,7 @@ export interface CubeNumberInputProps
 
 const StyledTextInputBase = tasty(TextInputBase, {
   wrapperStyles: {
-    width: '13x',
+    width: 'initial 13x 100%',
   },
 });
 
@@ -70,7 +70,6 @@ function NumberInput(props: WithNullableValue<CubeNumberInputProps>, ref) {
       inputRef={inputRef}
       wrapperProps={groupProps}
       suffixPosition="after"
-      textAlign="center"
       suffix={
         showStepper ? (
           <StepperContainer>

src/components/forms/RangeSlider/RangeInput.tsx

@@ -43,9 +43,10 @@ export function RangeInput(props: RangeInputProps) {
       {...otherProps}
       hideStepper
       size="small"
-      inputStyles={{
+      wrapperStyles={{
         width: inputWidth,
       }}
+      textAlign="center"
       formatOptions={formatOptions}
       value={value}
       minValue={state.getThumbMinValue(index)}

src/components/forms/TextInput/TextInputBase.tsx

@@ -131,7 +131,7 @@ const INPUT_STYLE_PROPS_LIST = [...BLOCK_STYLES, 'resize'];
 export const DEFAULT_INPUT_STYLES: Styles = {
   display: 'block',
   gridArea: 'input',
-  width: 'initial 100% initial',
+  width: 'initial 100% 100%',
   height: 'initial initial initial',
   color: 'inherit',
   fill: '#clear',