fix: appearance of disabled inputs (#165)

- disabled appearance of TextInput, PasswordInput and InputMenu - update website examples to demonstrate various disabled components
ninja · Jan 26, 2022 · 6458cff · 6458cff
1 parent 59c62da
commit 6458cff
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 6 deletions.
diff --git a/src/docs/pages/examples/input-menu/index.tsx b/src/docs/pages/examples/input-menu/index.tsx
@@ -6,14 +6,15 @@ import { InputMenuState, options, useInputMenuState } from "./state";
 
 export function InputMenuExample() {
 	const state = useInputMenuState();
-	const [{ appearance, error, flex, helper, leadingIcon }] = state;
+	const [{ appearance, disabled, error, flex, helper, leadingIcon }] = state;
 
 	return (
 		<Card appearance="elevated" id="input-menu" title="InputMenu">
 			<section>
 				<section className={styles.center}>
 					<InputMenu
 						appearance={appearance}
+						disabled={disabled}
 						error={error && "Error message"}
 						flex={flex}
 						helper={helper ? "Helper message" : undefined}

diff --git a/src/docs/pages/examples/input-menu/state.tsx b/src/docs/pages/examples/input-menu/state.tsx
@@ -5,6 +5,7 @@ type Appearance = "filled" | "outlined";
 
 type InputMenuProps = {
 	appearance: Appearance;
+	disabled: boolean;
 	error: boolean;
 	flex: boolean;
 	helper: boolean;
@@ -14,6 +15,7 @@ type InputMenuProps = {
 export function useInputMenuState() {
 	return useState<InputMenuProps>({
 		appearance: "filled",
+		disabled: false,
 		error: false,
 		flex: true,
 		helper: false,
@@ -74,6 +76,12 @@ export function InputMenuState({
 						setState((state) => ({ ...state, error: !state.error }))
 					}
 				/>
+				<Checkbox
+					label="Disabled"
+					onClick={() =>
+						setState((state) => ({ ...state, disabled: !state.disabled }))
+					}
+				/>
 			</form>
 		</aside>
 	);

diff --git a/src/docs/pages/examples/password-input/index.tsx b/src/docs/pages/examples/password-input/index.tsx
@@ -8,7 +8,7 @@ import { PasswordInputState, usePasswordInputState } from "./state";
 export function PasswordInputExample() {
 	const ref = useRef<HTMLInputElement>(null);
 	const state = usePasswordInputState();
-	const [{ appearance, error, flex, helper, leadingIcon }] = state;
+	const [{ appearance, disabled, error, flex, helper, leadingIcon }] = state;
 
 	return (
 		<Card appearance="elevated" id="password-input" title="PasswordInput">
@@ -17,6 +17,7 @@ export function PasswordInputExample() {
 					<form autoComplete="off">
 						<PasswordInput
 							appearance={appearance}
+							disabled={disabled}
 							error={error && "Invalid password"}
 							flex={flex}
 							helper={helper ? "8 characters minimum" : undefined}

diff --git a/src/docs/pages/examples/password-input/state.tsx b/src/docs/pages/examples/password-input/state.tsx
@@ -3,6 +3,7 @@ import { Dispatch, SetStateAction, useState } from "react";
 
 type PasswordInputProps = {
 	appearance: "filled" | "outlined";
+	disabled: boolean;
 	error: boolean;
 	flex: boolean;
 	helper: boolean;
@@ -12,6 +13,7 @@ type PasswordInputProps = {
 export function usePasswordInputState() {
 	return useState<PasswordInputProps>({
 		appearance: "filled",
+		disabled: false,
 		error: false,
 		flex: true,
 		helper: false,
@@ -72,6 +74,12 @@ export function PasswordInputState({
 						setState((state) => ({ ...state, error: !state.error }))
 					}
 				/>
+				<Checkbox
+					label="Disabled"
+					onClick={() =>
+						setState((state) => ({ ...state, disabled: !state.disabled }))
+					}
+				/>
 			</form>
 		</aside>
 	);

diff --git a/src/docs/pages/examples/radioset/index.tsx b/src/docs/pages/examples/radioset/index.tsx
@@ -5,7 +5,7 @@ import { RadiosetState, useRadiosetState } from "./state";
 
 export function RadiosetExample() {
 	const state = useRadiosetState();
-	const [{ disabled }] = state;
+	const [{ disabled, disabledOption }] = state;
 
 	return (
 		<Card appearance="elevated" id="radioset" title="RadioSet">
@@ -25,7 +25,11 @@ export function RadiosetExample() {
 								label: <span>Item Two</span>,
 								value: "item-two",
 							},
-							{ disabled: true, label: "Item Three", value: "item-three" },
+							{
+								disabled: disabledOption,
+								label: "Item Three",
+								value: "item-three",
+							},
 						]}
 					/>
 				</section>

diff --git a/src/docs/pages/examples/radioset/state.tsx b/src/docs/pages/examples/radioset/state.tsx
@@ -3,11 +3,13 @@ import { Dispatch, SetStateAction, useState } from "react";
 
 type RadiosetProps = {
 	disabled: boolean;
+	disabledOption: boolean;
 };
 
 export function useRadiosetState() {
 	return useState<RadiosetProps>({
 		disabled: false,
+		disabledOption: false,
 	});
 }
 
@@ -19,6 +21,15 @@ export function RadiosetState({
 	return (
 		<aside>
 			<form>
+				<Checkbox
+					label="Disabled option"
+					onClick={() =>
+						setState((state) => ({
+							...state,
+							disabledOption: !state.disabledOption,
+						}))
+					}
+				/>
 				<Checkbox
 					label="Disabled"
 					onClick={() =>

diff --git a/src/docs/pages/examples/text-input/index.tsx b/src/docs/pages/examples/text-input/index.tsx
@@ -8,8 +8,9 @@ import { TextInputState, useTextInputState } from "./state";
 export function TextInputExample() {
 	const ref = useRef<HTMLInputElement>(null);
 	const state = useTextInputState();
-	const [{ appearance, error, flex, helper, leadingIcon, trailingIcon }] =
-		state;
+	const [
+		{ appearance, disabled, error, flex, helper, leadingIcon, trailingIcon },
+	] = state;
 
 	return (
 		<Card appearance="elevated" id="text-input" title="TextInput">
@@ -18,6 +19,7 @@ export function TextInputExample() {
 					<form autoComplete="off">
 						<TextInput
 							appearance={appearance}
+							disabled={disabled}
 							error={error && "Error message"}
 							flex={flex}
 							helper={helper ? "Helper message" : undefined}

diff --git a/src/docs/pages/examples/text-input/state.tsx b/src/docs/pages/examples/text-input/state.tsx
@@ -3,6 +3,7 @@ import { Dispatch, SetStateAction, useState } from "react";
 
 type TextInputProps = {
 	appearance: "filled" | "outlined";
+	disabled: boolean;
 	error: boolean;
 	flex: boolean;
 	helper: boolean;
@@ -13,6 +14,7 @@ type TextInputProps = {
 export function useTextInputState() {
 	return useState<TextInputProps>({
 		appearance: "filled",
+		disabled: false,
 		error: false,
 		flex: true,
 		helper: false,
@@ -83,6 +85,12 @@ export function TextInputState({
 						setState((state) => ({ ...state, error: !state.error }))
 					}
 				/>
+				<Checkbox
+					label="Disabled"
+					onClick={() =>
+						setState((state) => ({ ...state, disabled: !state.disabled }))
+					}
+				/>
 			</form>
 		</aside>
 	);

diff --git a/src/lib/components/input/index.ts b/src/lib/components/input/index.ts
@@ -20,13 +20,15 @@ export type InputProps = {
 
 export function useClassName({
 	appearance = "filled",
+	disabled,
 	flex,
 	error,
 	leadingIcon,
 	override,
 	trailingIcon,
 }: {
 	appearance?: Appearance;
+	disabled?: boolean;
 	error?: ReactNode;
 	flex?: boolean;
 	leadingIcon?: ReactNode;
@@ -42,6 +44,7 @@ export function useClassName({
 		styles[appearance],
 		trailingIcon ? styles.trailingIcon : undefined,
 		typography.labelLarge,
+		disabled ? styles.disabled : undefined,
 	]
 		.join(" ")
 		.trim();

diff --git a/src/lib/components/input/input.module.css b/src/lib/components/input/input.module.css
@@ -204,6 +204,18 @@
 	color: var(--md-color-error);
 }
 
+.field.disabled {
+	opacity: 0.38;
+}
+
+.field.filled.disabled > .row > .input {
+	box-shadow: 0 0.1rem 0 0 var(--md-color-outline);
+}
+
+.field.outlined.disabled > .row > .input {
+	box-shadow: 0 0 0 0.1rem var(--md-color-outline);
+}
+
 @media screen and (min-width: 600px) {
 	.input {
 		font-size: 1.4rem; /* follow Material 3 spec at desktop width */

diff --git a/src/lib/components/input/text.tsx b/src/lib/components/input/text.tsx
@@ -12,6 +12,7 @@ export const TextInput = forwardRef<
 		"aria-expanded": ariaExpanded,
 		"aria-invalid": ariaInvalid,
 		className: override,
+		disabled,
 		error,
 		flex,
 		helper,
@@ -28,6 +29,7 @@ export const TextInput = forwardRef<
 ) {
 	const className = useClassName({
 		appearance,
+		disabled,
 		error,
 		flex,
 		leadingIcon,
@@ -43,6 +45,7 @@ export const TextInput = forwardRef<
 					{...props}
 					aria-invalid={ariaInvalid || !!error}
 					className={styles.input}
+					disabled={disabled}
 					id={id}
 					placeholder={
 						placeholder || typeof label === "string"