Refactor stepper input (#3976)

.changeset/polite-bags-act.md

@@ -0,0 +1,21 @@
+---
+"@salt-ds/lab": minor
+---
+
+## StepperInput updates
+
+- Added `bordered` prop for a full border style
+- Changed `StepperInputProps` to extend `div` props instead of `Input`, to align with other input components
+- Added an optional event to `onChange`, when triggered by synthetic event
+- Added more keyboard interactions, e.g. Shift + Up / Down, Home, End.
+- Replaced `block` with `stepBlock` prop, which now explicitly defines the value that is increment or decrement, not a multiplier of `step`.
+
+```tsx
+<StepperInput
+  stepBlock={100}
+  value={value}
+  onChange={(_event, value) => {
+    setValue(value);
+  }
+/>
+```

docs/components/ResponsiveContainer.tsx

@@ -31,7 +31,7 @@ export const ResponsiveContainer = ({ children }: { children?: ReactNode }) => {
           value={containerWidth[0]}
           max={maxUnits}
           min={10}
-          onChange={(nextValue) => setWidth([nextValue] as number[])}
+          onChange={(_event, nextValue) => setWidth([nextValue as number])}
         />
         <Slider
           className="StoryContainer-slider"
@@ -45,7 +45,7 @@ export const ResponsiveContainer = ({ children }: { children?: ReactNode }) => {
           value={containerHeight[0]}
           max={maxUnits}
           min={10}
-          onChange={(nextValue) => setHeight([nextValue] as number[])}
+          onChange={(_event, nextValue) => setHeight([nextValue as number])}
         />
         <Slider
           className="StoryContainer-slider"

packages/lab/src/__tests__/__e2e__/stepper-input/StepperInput.accessibility.cy.tsx

@@ -1,10 +1,16 @@
-import { FormField, FormFieldHelperText, FormFieldLabel } from "@salt-ds/core";
-import { StepperInput } from "@salt-ds/lab";
+import * as stepperInputStories from "@stories/stepper-input/stepper-input.stories";
+import { composeStories } from "@storybook/react";
+import { checkAccessibility } from "../../../../../../cypress/tests/checkAccessibility";
+
+const composedStories = composeStories(stepperInputStories);
+const { Default } = composedStories;
 
 describe("Stepper Input - Accessibility", () => {
+  checkAccessibility(composedStories);
+
   it("sets the correct default ARIA attributes on input", () => {
     cy.mount(
-      <StepperInput
+      <Default
         decimalPlaces={2}
         defaultValue={-20.1}
         max={250.23}
@@ -19,28 +25,22 @@ describe("Stepper Input - Accessibility", () => {
   });
 
   it("has the correct labelling when wrapped in a `FormField`", () => {
-    cy.mount(
-      <FormField>
-        <FormFieldLabel>Stepper Input</FormFieldLabel>
-        <StepperInput defaultValue={-10} min={0} />
-        <FormFieldHelperText>Please enter a value</FormFieldHelperText>
-      </FormField>,
-    );
+    cy.mount(<Default defaultValue={-10} min={0} />);
 
     cy.findByRole("spinbutton").should("have.accessibleName", "Stepper Input");
     cy.findByRole("spinbutton").should(
       "have.accessibleDescription",
-      "Please enter a value",
+      "Please enter a number",
     );
   });
 
   it("sets `aria-invalid=false` on input when the value is out of range", () => {
-    cy.mount(<StepperInput defaultValue={-10} min={0} />);
+    cy.mount(<Default defaultValue={-10} min={0} />);
     cy.findByRole("spinbutton").should("have.attr", "aria-invalid", "true");
   });
 
   it("sets the correct default ARIA attributes on the increment/decrement buttons", () => {
-    cy.mount(<StepperInput />);
+    cy.mount(<Default />);
     cy.findByLabelText("increment value")
       .should("have.attr", "tabindex", "-1")
       .and("have.attr", "aria-hidden", "true");