feat(form): Added props to style Checkbox and Radio input element

Author: mlaursen

packages/form/src/toggle/InputToggle.tsx

@@ -64,6 +64,37 @@ export interface InputToggleProps
    */
   toggleClassName?: string;
 
+  /**
+   * An optional `style` to provide to the invisible `<input>` element that is
+   * used to toggle the checked state. This prop is only available since the
+   * `style` prop is passed to the container element, but you probably shouldn't
+   * really style this element anyways.
+   *
+   * @since 2.2.0
+   */
+  inputStyle?: CSSProperties;
+
+  /**
+   * An optional `className` to provide to the invisible `<input>` element that
+   * is used to toggle the checked state. This prop does not have many uses and
+   * is really just provided since the `className` is passed to the container
+   * element instead of the `<input>`. However, this can be used to update the
+   * icon styles if needed using the `:checked` state:
+   *
+   * ```scss
+   * .custom-toggle-icon {
+   *   // styles
+   * }
+   *
+   * .custom-input:checked + .custom-toggle-icon {
+   *   // custom checked styles
+   * }
+   * ```
+   *
+   * @since 2.2.0
+   */
+  inputClassName?: string;
+
   /**
    * Boolean if the icon's overlay should be disabled. The way the Checkbox and
    * Radio input elements work is by applying different opacity to the
@@ -148,6 +179,8 @@ const InputToggle = forwardRef<HTMLInputElement, Props>(function InputToggle(
     iconClassName,
     toggleStyle,
     toggleClassName: propToggleClassName,
+    inputStyle,
+    inputClassName,
     icon,
     onFocus: propOnFocus,
     onBlur: propOnBlur,
@@ -224,10 +257,11 @@ const InputToggle = forwardRef<HTMLInputElement, Props>(function InputToggle(
           {...props}
           {...handlers}
           ref={ref}
+          style={inputStyle}
           disabled={disabled}
           onFocus={onFocus}
           onBlur={onBlur}
-          className={block("input")}
+          className={cn(block("input"), inputClassName)}
         />
         <span
           style={iconStyle}

packages/form/src/toggle/__tests__/InputToggle.tsx

@@ -15,4 +15,34 @@ describe("InputToggle", () => {
     rerender(<InputToggle {...props} type="checkbox" />);
     expect(container).toMatchSnapshot();
   });
+
+  it("should correctly pass the inputStyle and inputClassName to the invisible input element", () => {
+    const props = {
+      id: "toggle",
+      style: { color: "orange" },
+      className: "custom-container",
+      inputStyle: { color: "red" },
+      inputClassName: "custom-input",
+    };
+
+    const { container, rerender, getByRole } = render(
+      <InputToggle type="checkbox" {...props} />
+    );
+
+    const toggleContainer = container.firstElementChild as HTMLDivElement;
+    expect(toggleContainer.style.color).toBe("orange");
+    expect(toggleContainer.className).toContain(props.className);
+    const checkbox = getByRole("checkbox");
+    expect(checkbox.style.color).toBe("red");
+    expect(checkbox.className).toContain(props.inputClassName);
+    expect(container).toMatchSnapshot();
+
+    rerender(<InputToggle type="radio" value="a" {...props} />);
+    const radio = getByRole("radio");
+    expect(toggleContainer.style.color).toBe("orange");
+    expect(toggleContainer.className).toContain(props.className);
+    expect(radio.style.color).toBe("red");
+    expect(radio.className).toContain(props.inputClassName);
+    expect(container).toMatchSnapshot();
+  });
 });

packages/form/src/toggle/__tests__/__snapshots__/InputToggle.tsx.snap

@@ -1,5 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`InputToggle should correctly pass the inputStyle and inputClassName to the invisible input element 1`] = `
+<div>
+  <div
+    class="rmd-toggle-container custom-container"
+    style="color: orange;"
+  >
+    <span
+      class="rmd-toggle"
+    >
+      <input
+        class="rmd-toggle__input custom-input"
+        id="toggle"
+        style="color: red;"
+        type="checkbox"
+      />
+      <span
+        class="rmd-toggle__icon rmd-toggle__icon--overlay"
+      />
+      <span
+        class="rmd-ripple-container"
+      />
+    </span>
+  </div>
+</div>
+`;
+
+exports[`InputToggle should correctly pass the inputStyle and inputClassName to the invisible input element 2`] = `
+<div>
+  <div
+    class="rmd-toggle-container custom-container"
+    style="color: orange;"
+  >
+    <span
+      class="rmd-toggle"
+    >
+      <input
+        class="rmd-toggle__input custom-input"
+        id="toggle"
+        style="color: red;"
+        type="radio"
+        value="a"
+      />
+      <span
+        class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay"
+      />
+      <span
+        class="rmd-ripple-container"
+      />
+    </span>
+  </div>
+</div>
+`;
+
 exports[`InputToggle should render correctly 1`] = `
 <div>
   <div