feat(webkit): add the Hint component, Label's hint prop, and quieter field-* helpers - #873
Conversation
Hint is a Tooltip-anchored info glyph on a focusable button: the text prop is both the tooltip copy and the button's accessible name, the glyph is decorative, and the click default is prevented so a Hint inside a label never toggles the control that label points at. Label gains hint: non-empty renders the Hint after the text and the required indicator, sets data-hinted, and picks up the xxs gap. The hint's testid derives from the label root, so a consumer override carries through.
A field-* with no helperText used to fall back to "This field is locked." while disabled, so a form disabled for the length of a submit grew a padlock line the screen never asked for and lost it a second later. The field now writes no copy of its own: no helperText means no helper row, disabled or not, and a caller who wants a reason passes one (it still renders with the lock glyph). Also moves the password requirement chips off --bg-surface-raised onto --bg-placeholder, so an unsatisfied chip tints its container instead of reading as a raised block on one.
…d quieter field helpers
robsongajunior
left a comment
robsongajunior
left a comment
There was a problem hiding this comment.
nos .md na tabela de props quando diz se required ou não está no, ideal seria ser tb true||false
The Required column read yes/no while Type and Default beside it read as literal values, so the same boolean fact was spelled two ways in one table. Every touched spec now says true/false, and each frontmatter checksum is recomputed so enforce-spec-exists still matches the body.
|
Boa, @robsongajunior — feito em 648bf6b. A coluna Recalculei o Os outros ~70 specs do repo e o |
|
Não sei se existe algum cenário desse tipo, mas eu recomendaria dar um truncate nesse text |
|
Num container flexivel (maior que o componente), o componente se expande conforme vai se expandindo. É esperado? |
…ippets exampleProps matched the literal 'yes', so once a spec table says true the generator stops seeing that prop as required and picks leading scalars instead. Both spellings are now accepted, so the reader is correct whichever spec files have migrated.
|
@isaque-bock-azion Isso so acontece no Storybook, ele vai respeitar o Container que ele está inserido. No storybook ta com largura automática, logo vai acontecer isso mesmo. |
Não acontece isso de fato, ja testei na Sample e ele quebra e respeita a altura docmponente, posos testar textos maiores mas esse seu teste não faz sentido pq a palabra kkkkkkkk é uma palvra com inumeros carecteres, não vai quebrar pq é uma palavra unica. |
3 participants
Summary
hintcomponent (@aziontech/webkit/hint): a Tooltip-anchored info glyph on a focusable button, wheretextis both the tooltip copy and the button's accessible name.Labelrenders it from a newhintprop, so a field name and its one-sentence explanation are one component instead of a hand-built row.field-*no longer writes copy of its own: a field with nohelperTextrenders no helper row, disabled or not — the old"This field is locked."fallback appeared and vanished under every field for the ~1s of a submit.--bg-surface-raisedto--bg-placeholder, so an unsatisfied chip tints its container instead of reading as a raised block on one.How to test
pnpm storybook:dev→ Components/Inputs/Hint: hover andTabto the glyph — the tooltip opens on both,Esccloses it, and the four anchors in Placements open on their declared side.Sensitiveswitch pattern).helper-textshows no helper line; one withhelper-textkeeps it and gains the lock glyph.--success+ check).pnpm webkit:test→ 30 inputs suites, 792 passing (label +5, hint +9 new browser-mode tests, axe included).Notes
"This field is locked."string now sees nothing unless it passeshelper-text. The shippedwebkit-formskill is updated in the same commit so consumer-side AI guidance matches.