refactor: removing labelled by children in favor of label prop (#700)

.changeset/bump-versions.md

@@ -23,11 +23,10 @@
  <CheckboxField
  errorMessage={validationErrors.acknowledgement}
  hasError={!!validationErrors.acknowledgement}
+ label="I agree with the Terms & Conditions"
  name="acknowledgement"
  value="yes"
- >
- I agree with the Terms & Conditions
- </CheckboxField>
+ />
  </>
  );
  },

docs/src/components/CheckboxFieldPropControls.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import {
  CheckboxField,
@@ -17,6 +17,9 @@ export interface CheckboxFieldPropControlsProps extends CheckboxFieldProps {
  value: React.SetStateAction<CheckboxFieldProps['isDisabled']>
  ) => void;
  setLabel: (value: React.SetStateAction<CheckboxFieldProps['label']>) => void;
+ setLabelHidden: (
+ value: React.SetStateAction<CheckboxFieldProps['labelHidden']>
+ ) => void;
  setSize: (value: React.SetStateAction<CheckboxFieldProps['size']>) => void;
 }
 
@@ -29,6 +32,8 @@ export const CheckboxFieldPropControls: CheckboxFieldPropControlsInterface = ({
  setIsDisabled,
  label,
  setLabel,
+ labelHidden,
+ setLabelHidden,
  size,
  setSize,
 }) => {
@@ -40,7 +45,7 @@ export const CheckboxFieldPropControls: CheckboxFieldPropControlsInterface = ({
  name="label"
  label="label"
  labelHidden
- value={label}
+ value={label as string}
  onChange={(e) =>
  setLabel(e.target.value as CheckboxFieldProps['label'])
  }
@@ -67,9 +72,15 @@ export const CheckboxFieldPropControls: CheckboxFieldPropControlsInterface = ({
  value="true"
  checked={isDisabled}
  onChange={(e) => setIsDisabled(e.target.checked)}
- >
- isDisabled
- </CheckboxField>
+ label="isDisabled"
+ />
+ <CheckboxField
+ name="label-hidden"
+ value="true"
+ checked={labelHidden}
+ onChange={(e) => setLabelHidden(e.target.checked)}
+ label="labelHidden"
+ />
  </DemoBox>
  );
 };

docs/src/components/ExpanderPropControls.tsx

@@ -39,9 +39,8 @@ export const ExpanderPropControls: React.FC<ExpanderPropControlsProps> = ({
  checked={isCollapsible}
  value="yes"
  onChange={(event) => setIsCollapsible(event.target.checked)}
- >
- isCollapsible
- </CheckboxField>
+ label="isCollapsible"
+ />
  ) : null}
  </DemoBox>
  );

docs/src/components/SliderFieldPropControls.tsx

@@ -149,25 +149,22 @@ export const SliderFieldPropControls: React.FC<SliderFieldPropControlsProps> =
  value="yes"
  checked={isDisabled}
  onChange={(event) => setIsDisabled(event.target.checked)}
- >
- isDisabled
- </CheckboxField>
+ label="isDisabled"
+ />
  <CheckboxField
  name="value-hidden"
  value="yes"
  checked={isValueHidden}
  onChange={(event) => setIsValueHidden(event.target.checked)}
- >
- isValueHidden
- </CheckboxField>
+ label="isValueHidden"
+ />
  <CheckboxField
  name="label-hidden"
  value="yes"
  checked={labelHidden}
  onChange={(event) => setLabelHidden(event.target.checked)}
- >
- labelHidden
- </CheckboxField>
+ label="labelHidden"
+ />
  </DemoBox>
  );
  };

docs/src/components/StepperFieldPropControls.tsx

@@ -83,8 +83,7 @@ export const StepperFieldPropControls: React.FC<StepperFieldPropControlsProps> =
  value="yes"
  checked={labelHidden}
  onChange={(event) => setLabelHidden(event.target.checked)}
- >
- labelHidden
- </CheckboxField>
+ label="labelHidden"
+ />
  </DemoBox>
  );

docs/src/components/ToggleButtonPropControls.tsx

@@ -60,9 +60,8 @@ export const ToggleButtonPropControls: ToggleButtonPropControlsInterface = ({
  value="yes"
  checked={isDisabled}
  onChange={(event) => setIsDisabled(event.target.checked)}
- >
- isDisabled
- </CheckboxField>
+ label="isDisabled"
+ />
  </DemoBox>
  );
 };

docs/src/components/useCheckboxFieldProps.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import * as React from 'react';
 
 import { CheckboxFieldProps } from '@aws-amplify/ui-react';
 
@@ -9,22 +9,25 @@ interface UseCheckboxFieldProps {
 }
 
 export const useCheckboxFieldProps: UseCheckboxFieldProps = (initialValues) => {
- const [checked, setChecked] = useState<CheckboxFieldProps['checked']>(
+ const [checked, setChecked] = React.useState<CheckboxFieldProps['checked']>(
  initialValues.checked
  );
- const [isDisabled, setIsDisabled] = useState<
+ const [isDisabled, setIsDisabled] = React.useState<
  CheckboxFieldProps['isDisabled']
  >(initialValues.isDisabled);
- const [label, setLabel] = useState<CheckboxFieldProps['label']>(
+ const [label, setLabel] = React.useState<CheckboxFieldProps['label']>(
  initialValues.label
  );
- const [name, setName] = useState<CheckboxFieldProps['name']>(
+ const [labelHidden, setLabelHidden] = React.useState<
+ CheckboxFieldProps['labelHidden']
+ >(initialValues.labelHidden);
+ const [name, setName] = React.useState<CheckboxFieldProps['name']>(
  initialValues.size
  );
- const [size, setSize] = useState<CheckboxFieldProps['size']>(
+ const [size, setSize] = React.useState<CheckboxFieldProps['size']>(
  initialValues.size
  );
- const [value, setValue] = useState<CheckboxFieldProps['value']>(
+ const [value, setValue] = React.useState<CheckboxFieldProps['value']>(
  initialValues.size
  );
 
@@ -36,6 +39,8 @@ export const useCheckboxFieldProps: UseCheckboxFieldProps = (initialValues) => {
  setIsDisabled,
  label,
  setLabel,
+ labelHidden,
+ setLabelHidden,
  name,
  setName,
  size,

docs/src/pages/components/authenticator/index.page.mdx

@@ -414,9 +414,8 @@ The following example customizes the Sign Up screen with:
  hasError={!!validationErrors.acknowledgement}
  name="acknowledgement"
  value="yes"
- >
- I agree with the Terms & Conditions
- </CheckboxField>
+ label="I agree with the Terms & Conditions"
+ />
  </>
  );
  },

docs/src/pages/components/checkboxfield/demo.tsx

@@ -1,15 +1,11 @@
-import React, { useState } from 'react';
-
 import { CheckboxField, Flex } from '@aws-amplify/ui-react';
 
 import { CheckboxFieldPropControls } from '@/components/CheckboxFieldPropControls';
 import { useCheckboxFieldProps } from '@/components/useCheckboxFieldProps';
 
-export const Demo: React.FC = () => {
- const label = 'Subscribe';
+export const Demo = () => {
  const props = useCheckboxFieldProps({
- label,
- children: label,
+ label: 'Subscribe',
  name: 'subscribe',
  value: 'yes',
  });
@@ -21,9 +17,9 @@ export const Demo: React.FC = () => {
  value={props.value}
  isDisabled={props.isDisabled}
  size={props.size}
- >
- {props.label}
- </CheckboxField>
+  label={props.label}
+ labelHidden={props.labelHidden}
+ />
  </Flex>
  );
 };

docs/src/pages/components/checkboxfield/examples.tsx → docs/src/pages/components/checkboxfield/examples/controlledExample.tsx

@@ -1,17 +1,16 @@
-import React, { useState } from 'react';
+import * as React from 'react';
 
 import { CheckboxField } from '@aws-amplify/ui-react';
 
-export const ControlledCheckbox: React.FC = () => {
- const [checked, setChecked] = useState(false);
+export const ControlledCheckbox = () => {
+ const [checked, setChecked] = React.useState(false);
  return (
  <CheckboxField
  name="subscribe-controlled"
  value="yes"
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
- >
- Subscribe
- </CheckboxField>
+ label="Subscribe"
+ />
  );
 };

docs/src/pages/components/checkboxfield/examples/valueExample.tsx

@@ -0,0 +1,15 @@
+import { CheckboxField, Button } from '@aws-amplify/ui-react';
+import * as React from 'react';
+
+export const ValueExample = () => {
+ const onSubmit = (event) => {
+ event.preventDefault();
+ alert(event.target.subscribe.value);
+ };
+ return (
+ <form onSubmit={onSubmit}>
+ <CheckboxField label="Subscribe" name="subscribe" value="yes" />
+ <Button type="submit">Submit</Button>
+ </form>
+ );
+};