fix(inline-control-group): remove bottom spacing from last child control

.changeset/nervous-moles-sleep.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/radio-group': patch
+'@twilio-paste/core': patch
+---
+
+[RadioGroup] Added optional `value` string prop which this component needs and is no longer on the extended `InlineControlGroup` interface.

.changeset/stupid-zebras-wave.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/checkbox': patch
+'@twilio-paste/core': patch
+---
+
+[Checkbox] Remove unused `value` prop.

.changeset/two-humans-press.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/inline-control-group': patch
+'@twilio-paste/core': patch
+---
+
+[InlineControlGroup] Adjusted the vertical spacing of `children`. This change improve the handling of RadioGroup and CheckboxGroup children.

packages/paste-core/components/checkbox/src/CheckboxGroup.tsx

@@ -12,17 +12,7 @@ export interface CheckboxGroupProps extends InlineControlGroupProps {
 
 const CheckboxGroup = React.forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(
   (
-    {
-      children,
-      disabled = false,
-      errorText,
-      isSelectAll = false,
-      name,
-      onChange,
-      orientation = 'vertical',
-      value,
-      ...props
-    },
+    {children, disabled = false, errorText, isSelectAll = false, name, onChange, orientation = 'vertical', ...props},
     ref
   ) => {
     const onChangeHandler = React.useCallback(
@@ -78,7 +68,6 @@ if (process.env.NODE_ENV === 'development') {
     errorText: PropTypes.string,
     helpText: PropTypes.string,
     orientation: PropTypes.oneOf(['vertical', 'horizontal']),
-    value: PropTypes.string,
   };
 }
 

packages/paste-core/components/form/stories/form.stories.tsx

@@ -1,7 +1,150 @@
 import * as React from 'react';
-import {useUIDSeed} from '@twilio-paste/uid-library';
+import {useUID, useUIDSeed} from '@twilio-paste/uid-library';
+import {Text} from '@twilio-paste/text';
 import {Box} from '@twilio-paste/box';
-import {Checkbox, FormLabel, FormInput, Select, Option, Radio, FormTextArea} from '../src';
+import {Grid, Column} from '@twilio-paste/grid';
+import {Anchor} from '@twilio-paste/anchor';
+import {Checkbox, FormLabel, FormInput, Select, Option, Radio, FormTextArea, CheckboxGroup, RadioGroup} from '../src';
+import type {FormInputProps, SelectProps, FormTextAreaProps, CheckboxGroupProps, RadioGroupProps} from '../src';
+
+const InputField: React.FC<Pick<FormInputProps, 'disabled' | 'hasError'>> = ({disabled, hasError}) => {
+  const inputIDSeed = useUIDSeed();
+  return (
+    <>
+      <FormLabel htmlFor={inputIDSeed('input')} disabled={disabled}>
+        Text Input
+      </FormLabel>
+      <FormInput id={inputIDSeed('input')} type="text" value="" disabled={disabled} hasError={hasError} />
+    </>
+  );
+};
+
+const TextareaField: React.FC<Pick<FormTextAreaProps, 'disabled' | 'hasError'>> = ({disabled, hasError}) => {
+  const inputIDSeed = useUIDSeed();
+  return (
+    <>
+      <FormLabel htmlFor={inputIDSeed('textarea')} disabled={disabled}>
+        Textarea textarea
+      </FormLabel>
+      <FormTextArea id={inputIDSeed('textarea')} value="" disabled={disabled} hasError={hasError} />
+    </>
+  );
+};
+
+const SelectField: React.FC<Pick<SelectProps, 'disabled' | 'hasError'>> = ({disabled, hasError}) => {
+  const inputIDSeed = useUIDSeed();
+  return (
+    <>
+      <FormLabel htmlFor={inputIDSeed('select')} disabled={disabled}>
+        Select Input
+      </FormLabel>
+      <Select id={inputIDSeed('select')} value="" onChange={() => {}} disabled={disabled} hasError={hasError}>
+        <Option value="1">Option</Option>
+      </Select>
+    </>
+  );
+};
+
+const CheckboxGroupField: React.FC<Pick<CheckboxGroupProps, 'orientation' | 'errorText'>> = ({
+  orientation,
+  errorText,
+}) => {
+  const [checked1, setChecked1] = React.useState(true);
+  const [checked2, setChecked2] = React.useState(false);
+  const [checked3, setChecked3] = React.useState(true);
+  return (
+    <CheckboxGroup
+      name="bar"
+      legend={
+        <Text as="span" color="currentColor">
+          This is some help text with a <Anchor href="http://paste.twilio.com">link</Anchor>.
+        </Text>
+      }
+      helpText="Help text should go here."
+      orientation={orientation}
+      errorText={errorText}
+      required
+    >
+      <Checkbox
+        id={useUID()}
+        value="1"
+        checked={checked1}
+        onChange={(event) => {
+          setChecked1(event.currentTarget.checked);
+        }}
+        helpText={
+          <Text as="span" color="currentColor">
+            This is some help text with a <Anchor href="http://paste.twilio.com">link</Anchor>.
+          </Text>
+        }
+      >
+        First
+      </Checkbox>
+      <Checkbox
+        checked={checked2}
+        onChange={(event) => {
+          setChecked2(event.currentTarget.checked);
+        }}
+        id={useUID()}
+        value="2"
+        helpText="This is some help text."
+      >
+        Second
+      </Checkbox>
+      <Checkbox
+        checked={checked3}
+        onChange={(event) => {
+          setChecked3(event.currentTarget.checked);
+        }}
+        id={useUID()}
+        value="3"
+        helpText="This is some help text."
+      >
+        Third
+      </Checkbox>
+    </CheckboxGroup>
+  );
+};
+
+const RadioGroupField: React.FC<Pick<RadioGroupProps, 'orientation' | 'errorText'>> = ({orientation, errorText}) => {
+  const [value, setValue] = React.useState('2');
+  return (
+    <RadioGroup
+      name="bar"
+      value={value}
+      legend={
+        <Text as="span" color="currentColor">
+          This is some help text with a <Anchor href="http://paste.twilio.com">link</Anchor>.
+        </Text>
+      }
+      helpText="Help text should go here."
+      required
+      errorText={errorText}
+      orientation={orientation}
+      onChange={(newValue) => {
+        setValue(newValue);
+      }}
+    >
+      <Radio
+        id={useUID()}
+        value="1"
+        helpText={
+          <Text as="span" color="currentColor">
+            This is some legend text with a <Anchor href="http://paste.twilio.com">link</Anchor>.
+          </Text>
+        }
+      >
+        First
+      </Radio>
+      <Radio id={useUID()} value="2" helpText="This is some help text.">
+        Second
+      </Radio>
+      <Radio id={useUID()} value="3" helpText="This is some help text.">
+        Third
+      </Radio>
+    </RadioGroup>
+  );
+};
 
 // eslint-disable-next-line import/no-default-export
 export default {
@@ -13,14 +156,19 @@ export const All = (): React.ReactNode => {
   return (
     <>
       <Box marginBottom="space70">
-        <FormLabel htmlFor={inputIDSeed('input')}>Text Input</FormLabel>
-        <FormInput id={inputIDSeed('input')} type="text" value="" />
-        <FormLabel htmlFor={inputIDSeed('textarea')}>Textarea textarea</FormLabel>
-        <FormTextArea id={inputIDSeed('textarea')} value="" />
-        <FormLabel htmlFor={inputIDSeed('select')}>Select Input</FormLabel>
-        <Select id={inputIDSeed('select')} value="" onChange={() => {}}>
-          <Option value="1">Option</Option>
-        </Select>
+        <InputField />
+        <Grid>
+          <Column>
+            <CheckboxGroupField />
+          </Column>
+          <Column>
+            <RadioGroupField />
+          </Column>
+        </Grid>
+        <TextareaField />
+        <CheckboxGroupField orientation="horizontal" />
+        <RadioGroupField orientation="horizontal" />
+        <SelectField />
         <Checkbox id={inputIDSeed('chcekbox1')} value="1" name="foo">
           Label
         </Checkbox>
@@ -35,20 +183,9 @@ export const All = (): React.ReactNode => {
         </Radio>
       </Box>
       <Box marginBottom="space70">
-        <FormLabel disabled htmlFor={inputIDSeed('disabledinput')}>
-          Text Input
-        </FormLabel>
-        <FormInput disabled id={inputIDSeed('disabledinput')} type="text" value="" />
-        <FormLabel disabled htmlFor={inputIDSeed('disabledtextarea')}>
-          Textarea Input
-        </FormLabel>
-        <FormTextArea disabled id={inputIDSeed('disabledtextarea')} value="" />
-        <FormLabel disabled htmlFor={inputIDSeed('disabledselect')}>
-          Select Input
-        </FormLabel>
-        <Select disabled id={inputIDSeed('disabledselect')} value="" onChange={() => {}}>
-          <Option value="1">Option</Option>
-        </Select>
+        <InputField disabled />
+        <TextareaField disabled />
+        <SelectField disabled />
         <Checkbox disabled id={inputIDSeed('disabledcheckbox1')} value="1" name="foo">
           Label
         </Checkbox>
@@ -63,14 +200,19 @@ export const All = (): React.ReactNode => {
         </Radio>
       </Box>
       <Box marginBottom="space70">
-        <FormLabel htmlFor={inputIDSeed('errorinput')}>Text Input</FormLabel>
-        <FormInput hasError id={inputIDSeed('errorinput')} type="text" value="" />
-        <FormLabel htmlFor={inputIDSeed('errortextarea')}>Textarea Input</FormLabel>
-        <FormTextArea hasError id={inputIDSeed('errortextarea')} value="" />
-        <FormLabel htmlFor={inputIDSeed('errorselect')}>Select Input</FormLabel>
-        <Select hasError id={inputIDSeed('errorselect')} value="" onChange={() => {}}>
-          <Option value="1">Option</Option>
-        </Select>
+        <InputField hasError />
+        <Grid>
+          <Column>
+            <CheckboxGroupField errorText="this is an error" />
+          </Column>
+          <Column>
+            <RadioGroupField errorText="this is an error" />
+          </Column>
+        </Grid>
+        <TextareaField hasError />
+        <CheckboxGroupField orientation="horizontal" errorText="this is an error" />
+        <RadioGroupField orientation="horizontal" errorText="this is an error" />
+        <SelectField hasError />
         <Checkbox hasError id={inputIDSeed('errorcheck1')} value="1" name="foo">
           Label
         </Checkbox>

packages/paste-core/components/inline-control-group/src/InlineControlGroup.tsx

@@ -13,11 +13,10 @@ export interface InlineControlGroupProps extends Omit<React.FieldsetHTMLAttribut
   orientation?: 'vertical' | 'horizontal';
   ref?: any;
   required?: boolean;
-  value?: string;
 }
 
 const InlineControlGroup = React.forwardRef<HTMLFieldSetElement, InlineControlGroupProps>(
-  ({children, disabled, errorText, helpText, legend, orientation, required, value, ...props}, ref) => {
+  ({children, disabled, errorText, helpText, legend, orientation = 'vertical', required, ...props}, ref) => {
     return (
       <Box
         {...safelySpreadBoxProps(props)}
@@ -31,22 +30,22 @@ const InlineControlGroup = React.forwardRef<HTMLFieldSetElement, InlineControlGr
           {legend}
         </Label>
         {helpText && <HelpText marginTop="space0">{helpText}</HelpText>}
-        <Box marginLeft="space20" marginRight="space20" marginTop="space40">
+        <Box marginLeft="space20" marginRight="space20">
           {React.Children.map(children, (child) => {
             return (
               <Box
                 display={orientation === 'horizontal' ? 'inline-block' : 'block'}
-                marginBottom="space40"
+                marginTop="space40"
                 marginRight={orientation === 'horizontal' ? 'space70' : null}
               >
                 {child}
               </Box>
             );
           })}
           {errorText && (
-            <HelpText marginTop="space0" variant="error">
-              {errorText}
-            </HelpText>
+            <Box marginTop="space40">
+              <HelpText variant="error">{errorText}</HelpText>
+            </Box>
           )}
         </Box>
       </Box>
@@ -56,10 +55,6 @@ const InlineControlGroup = React.forwardRef<HTMLFieldSetElement, InlineControlGr
 
 InlineControlGroup.displayName = 'InlineControlGroup';
 
-InlineControlGroup.defaultProps = {
-  orientation: 'vertical',
-};
-
 if (process.env.NODE_ENV === 'development') {
   InlineControlGroup.propTypes = {
     children: PropTypes.node.isRequired,
@@ -70,7 +65,6 @@ if (process.env.NODE_ENV === 'development') {
     name: PropTypes.string.isRequired,
     orientation: PropTypes.oneOf(['vertical', 'horizontal']),
     required: PropTypes.bool,
-    value: PropTypes.string,
   };
 }