Skip to content
Permalink
Browse files
feat(form): Added props to style Checkbox and Radio input element
  • Loading branch information
mlaursen committed Aug 7, 2020
1 parent 437af72 commit b6d23186b7355bacc198d5187d50c10a7186f4ca
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 1 deletion.
@@ -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}
@@ -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();
});
});
@@ -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

0 comments on commit b6d2318

Please sign in to comment.