diff --git a/core/scss/ui/forms/_form-stepper.scss b/core/scss/ui/forms/_form-stepper.scss index 478228eea..a4c28b17e 100644 --- a/core/scss/ui/forms/_form-stepper.scss +++ b/core/scss/ui/forms/_form-stepper.scss @@ -130,6 +130,13 @@ Stepper (number input with buttons) &:focus-within { outline-color: map.get($data, 'focus-ring-color'); } + + // The box sits between the field and its feedback text, so the + // `.is-invalid ~ .invalid-feedback` rule has to be repeated from here. + ~ .#{$state}-feedback, + ~ .#{$state}-tooltip { + display: block; + } } } } diff --git a/docs/content/ui/forms/stepper.mdx b/docs/content/ui/forms/stepper.mdx index 7c30ac756..ac74cedb5 100644 --- a/docs/content/ui/forms/stepper.mdx +++ b/docs/content/ui/forms/stepper.mdx @@ -89,7 +89,32 @@ Add `disabled` or `readonly` to the input; both buttons follow. ### Validation -Add `.is-valid` or `.is-invalid` to the input, the same way you would on any `.form-control`. The field is too narrow for the validation icon, so only the border changes colour. +Add `.is-valid` or `.is-invalid` to the input, the same way you would on any `.form-control`. The field is too narrow for the validation icon, so only the border changes colour. A `.valid-feedback` or `.invalid-feedback` placed right after the input still shows, even though the plugin puts its box between them. + + +
+ +
In stock, ships today.
+
+
+ +
Only 5 pieces left.
+
+ + +With a `type="number"` input the browser validates `required` itself (the plugin keeps the value inside `min` and `max` anyway), so a `.was-validated` form colours the box without any class on the input. + + +
+
+ + +
Pick the number of seats.
+
+
+ ### Custom buttons diff --git a/preview/pages/stepper.astro b/preview/pages/stepper.astro index 8dacb6045..696aec3a9 100644 --- a/preview/pages/stepper.astro +++ b/preview/pages/stepper.astro @@ -118,10 +118,16 @@ const cart = [ Validation - Add .is-valid or .is-invalid to the input, like on any .form-control. -
- - + Add .is-valid or .is-invalid to the input, like on any .form-control; the feedback text after it still shows. +
+
+ +
In stock, ships today.
+
+
+ +
Only 5 pieces left.
+
diff --git a/screenshots/pages/stepper.astro b/screenshots/pages/stepper.astro index 88679d9f7..00cc2e111 100644 --- a/screenshots/pages/stepper.astro +++ b/screenshots/pages/stepper.astro @@ -1,15 +1,53 @@ --- -// Stepper on its own: a quantity field between its two buttons, with the -// cursor resting on the increase button. The value sits below the maximum, so -// both buttons stay enabled and the picture shows the control in its normal -// state rather than at a bound. +// Stepper where it is used most: a quantity per line of a small cart. Three +// lines, each with its own stepper; the cursor rests on the increase button of +// the middle one, and the last line sits at its stock limit so its increase +// button is disabled - the state the plugin sets, not a faked one. +// +// The capture never hovers, so the middle line is written by hand (the +// custom-buttons markup) and its increase button gets the hover background +// through the `--btn-bg` token, the same colour a real hover paints. import ScreenshotLayout from '../layouts/ScreenshotLayout.astro' +import Card from '@ui/Card.astro' import Stepper from '@ui/Stepper.astro' + +const cart = [ + { name: 'Hex nut M8 DIN 934', code: 'Zinc plated', price: '$12.40', quantity: 2, max: 50 }, + { name: 'Lock nut M8 DIN 985', code: 'Stainless A2', price: '$28.90', quantity: 1, max: 20 }, + { name: 'Cap nut M8 DIN 1587', code: 'Brass', price: '$41.00', quantity: 3, max: 3 }, +] --- - -
- - -
+ + + + + { + cart.map((item, index) => ( + + + + + + )) + } + +
+
{item.name}
+
{item.code}
+ 		{item.price} +
+ {index === 1 ? ( +
+
+ ) : ( + + )} +
+
+