Checkbox and Radio Button Icon Alignment (#2694)

Co-authored-by: Josh Wooding <[email protected]>

.changeset/ten-mayflies-grow.md

@@ -0,0 +1,6 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed alignment for Checkbox and Radio Button. They are now correctly aligned to their labels.
+Fixed alignment for Checkbox Group and Radio Button Group when in a Form Field with label left. The Form Field label is now inline with the groups.

packages/core/src/checkbox/Checkbox.css

@@ -23,6 +23,11 @@
   cursor: var(--salt-selectable-cursor-readonly);
 }
 
+.saltCheckbox-input,
+.saltCheckboxIcon {
+  margin-top: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);
+}
+
 .saltCheckboxIcon > svg {
   /* ensures svg is centered in all browsers */
   transform: translate(0px, 0px);
@@ -55,11 +60,9 @@
 /* Styles applied to input element */
 .saltCheckbox-input {
   cursor: inherit;
-  left: 0;
   margin: 0;
   opacity: 0;
   padding: 0;
   position: absolute;
-  top: 0;
   z-index: var(--salt-zIndex-default);
 }

packages/core/src/checkbox/CheckboxGroup.css

@@ -27,3 +27,9 @@
 .saltCheckboxGroup-noWrap .saltCheckbox {
   white-space: break-spaces;
 }
+
+/* Styles applied when checkbox button group is inside a form field with label left or right */
+.saltFormField-labelLeft .saltCheckboxGroup,
+.saltFormField-labelRight .saltCheckboxGroup {
+  padding-top: var(--salt-spacing-100);
+}

packages/core/src/radio-button/RadioButton.css

@@ -9,6 +9,8 @@
   line-height: var(--salt-text-lineHeight);
   font-family: var(--salt-text-fontFamily);
   font-weight: var(--salt-text-fontWeight);
+
+  --radioButton-icon-marginTop: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);
 }
 
 /* Styles applied when RadioButton is disabled */
@@ -29,14 +31,16 @@
   position: absolute;
   height: var(--salt-size-selectable);
   opacity: 0;
-  top: 0;
-  left: 0;
-  margin: 0;
+  margin: var(--radioButton-icon-marginTop) 0 0 0;
   padding: 0;
   width: var(--salt-size-selectable);
   z-index: var(--salt-zIndex-default);
 }
 
+.saltRadioButtonIcon {
+  margin-top: var(--radioButton-icon-marginTop);
+}
+
 .saltRadioButtonIcon > svg {
   /* ensures svg is centered in all browsers */
   transform: translate(0px, 0px);

packages/core/src/radio-button/RadioButtonGroup.css

@@ -26,3 +26,9 @@
 .saltRadioButtonGroup-noWrap .saltRadioButton {
   white-space: break-spaces;
 }
+
+/* Styles applied when radio button group is inside a form field with label left or right */
+.saltFormField-labelLeft .saltRadioButtonGroup,
+.saltFormField-labelRight .saltRadioButtonGroup {
+  padding-top: var(--salt-spacing-100);
+}

packages/core/stories/checkbox/checkbox.qa.stories.tsx

@@ -1,5 +1,12 @@
 import { Meta, StoryFn } from "@storybook/react";
-import { Checkbox, CheckboxGroup, CheckboxGroupProps } from "@salt-ds/core";
+import {
+  Checkbox,
+  CheckboxGroup,
+  CheckboxGroupProps,
+  FormField,
+  FormFieldLabel,
+  FormFieldHelperText,
+} from "@salt-ds/core";
 import { QAContainer, QAContainerProps } from "docs/components";
 
 export default {
@@ -38,11 +45,28 @@ const CheckboxGroupExample = ({
   );
 };
 
+const CheckboxInFormFieldExample = () => {
+  return (
+    <FormField labelPlacement="left">
+      <FormFieldLabel>Assignment</FormFieldLabel>
+      <CheckboxGroup>
+        <Checkbox label="Private placement of equity or debt securities" />
+        <Checkbox defaultChecked label="Syndicated credit facility or loan" />
+        <Checkbox label="Interest rate, foreign exchange or commodity hedging or equity derivative" />
+        <Checkbox label="Escrow arrangement" />
+        <Checkbox label="Restructuring of debt securities of the Counterparty or the Company" />
+      </CheckboxGroup>
+      <FormFieldHelperText>Select all appropriate</FormFieldHelperText>
+    </FormField>
+  );
+};
+
 export const AllExamplesGrid: StoryFn<QAContainerProps> = (props) => {
   return (
     <QAContainer cols={1} itemPadding={8} {...props}>
       <CheckboxGroupExample direction="vertical" />
       <CheckboxGroupExample direction="horizontal" />
+      <CheckboxInFormFieldExample />
     </QAContainer>
   );
 };

packages/core/stories/form-field/form-field.stories.tsx

@@ -135,6 +135,103 @@ export const LabelLeft: StoryFn<typeof FormField> = (props) => {
   );
 };
 
+export const LabelLeftWithControls: StoryFn<typeof FormField> = (props) => {
+  const [isRadioError, setIsRadioError] = useState(true);
+
+  const [radioGroupValue, setRadioGroupValue] = useState("");
+  const [checkboxGroupValue, setCheckboxGroupValue] = useState<string[]>([]);
+
+  const handleRadioChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    const { value } = event.target;
+    setRadioGroupValue(value);
+    props.onChange?.(event);
+    isRadioError && setIsRadioError(false);
+  };
+
+  const handleCheckboxChange: ChangeEventHandler<HTMLInputElement> = (
+    event
+  ) => {
+    const { value } = event.target;
+    if (checkboxGroupValue.indexOf(value) === -1) {
+      setCheckboxGroupValue((prevControlledValues) => [
+        ...prevControlledValues,
+        value,
+      ]);
+    } else {
+      setCheckboxGroupValue((prevControlledValues) =>
+        prevControlledValues.filter(
+          (controlledValue) => controlledValue !== value
+        )
+      );
+    }
+    props.onChange?.(event);
+  };
+
+  const isCheckboxError = checkboxGroupValue.length === 0;
+
+  return (
+    <FlowLayout style={{ width: "466px" }}>
+      <FormField labelPlacement="left" {...props}>
+        <FormLabel>Client directed request</FormLabel>
+        <RadioButtonGroup direction="horizontal">
+          <RadioButton key="option1" label="Yes" value="yes" />
+          <RadioButton key="option2" label="No" value="no" />
+        </RadioButtonGroup>
+      </FormField>
+      <FormField labelPlacement="left" {...props}>
+        <FormLabel>Assignment</FormLabel>
+        <CheckboxGroup>
+          <Checkbox label="Private placement of equity or debt securities" />
+          <Checkbox defaultChecked label="Syndicated credit facility or loan" />
+          <Checkbox label="Interest rate, foreign exchange or commodity hedging or equity derivative" />
+          <Checkbox label="Escrow arrangement" />
+          <Checkbox label="Restructuring of debt securities of the Counterparty or the Company" />
+        </CheckboxGroup>
+        <FormHelperText>Select all appropriate</FormHelperText>
+      </FormField>
+      <FormField
+        labelPlacement="left"
+        validationStatus={isRadioError ? "error" : undefined}
+        {...props}
+      >
+        <FormLabel>Deal owner</FormLabel>
+        <RadioButtonGroup onChange={handleRadioChange} value={radioGroupValue}>
+          {radioData.map((radio) => {
+            return (
+              <RadioButton
+                key={radio.label}
+                label={radio.label}
+                value={radio.value}
+              />
+            );
+          })}
+        </RadioButtonGroup>
+        <FormHelperText>{`${
+          isRadioError ? "Must select one option. " : ""
+        }Is this deal for the ultimate parent or a subsidiary?`}</FormHelperText>
+      </FormField>
+      <FormField
+        labelPlacement="left"
+        validationStatus={isCheckboxError ? "error" : undefined}
+        {...props}
+      >
+        <FormLabel>Fee type</FormLabel>
+        <CheckboxGroup
+          checkedValues={checkboxGroupValue}
+          onChange={handleCheckboxChange}
+        >
+          {checkboxesData.map((data) => (
+            <Checkbox key={data.value} {...data} />
+          ))}
+        </CheckboxGroup>
+        <FormHelperText>{`${
+          isCheckboxError ? "Must select at least one option. " : ""
+        }`}</FormHelperText>
+      </FormField>
+    </FlowLayout>
+  );
+};
+
 export const LabelQuestion: StoryFn<typeof FormField> = (props) => {
   return (
     <FormField {...props}>

packages/core/stories/radio-button/radio-button.qa.stories.tsx

@@ -1,4 +1,6 @@
 import {
+  FormField,
+  FormFieldLabel,
   RadioButton,
   RadioButtonGroup,
   RadioButtonGroupProps,
@@ -38,11 +40,27 @@ const RadioButtonGroupExample = ({
   );
 };
 
+const RadioButtonInFormFieldExample = () => {
+  return (
+    <FormField labelPlacement="left">
+      <FormFieldLabel>Assignment</FormFieldLabel>
+      <RadioButtonGroup>
+        <RadioButton label="Private placement of equity or debt securities" />
+        <RadioButton label="Syndicated credit facility or loan" />
+        <RadioButton label="Interest rate, foreign exchange or commodity hedging or equity derivative" />
+        <RadioButton label="Escrow arrangement" />
+        <RadioButton label="Restructuring of debt securities of the Counterparty or the Company" />
+      </RadioButtonGroup>
+    </FormField>
+  );
+};
+
 export const AllExamplesGrid: StoryFn<QAContainerProps> = (props) => {
   return (
     <QAContainer cols={1} itemPadding={8} {...props}>
       <RadioButtonGroupExample direction="vertical" />
       <RadioButtonGroupExample direction="horizontal" />
+      <RadioButtonInFormFieldExample />
     </QAContainer>
   );
 };