mirror of
https://github.com/chakra-ui/chakra-ui.git
synced 2026-09-14 16:43:45 +08:00
Lope
96bc206b0a
* docs(components): add examples for various component props Add usage examples demonstrating: - collapsible: activity hide mode - dialog/drawer: autofocus data attributes - listbox: keyboard priority - number-input: keyboard steps - pagination: custom page text - pin-input: auto submit and sanitize value - select: virtualized list - slider: large step and custom marker labels - steps: skippable step - tags-input: allow duplicates and sanitize value * docs(components): tighten the new prop examples Keeps the examples that teach something the prop name does not, and adds Storybook coverage for them. Removed: - steps-with-skippable-step. `isStepSkippable` only overrides failed validation, and `isStepValid` returned true for the step marked skippable, so the prop changed nothing. It was also close to a copy of steps-with-validation. - number-input-with-keyboard-steps and slider-with-large-step, both a numeric prop whose effect the surrounding sentence already states. - tags-input-with-duplicates. A boolean that does what its name says, on a page that already carries twenty-two examples. Reverted: - dialog and drawer keep `initialFocusEl`. `data-autofocus` is worth documenting but not by rewriting a working example, and the `data-no-autofocus` in that version was inert: it is only read when nothing matches `[data-autofocus]`. The docs now describe the real precedence. - pagination-with-custom-format, which had switched the sample string to Persian for reasons unrelated to demonstrating `format`. Fixed: - tags-input-with-sanitized-value put its helper text 825px to the right of the field, because `ms="auto"` acts as a flex spacer inside the root. - listbox copy claimed arrow keys respond to `keyboardPriority`. They are gated behind `isGridCollection`, so for this collection only Home and End do. Verified in a browser: Home and End move the highlight and leave the caret alone, ArrowLeft moves the caret. - collapsible-with-hide-mode showed `display-none` beside `activity`, but `display-none` is the default. One panel is enough, and the docs now note that `activity` needs React 19.2 and silently falls back below that. --------- Co-authored-by: Saleh Ghotbani <saleh313ghotbani@gmail.com> Co-authored-by: Segun Adebayo <joseshegs@gmail.com>