feat(helper-text): port <pf-v5-helper-text> to <pf-v6-helper-text> element#3155
feat(helper-text): port <pf-v5-helper-text> to <pf-v6-helper-text> element#3155adamjohnson wants to merge 5 commits into
<pf-v5-helper-text> to <pf-v6-helper-text> element#3155Conversation
🦋 Changeset detectedLatest commit: 205eb07 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
adamjohnson
changed the title
<pf-v5-helper-text> to <pf-v6-helper-text> element
✅ Commitlint tests passed!More Info{
"valid": true,
"errors": [],
"warnings": [],
"input": "feat(helper-text): port `<pf-v5-helper-text>` to `<pf-v6-helper-text>` element"
} |
✅ Deploy Preview for patternfly-elements ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
This comment has been minimized.
This comment has been minimized.
| description: Dynamic helper text that updates with form validation state, using aria-live for announcements. | ||
| --- | ||
| <div class="helper-text-group" aria-live="polite" aria-atomic="false"> | ||
| <pf-v6-helper-text variant="success" has-icon dynamic> |
There was a problem hiding this comment.
boolean has-icon attr seems a little off to me.
alternatives:
- a css part or prop to hide the icon
- an
iconattr which forwards to pf-v6-icon (with defaults)
react doesnt' have a "no icon" or "opt out of all icons" but they do have custom icon, so i think an icon slot/attr pair is correct.
| </pf-v6-helper-text> | ||
|
|
||
| <pf-v6-helper-text variant="indeterminate"> | ||
| <svg slot="icon" fill="currentColor" viewBox="0 0 512 512" width="1em" height="1em" aria-hidden="true"> |
There was a problem hiding this comment.
use pf-v6-icon (or v5 until v6 is ready)
| representing one item. For grouping, use standard HTML containers with | ||
| appropriate ARIA attributes. | ||
|
|
||
| ### Not implemented |
There was a problem hiding this comment.
these are "changed" - the meaning of "not implemented" in these READMEs should be "Can't be done with the web component"
| * Defaults to "${variant} status" for non-default variants. | ||
| * Set to empty string to suppress screen reader announcement. | ||
| */ | ||
| @property({ attribute: 'screen-reader-text' }) screenReaderText?: string; |
There was a problem hiding this comment.
should be accessible-label, no?
2 participants
Summary
<pf-v5-helper-text><pf-v5-helper-text>to<pf-v6-helper-text>web component for PatternFly v6variant(default/indeterminate/warning/success/error),has-icon,dynamic, andscreen-reader-textattributes@patternfly/react-icons(rh-ui-minus, rh-ui-warning-fill, rh-ui-check-circle-fill, rh-ui-error-fill)light-dark()CSS fallbacksCloses #3012
Intentional divergences from React
HelperText(container) +HelperTextItem(item) pair; use plain HTML wrappers witharia-livefor groupinghas-iconattribute for opt-in icon display (React auto-shows icons for non-default variants)iconslot replaces React'siconprop (ReactNode → slotted markup)screen-reader-textattribute maps to React'sscreenReaderTextpropdynamicattribute exposes React's internal.pf-m-dynamicCSS modifier classcomponent,isLiveRegion,aria-label) not implemented; users apply these directly on wrapper elements<pf-v5-icon>— uses inline SVG iconsTest plan
npm run testpasseslocalhost:8000screen-reader-textoverrides default announcementscreen-reader-text=""suppresses announcementaria-livecontainer with mixed success/error itemsAssisted-By: Claude