diff --git a/.changeset/good-fishes-shout.md b/.changeset/good-fishes-shout.md new file mode 100644 index 00000000000..ab7e4c694c5 --- /dev/null +++ b/.changeset/good-fishes-shout.md @@ -0,0 +1,12 @@ +--- +"@salt-ds/core": patch +--- + +Fixed data-\* attributes not allowed on pass through props. Closes #3797. + +- `Checkbox.inputProps` +- `Input.inputProps` +- `MultilineInput.textAreaProps` +- `PillInput.inputProps` +- `RadioButton.inputProps` +- `Switch.inputProps` diff --git a/packages/core/src/__tests__/__e2e__/checkbox/Checkbox.cy.tsx b/packages/core/src/__tests__/__e2e__/checkbox/Checkbox.cy.tsx index 969608bd3e9..51770ed72a5 100644 --- a/packages/core/src/__tests__/__e2e__/checkbox/Checkbox.cy.tsx +++ b/packages/core/src/__tests__/__e2e__/checkbox/Checkbox.cy.tsx @@ -1,6 +1,13 @@ import { Checkbox } from "@salt-ds/core"; describe("GIVEN a Checkbox", () => { + it("SHOULD support data attribute on inputProps", () => { + cy.mount( + , + ); + cy.findByTestId("customInput").should("be.checked"); + }); + describe("WHEN in an indeterminate state", () => { it("THEN should have indeterminate set to true", () => { cy.mount(); diff --git a/packages/core/src/__tests__/__e2e__/input/Input.cy.tsx b/packages/core/src/__tests__/__e2e__/input/Input.cy.tsx index 770cc5dbed1..41c08b90ce9 100644 --- a/packages/core/src/__tests__/__e2e__/input/Input.cy.tsx +++ b/packages/core/src/__tests__/__e2e__/input/Input.cy.tsx @@ -7,6 +7,13 @@ describe("GIVEN an Input", () => { cy.checkAxeComponent(); }); + it("SHOULD support data attribute on inputProps", () => { + cy.mount( + , + ); + cy.findByTestId("customInput").should("have.value", "value"); + }); + describe("WHEN cy.mounted as an uncontrolled component", () => { it("THEN it should cy.mount with the specified defaultValue", () => { cy.mount(); diff --git a/packages/core/src/__tests__/__e2e__/multiline-input/MultilineInput.cy.tsx b/packages/core/src/__tests__/__e2e__/multiline-input/MultilineInput.cy.tsx index 8e8b832d74d..9231f943ef7 100644 --- a/packages/core/src/__tests__/__e2e__/multiline-input/MultilineInput.cy.tsx +++ b/packages/core/src/__tests__/__e2e__/multiline-input/MultilineInput.cy.tsx @@ -11,6 +11,16 @@ const { } = composeStories(multilineInputStories); describe("GIVEN an MultilineInput", () => { + it("SHOULD support data attribute on textAreaProps", () => { + cy.mount( + , + ); + cy.findByTestId("customInput").should("have.value", "value"); + }); + it("should allow a default value to be set", () => { const changeSpy = cy.stub().as("changeSpy"); const handleChange = (event: ChangeEvent) => { diff --git a/packages/core/src/__tests__/__e2e__/radio-button/RadioButton.cy.tsx b/packages/core/src/__tests__/__e2e__/radio-button/RadioButton.cy.tsx index 8b51b952360..041cd9d85f9 100644 --- a/packages/core/src/__tests__/__e2e__/radio-button/RadioButton.cy.tsx +++ b/packages/core/src/__tests__/__e2e__/radio-button/RadioButton.cy.tsx @@ -1,6 +1,16 @@ import { RadioButton } from "@salt-ds/core"; describe("GIVEN a RadioButton component", () => { + it("SHOULD support data attribute on inputProps", () => { + cy.mount( + , + ); + cy.findByTestId("customInput").should("have.value", "value"); + }); + describe("WHEN RadioButton is given a value", () => { it("SHOULD render with the specified value", () => { cy.mount(); diff --git a/packages/core/src/__tests__/__e2e__/switch/Switch.cy.tsx b/packages/core/src/__tests__/__e2e__/switch/Switch.cy.tsx index cbd8aabd2f1..daf240ae30e 100644 --- a/packages/core/src/__tests__/__e2e__/switch/Switch.cy.tsx +++ b/packages/core/src/__tests__/__e2e__/switch/Switch.cy.tsx @@ -14,6 +14,11 @@ function ControlledSwitch({ onChange, disabled }: SwitchProps) { } describe("GIVEN a Switch", () => { + it("SHOULD support data attribute on inputProps", () => { + cy.mount(); + cy.findByTestId("customInput").should("be.checked"); + }); + describe("WHEN using Tab to navigate", () => { it("THEN should be focusable", () => { cy.mount(); diff --git a/packages/core/src/checkbox/Checkbox.tsx b/packages/core/src/checkbox/Checkbox.tsx index 9b5fc89e8da..426810ff2ee 100644 --- a/packages/core/src/checkbox/Checkbox.tsx +++ b/packages/core/src/checkbox/Checkbox.tsx @@ -11,6 +11,7 @@ import { } from "react"; import { useFormFieldProps } from "../form-field-context"; import type { AdornmentValidationStatus } from "../status-adornment"; +import type { DataAttributes } from "../types"; import { makePrefixer, useControlled, @@ -52,7 +53,7 @@ export interface CheckboxProps /** * Properties applied to the input element. */ - inputProps?: Partial>; + inputProps?: Partial> & DataAttributes; /** * The label to be shown next to the checkbox. */ diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 43ce1577a44..21518f52394 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -61,3 +61,4 @@ export * from "./toggle-button-group"; export * from "./tooltip"; export * from "./utils"; export * from "./viewport"; +export * from "./types"; diff --git a/packages/core/src/input/Input.tsx b/packages/core/src/input/Input.tsx index fec8d327788..df4bf5ad83d 100644 --- a/packages/core/src/input/Input.tsx +++ b/packages/core/src/input/Input.tsx @@ -13,6 +13,7 @@ import { } from "react"; import { useFormFieldProps } from "../form-field-context"; import { StatusAdornment } from "../status-adornment"; +import type { DataAttributes } from "../types"; import { makePrefixer, useControlled } from "../utils"; import inputCss from "./Input.css"; @@ -37,7 +38,7 @@ export interface InputProps /** * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. */ - inputProps?: InputHTMLAttributes; + inputProps?: Partial> & DataAttributes; /** * Optional ref for the input component */ diff --git a/packages/core/src/multiline-input/MultilineInput.tsx b/packages/core/src/multiline-input/MultilineInput.tsx index ad114b19e49..d013e7ee45c 100644 --- a/packages/core/src/multiline-input/MultilineInput.tsx +++ b/packages/core/src/multiline-input/MultilineInput.tsx @@ -16,6 +16,7 @@ import { } from "react"; import { useFormFieldProps } from "../form-field-context"; import { StatusAdornment } from "../status-adornment"; +import type { DataAttributes } from "../types"; import { makePrefixer, useControlled, useForkRef } from "../utils"; import multilineInputCss from "./MultilineInput.css"; @@ -51,7 +52,8 @@ export interface MultilineInputProps /** * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element. */ - textAreaProps?: TextareaHTMLAttributes; + textAreaProps?: Partial> & + DataAttributes; /** * Optional ref for the textarea component */ diff --git a/packages/core/src/pill-input/PillInput.tsx b/packages/core/src/pill-input/PillInput.tsx index 42e89c4a0d1..d2a9213935a 100644 --- a/packages/core/src/pill-input/PillInput.tsx +++ b/packages/core/src/pill-input/PillInput.tsx @@ -20,6 +20,7 @@ import { import { useFormFieldProps } from "../form-field-context"; import { Pill } from "../pill"; import { StatusAdornment } from "../status-adornment"; +import type { DataAttributes } from "../types"; import { makePrefixer, useControlled, useForkRef, useId } from "../utils"; import { useTruncatePills } from "./useTruncatePills"; @@ -45,7 +46,7 @@ export interface PillInputProps /** * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. */ - inputProps?: InputHTMLAttributes; + inputProps?: Partial> & DataAttributes; /** * Optional ref for the input component */ diff --git a/packages/core/src/radio-button/RadioButton.tsx b/packages/core/src/radio-button/RadioButton.tsx index 133e121301a..7103a92e55b 100644 --- a/packages/core/src/radio-button/RadioButton.tsx +++ b/packages/core/src/radio-button/RadioButton.tsx @@ -1,3 +1,5 @@ +import { useComponentCssInjection } from "@salt-ds/styles"; +import { useWindow } from "@salt-ds/window"; import { clsx } from "clsx"; import { type ChangeEventHandler, @@ -7,14 +9,13 @@ import { type ReactNode, forwardRef, } from "react"; +import { useFormFieldProps } from "../form-field-context"; +import type { AdornmentValidationStatus } from "../status-adornment"; +import type { DataAttributes } from "../types"; import { makePrefixer, useControlled } from "../utils"; import { RadioButtonIcon } from "./RadioButtonIcon"; import { useRadioGroup } from "./internal/useRadioGroup"; -import { useComponentCssInjection } from "@salt-ds/styles"; -import { useWindow } from "@salt-ds/window"; -import { useFormFieldProps } from "../form-field-context"; -import type { AdornmentValidationStatus } from "../status-adornment"; import radioButtonCss from "./RadioButton.css"; const withBaseName = makePrefixer("saltRadioButton"); @@ -40,7 +41,7 @@ export interface RadioButtonProps /** * Props to be passed to the radio input */ - inputProps?: Partial>; + inputProps?: Partial> & DataAttributes; /** * The label to be shown next to the radio icon */ diff --git a/packages/core/src/switch/Switch.tsx b/packages/core/src/switch/Switch.tsx index 9b55e3a24f4..901deb6d68b 100644 --- a/packages/core/src/switch/Switch.tsx +++ b/packages/core/src/switch/Switch.tsx @@ -1,3 +1,8 @@ +import { + type IconProps, + SuccessSmallSolidIcon, + SuccessSolidIcon, +} from "@salt-ds/icons"; import { useComponentCssInjection } from "@salt-ds/styles"; import { useWindow } from "@salt-ds/window"; import { clsx } from "clsx"; @@ -10,13 +15,9 @@ import { } from "react"; import { useFormFieldProps } from "../form-field-context"; import { useDensity } from "../salt-provider"; +import type { DataAttributes } from "../types"; import { makePrefixer, useControlled } from "../utils"; -import { - type IconProps, - SuccessSmallSolidIcon, - SuccessSolidIcon, -} from "@salt-ds/icons"; import switchCss from "./Switch.css"; export interface SwitchProps @@ -40,7 +41,7 @@ export interface SwitchProps /** * Properties applied to the input element. */ - inputProps?: Partial>; + inputProps?: Partial> & DataAttributes; /** * The label to be shown next to the checkbox. */ diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts new file mode 100644 index 00000000000..bd9b3852e46 --- /dev/null +++ b/packages/core/src/types.ts @@ -0,0 +1,8 @@ +/** + * Support data-* attributes for pass through props, e.g. `Input.inputProps`. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-%2A + */ +export type DataAttributes = { + [dataAttribute: `data-${string}`]: string; +};