Fix/checkbox glitch#669
Open
gab-az wants to merge 7 commits into
Open
Conversation
The inputs/checkbox root is `inline-flex` with the default `vertical-align: baseline`. While unchecked it has no in-flow children (the native input is `absolute`), so its baseline resolves to the box's bottom edge; on check, the `v-if` SVG becomes an in-flow flex child and the baseline jumps to the icon, shifting the whole control down ~3px on the line. Adding `align-middle` makes vertical placement independent of content, so the box stays put across checked/unchecked. No effect in flex layouts (e.g. the Disabled story), where vertical-align is ignored.
Re-authored .specs/checkbox.md from the real component (props/events/ slots/tokens/a11y now match what ships) and re-approved it (spec_version 3, fresh checksum) — the previous spec had drifted and its checksum no longer validated. Rewrote inputs/checkbox/checkbox.vue to the canonical styling pattern the spec's Constraints require: all utilities inline on the root with data-* driven variants, dropping the JS class presets (sharedClasses / checkedClasses / disabledClasses / iconClasses / rootClasses computed) and the interactive-states preset import. Behavior, tokens, and the align-middle fix for the on-toggle vertical jump are preserved; verified in Storybook (box top identical checked vs unchecked) and lint/spec compliance pass.
Rewrite Webkit/Inputs/Checkbox to the canonical story shape: inject the spec's Purpose + ## Usage block into docs.description.component, declare argTypes for every spec prop/event (grouped by table.category), and add a reactive v-model Template (local ref synced from args.modelValue, forwards update:modelValue so the field toggles and the Actions panel logs). Stories limited to the spec's list — Default + a Disabled composite showing the checked and unchecked states. No Figma refs, no argTypesRegex, no legacy .args form.
Merging dev removed the ./inputs/checkbox export and repointed ./checkbox at the webkit checkbox component (the old PrimeVue checkbox was deleted in dev's cleanup). The 3-way merge already corrected the story's actual import and title to dev's conventions; this fixes the two remaining string references — the embedded Usage snippet in the story's docs and the spec's Usage block — to @aziontech/webkit/checkbox, and refreshes the spec checksum.
| | `value` | `string` | `'undefined'` | no | value. | | ||
| | `binary` | `boolean` | `false` | no | binary. | | ||
| | `modelValue` | `unknown` | `undefined` | no | Bound value: a boolean in `binary` mode, otherwise the array/value the control reflects. | | ||
| | `value` | `unknown` | `undefined` | no | This checkbox's value, added to or removed from the model array when not `binary`. | |
Contributor
There was a problem hiding this comment.
After update Seems it's updating the type to any and writing 'undefined' inside quotes indicating undefined string.
Type string should default value with '' (empty string).
| | `readonly` | `boolean` | `false` | no | Prevents changes while the control stays focusable. | | ||
| | `inputId` | `string` | `undefined` | no | Forwarded to the native input `id`; pair with an external label's `for`. | | ||
| | `name` | `string` | `undefined` | no | HTML name for form submission. | | ||
| | `tabindex` | `number` | `'undefined'` | no | tabindex. | |
Contributor
There was a problem hiding this comment.
the type if not current default tabindex 0 should be configured to both types number|undefined but the case it is writing undefined inside string.
robsongajunior
requested changes
Jun 25, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
Fixes the Webkit checkbox toggle glitch and brings the component, its spec,
and its Storybook story into mutual conformance. Three commits, each scoped
to one concern.
1.
fix(webkit)— stop checkbox jumping vertically on toggleContext: the control jumped ~3px vertically every time it was checked/
unchecked.
<span>isinline-flexwith the defaultvertical-align: baseline. While unchecked it has no in-flow children(the native input is
absolute), so its baseline is the box's bottomedge; on check, the
v-ifSVG becomes an in-flow flex child and thebaseline jumps to the icon — shifting the box down on the line.
align-middleon the root makes vertical placement independentof content. No effect in flex layouts (e.g. the Disabled row), where
vertical-alignis ignored.topis identical checked vs unchecked.Files:
packages/webkit/src/components/inputs/checkbox/checkbox.vue2.
refactor(webkit)— spec conformance (re-author/approve spec + rewrite component)Context:
.specs/checkbox.mdhad drifted from the shipped component andits checksum no longer validated, so it could not drive
/component-create.a11y now match what ships), bumped
spec_version2 → 3, and re-approvedit with a fresh, valid checksum.
Constraints require: all utilities inline on the root, variants via
data-*, dropping the JS class presets (sharedClasses/checkedClasses/
disabledClasses/iconClasses/rootClasses = computed) and theinteractive-statespreset import.align-middlefix are preserved.validate-spec-compliancepasses (props/events/slots match1-to-1);
pnpm --filter webkit lintclean.Files:
.specs/checkbox.md,packages/webkit/src/components/inputs/checkbox/checkbox.vue3.
docs(storybook)— rebuild checkbox story per storybook-write specContext: the story panel and code examples were out of date with the
component.
docs.description.componentnow injects the spec's Purpose +## Usageblock verbatim, so the Docs code example matches the real API.
argTypesfor every prop + theupdate:modelValueevent, grouped bytable.category.Template(localrefsynced fromargs.modelValue,forwards
update:modelValue) so the panel checkbox actually toggles andthe Actions panel logs changes.
checked and unchecked.
argTypesRegex, no legacy.argsform.Files:
apps/storybook/src/stories/webkit/inputs/Checkbox.stories.js