[ENG-46485] feat(webkit): add ProgressBar (feedback)#687
Open
gab-az wants to merge 34 commits into
Open
Conversation
* feat: add input-textarea and field-textarea Introduces two new components under the inputs category: - InputTextarea — multi-line text control with optional iconLeft / iconRight slots, focus ring aligned with input-text/dropdown, and required (warning) / invalid (danger) border tones. - FieldTextarea — labeled wrapper composing Label + InputTextarea + helper text, with helper color swapping to warning on required and danger on invalid. Storybook stories follow the InputSelect pattern (code panel open by default, hand-crafted source snippets, Usage block in autodocs). * fix: access input-textarea slots via bracket notation to satisfy TS4111 Index-signature slot keys from defineSlots cannot be read via dot notation under noUncheckedIndexedAccess; switch to bracket access and drop the in-template $slots.iconRight dot access in favor of the existing hasIconRight computed. * fix: align input-textarea and field-textarea subpath exports * fix: rename Input Textarea story title to Textarea * refactor: rename InputTextarea component to Textarea
…#662) Skeleton placeholder (shape/circle) with pulse + reduced-motion fallback. Story under stories/components, direct `@aziontech/webkit/skeleton` export (review by robsongajunior), and a validate-tokens lookbehind so the sanctioned `var(--bg-surface-overlay)` token is not flagged as a PrimeFlex utility.
…#631) * feat: add Copy Button and Tooltip components Introduce copy-button and tooltip with Storybook coverage, icon swap transitions on IconButton, and package exports for consumers. * fix: icon-button/tooltip imports and storybook category * feat(copy-button): integrate Tooltip and stabilize icon swap motion CopyButton uses Tooltip for hover/focus and post-copy feedback with outlined as default; IconButton and Tooltip presets avoid layout shift and align motion with theme tokens. * docs(tooltip): add LongContent story and use body-xs typography Replace the Disabled story with a long-content example on a small transparent info IconButton, and align tooltip panel text with body-xs. --------- Co-authored-by: Robson Júnior <robson.ga.junior@gmail.com>
…#670) * chore(commands): add /open-pr and /create-branch PR-workflow commands Two slash commands encoding our PR flow: /create-branch (branch off dev, prompts for the related issue) and /open-pr (ensure dev-based branch, commit by context, push, open PR to dev). Encodes our conventions: base dev, issue in branch name, split shared docs into their own PR, no attribution footers. * [NO-ISSUE] chore: refine pr-workflow commands (diff analysis, optional issue, versioning) Both commands now analyze the diff to pick the Conventional Commit type/scope (driving the semantic-release bump), prompt for the related issue as optional ([NO-ISSUE] fallback), keep one commit per scope, detect breaking changes, and never bypass commitlint. Sourced from CONTRIBUTING.md + commitlint.config.js. * [NO-ISSUE] chore(rules): add git-workflow rule pointing to /open-pr and /create-branch Auto-loaded rule so PR/branch requests in natural language route to the /open-pr and /create-branch flows instead of ad-hoc git steps. * [NO-ISSUE] chore(repo): enumerate perf/test/ci/revert in every .releaserc to match commitlint * [NO-ISSUE] docs(repo): add release-types consistency rule --------- Co-authored-by: ROBSON.JUNIOR <robsongajunior@users.noreply.github.com>
* [ENG-46314] feat(webkit): add Badge (content) Compact severity-coded count/short-value indicator (primary/secondary/success/ warning/danger/default; small/medium/large). Story under stories/components, direct `@aziontech/webkit/badge` export. The 'Show code' SFC detector regex is case-insensitive (/i) so CodeQL's bad-tag-filter alert is resolved. * [ENG-46314] fix(webkit): default Badge value prop to empty string, not undefined * [ENG-46314] refactor(webkit): simplify Badge severity validation with includes addresses review feedback — replaces the explicit severity if-chain with a validSeverities array + includes guard. --------- Co-authored-by: ROBSON.JUNIOR <robsongajunior@users.noreply.github.com>
* feat: add InputSelect composition Introduce `@aziontech/webkit/inputs/input-select` and its sub-components (`input-select-trigger`, `input-select-content`, `input-select-group`, `input-select-option`), composed via a shared injection key for context sharing without prop drilling. The composition pattern follows the shadcn-vue convention: the consumer controls the structure (`<InputSelect><InputSelectTrigger /><InputSelectContent> <InputSelectGroup><InputSelectOption /></InputSelectGroup></InputSelectContent></InputSelect>`), while the parent `InputSelect` owns selection state and exposes `modelValue` + `update:modelValue` for v-model binding. * fix: popup animation * fix: input-select type errors on aria attributes and emit values * feat: expose InputSelect sub-components as static properties and wrap options in ScrollArea * fix: avoid TS4023 on InputSelect by typing sub-component augmentation explicitly * refactor: rename input-select to select and flatten exports * style: prettier format renamed select files * refactor: collapse select to single subpath export --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: ROBSON.JUNIOR <robsongajunior@users.noreply.github.com>
… not undefined (#671) * [NO-ISSUE] chore(specs): default optional text props to empty string, not undefined Optional string props that hold renderable text now default to '' across the spec template, the spec-create / component-scaffold skills, and the scaffolder agent. Reserve undefined (unquoted) for props where absence differs from empty (open, modelValue, src); never the literal 'undefined'. Prevents the default-value issue raised in review of PR #646. * [NO-ISSUE] chore(specs): reject string-literal 'undefined' in spec Default cells Enforces the empty-string default convention documented earlier in this PR via spec-validate Step 3 plus a shared defaultCellIsStringUndefined helper and a unit test; status:implemented specs (checkbox/dropdown) are not re-validated so they stay green. --------- Co-authored-by: ROBSON.JUNIOR <robsongajunior@users.noreply.github.com>
* docs(webkit): codify Show code pattern + flat-import rule storybook-write skill: document the copy-paste-ready 'Show code' transform, now in the current repo format (stories under stories/components, title Components/<Category>/<Name>, direct `@aziontech/webkit/<name>` imports, /i on the SFC-detector regex). Adds .claude/rules/imports.md codifying the flat public export name (category lives in the folder + story title, not the import). * docs(webkit): translate imports rule blockquote to English --------- Co-authored-by: ROBSON.JUNIOR <robsongajunior@users.noreply.github.com>
Co-authored-by: ROBSON.JUNIOR <robsongajunior@users.noreply.github.com>
* [ENG-46310] feat(webkit): add Chip (inputs) Compact dismissible token (small/medium, optional removable button emitting `remove`). Story under stories/components, direct `@aziontech/webkit/chips` export. The 'Show code' SFC detector regex is case-insensitive (/i) so CodeQL's bad-tag-filter alert is resolved. * [ENG-46310] fix(webkit): default Chip label to empty string, not undefined * [ENG-46310] feat(webkit): animate Chip removal with Message-style fade-out --------- Co-authored-by: ROBSON.JUNIOR <robsongajunior@users.noreply.github.com>
…#666) Companion docs/rules for the composable Table (#ENG-46087): new compound-api.md rule (compound dot-notation API for composition components), the @tanstack/vue-table exception in dependencies.md, component-scaffold + _template updates. Export/import references flattened to the public flat name per .claude/rules/imports.md. Co-authored-by: ROBSON.JUNIOR <robsongajunior@users.noreply.github.com>
* feat: add HelperText input primitive Introduce `@aziontech/webkit/inputs/helper-text` — a small text element that renders auxiliary copy below a form field. The `kind` prop drives the visual tone: - `helper` (default): muted token, neutral copy. - `required`: warning-tone copy paired with the Required tag treatment. - `invalid`: danger-tone copy for validation errors; usually wired to `aria-describedby` on the input. - `disabled`: muted with a leading lock icon. The component is the helper line only — wrapping form-field components own the wiring of `aria-describedby` and the conditional rendering. * fix: adjust show code * fix: align helper-text subpath export * fix: default fallback value prop to empty string * fix: default tag icon prop to empty string * revert: scope value default change to label and helper-text only * fix: move HelperText story to Components/Inputs * chore: move HelperText story to components/inputs path --------- Co-authored-by: ROBSON.JUNIOR <robsongajunior@users.noreply.github.com>
* feat: add Label input primitive Introduce `@aziontech/webkit/inputs/label` — a thin `<label>` wrapper that renders the field text, supports a default slot, and appends a `Required` tag when the field is required. Wires `for` to the underlying input id so clicking the label focuses the control. The component is the label only — helper text, error messages, and the input itself live in sibling primitives composed by the form-field layer. * feat: add HelperText input primitive Introduce `@aziontech/webkit/inputs/helper-text` — a small text element that renders auxiliary copy below a form field. The `kind` prop drives the visual tone: - `helper` (default): muted token, neutral copy. - `required`: warning-tone copy paired with the Required tag treatment. - `invalid`: danger-tone copy for validation errors; usually wired to `aria-describedby` on the input. - `disabled`: muted with a leading lock icon. The component is the helper line only — wrapping form-field components own the wiring of `aria-describedby` and the conditional rendering. * feat: InputText v2 + FieldText composition Redesign the `InputText` field around the new `--ring-color` token, raise the spec to v2, and introduce a sibling `FieldText` wrapper that composes `Label` + `InputText` + `HelperText` into a single vertical stack with consistent spacing. InputText changes: - Restrict `type` to plain-text variants (`'text' | 'email'`). - Add `maxLength`, `required`, `invalid` props. - Add `iconLeft` / `iconRight` slots. - Drive visual states (hover, focus, filled) via native CSS pseudo-classes instead of props; `data-size`, `data-disabled`, `data-invalid`, `data-required` mirror the props for `data-[attr]:` Tailwind variants. FieldText: - `useId()`-backed `inputId` wired through Label `for` + input `id` + `aria-describedby` -> HelperText. - `helperKind` switches between `helper`, `required`, `invalid`, `disabled` based on prop state; falls back to a default `'This field is locked.'` copy when `disabled` is true and `helperText` is empty. - Forwards `iconLeft` / `iconRight` slots to the underlying InputText. * fix: align InputText/FieldText showcode with Message pattern * fix: align input-text family subpath exports * fix: allow type=number on InputText to unblock data-table position input * Revert "fix: allow type=number on InputText to unblock data-table position input" This reverts commit 708d5a6. * Revert "Revert "fix: allow type=number on InputText to unblock data-table position input"" This reverts commit 8860d49. * fix: storybook path * fix: address PR review on input-text, helper-text and story titles * fix: remove undefined defaults and align story namespace * fix: keep maxLength default as undefined to satisfy vue-tsc * fix: default field-text inputId and name to empty string --------- Co-authored-by: ROBSON.JUNIOR <robsongajunior@users.noreply.github.com>
* feat: add Label input primitive Introduce `@aziontech/webkit/inputs/label` — a thin `<label>` wrapper that renders the field text, supports a default slot, and appends a `Required` tag when the field is required. Wires `for` to the underlying input id so clicking the label focuses the control. The component is the label only — helper text, error messages, and the input itself live in sibling primitives composed by the form-field layer. * feat: add HelperText input primitive Introduce `@aziontech/webkit/inputs/helper-text` — a small text element that renders auxiliary copy below a form field. The `kind` prop drives the visual tone: - `helper` (default): muted token, neutral copy. - `required`: warning-tone copy paired with the Required tag treatment. - `invalid`: danger-tone copy for validation errors; usually wired to `aria-describedby` on the input. - `disabled`: muted with a leading lock icon. The component is the helper line only — wrapping form-field components own the wiring of `aria-describedby` and the conditional rendering. * feat: InputText v2 + FieldText composition Redesign the `InputText` field around the new `--ring-color` token, raise the spec to v2, and introduce a sibling `FieldText` wrapper that composes `Label` + `InputText` + `HelperText` into a single vertical stack with consistent spacing. InputText changes: - Restrict `type` to plain-text variants (`'text' | 'email'`). - Add `maxLength`, `required`, `invalid` props. - Add `iconLeft` / `iconRight` slots. - Drive visual states (hover, focus, filled) via native CSS pseudo-classes instead of props; `data-size`, `data-disabled`, `data-invalid`, `data-required` mirror the props for `data-[attr]:` Tailwind variants. FieldText: - `useId()`-backed `inputId` wired through Label `for` + input `id` + `aria-describedby` -> HelperText. - `helperKind` switches between `helper`, `required`, `invalid`, `disabled` based on prop state; falls back to a default `'This field is locked.'` copy when `disabled` is true and `helperText` is empty. - Forwards `iconLeft` / `iconRight` slots to the underlying InputText. * feat: InputPassword + FieldPassword composition Introduce `@aziontech/webkit/inputs/input-password` — a single-line password input that shares InputText's visual language and adds a built-in visibility toggle button on the trailing edge (driven by the existing `IconButton`). Type flips between `password` and `text` via local state; the toggle button announces its state via `aria-pressed`. `InputPassword` props: `modelValue`, `placeholder`, `maxLength`, `disabled`, `readonly`, `required`, `invalid`, `toggleable`, `autocomplete` (`'current-password' | 'new-password' | 'off'`). Slots: `iconLeft` (always available), `iconRight` (only when `toggleable=false` — the visibility toggle occupies that position otherwise). Single fixed height (40px / `large`). `FieldPassword` mirrors `FieldText`: composes `Label` + `InputPassword` + `HelperText` with the same `useId()` wiring for `for` / `id` / `aria-describedby`. Forwards `iconLeft` / `iconRight` slots and adds password-specific props (`maxLength`, `toggleable`, `autocomplete`). Storybook templates use the v-model pattern documented in the `storybook-write` skill — local `ref` + `watch` + `onUpdate` so the toggle has a value to reveal and the Actions panel still receives `update:modelValue` events. Ships the `input-password.figma.ts` Code Connect mapping. * fix: align InputPassword/FieldPassword showcode with Message pattern * fix: align input-password and field-password subpath imports * fix: allow type=number on InputText to unblock data-table position input * fix: remove undefined defaults and align story namespace * fix: keep maxLength default as undefined to satisfy vue-tsc * refactor: type inputId and name as string with empty default on FieldPassword * docs: spell out maxLength type as number | undefined in input/field specs
…gma (#661) * fix(webkit): align Global Header chrome with updated Figma Match the Webkit GlobalHeader design (node 4310:19617): symmetric horizontal padding (--spacing-md both sides), --spacing-md shell gap, and the canonical --border-default bottom border. Adjust start/end region gaps (--spacing-xs / --spacing-sm) to the Figma values. Update the spec's Figma reference, Purpose, and Tokens table accordingly. * feat(webkit): add Global Header Container region and Nav alias Mirror the Figma GlobalHeader structure (node 4310:19617) without breaking changes. Add GlobalHeader.Container, a shrink-0 flex wrapper that groups the menu trigger and brand as the Figma "Container" region, and expose the center region under its Figma name via GlobalHeader.Nav as an alias of the existing Middle (Middle is retained). Both additions are purely additive: no export path, prop, event, or slot changes, and existing compositions render identically. --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: ROBSON.JUNIOR <robsongajunior@users.noreply.github.com>
Co-authored-by: ROBSON.JUNIOR <robsongajunior@users.noreply.github.com>
#684) * [NO-ISSUE] chore(webkit): drop per-component package.json + dev dts scripts, hoist sideEffects The exports map in packages/webkit/package.json points every public path directly at a source file (.vue/.ts/.js), so the per-component package.json files were never consulted for resolution: their main/module/types/browser fields are dead under the exports map, and nothing reads them. - Hoist sideEffects to the root as ["**/*.vue", "**/*.css"] (covers the lone styles/country-flags.css; .ts/.js stay tree-shakeable as before). - Delete all 70 per-component package.json under src. - Remove the dev/CI build:dts + clean:dts scripts and the webkit:build:dts alias; drop the build:dts steps from the storybook and governance workflows. Type declarations are unaffected for consumers: .releaserc's prepareCmd (vue-tsc --declaration --emitDeclarationOnly) still generates and ships .d.ts at publish time. type-check (vue-tsc --noEmit, declaration: true) keeps declaration-emit validation in CI. * [NO-ISSUE] docs(webkit): align rules/skills/docs with the package.json + build:dts removal Follow-up to the package.json/build:dts cleanup — bring the component-authoring rules, skills, agent prompts, and docs in line with the new reality. - compound-api.md, component-scaffold (skill) + scaffolder (agent), COMPONENT_REQUIREMENTS (×2): components and sub-components no longer ship a per-folder package.json; the root `#exports` map plus the root `sideEffects` are the single source of wiring. The composition `index.ts` stays. - Drop the removed `webkit:build:dts` / `build:dts` / `clean:dts` references from AGENTS.md (×2), README, CONTRIBUTING, validate-component, component-create, settings.json, the governance doc, and the Storybook Get Started page. Declarations are noted as publish-time (`.releaserc` prepareCmd); CI declaration validation stays via `type-check` (vue-tsc --noEmit).
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
4 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.
Summary
Adds the ProgressBar component (feedback category) and the theme animation tokens it depends on.
progress-barcomponent published under the flat export@aziontech/webkit/progress-bar, with its spec (.specs/progress-bar.md) and a Storybook story underComponents/Feedback/ProgressBar.progress-indeterminate/progress-indeterminate-shortsemantic animation utilities, backed by newslow-03(1100ms) /slow-04(2100ms) duration primitives andprogressIndeterminate*keyframes. Regenerateddist/v3+dist/v4globals.Indeterminate animation uses logical properties (
inset-inline-*) so it's RTL-aware, and pairs withmotion-reduceper the styling rules.Notes
@aziontech/themeand@aziontech/webkit.dependencies.md).