Add FV OK web components and Storybook coverage#2944
Add FV OK web components and Storybook coverage#2944fredvisser wants to merge 11 commits intomainfrom
Conversation
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
| @@ -0,0 +1,6 @@ | |||
| { | |||
There was a problem hiding this comment.
@fredvisser @jattasNI commenting because I mentioned to Fred but consider smaller PR chunks (maybe one component at a time or something) as if test instability is introduced (unit tests, chromatic tests, etc) then the commits are likely to be reverted and that would revert potentially more changes that expected. But can also appreciate the increased cost of separate reviews so up to y'all's discretion.
| ## Badge Styling | ||
|
|
||
| The card does not bake alternate success, warning, error, or branded badge colors into the component. The recommended pattern is to slot a `nimble-chip` and let the client application own any alternate palette. | ||
|
|
||
| For an outline badge chip, clients can scope theme-aware overrides to the chip itself: | ||
|
|
||
| - Override `bodyFontColor` to change the chip text color. | ||
| - Override `actionRgbPartialColor` to change the outline tint. | ||
| - Override `borderRgbPartialColor` as well if the chip may also be disabled or use block appearance. | ||
|
|
||
| ```css | ||
| nimble-theme-provider[theme='light'] .pink-badge { | ||
| --ni-nimble-body-font-color: rgb(190 45 122); | ||
| --ni-nimble-action-rgb-partial-color: 190, 45, 122; | ||
| } | ||
|
|
||
| nimble-theme-provider[theme='dark'] .pink-badge { | ||
| --ni-nimble-body-font-color: rgb(255 173 220); | ||
| --ni-nimble-action-rgb-partial-color: 255, 173, 220; | ||
| } | ||
|
|
||
| nimble-theme-provider[theme='color'] .pink-badge { | ||
| --ni-nimble-body-font-color: rgb(255 199 227); | ||
| --ni-nimble-action-rgb-partial-color: 255, 199, 227; | ||
| } | ||
|
|
||
| /* Also set this when the chip can be disabled or use block appearance. */ | ||
| .pink-badge { | ||
| --ni-nimble-border-rgb-partial-color: 190, 45, 122; | ||
| } | ||
| ``` No newline at end of file |
There was a problem hiding this comment.
We shouldn't be designing apis that require users to override CSS custom properties for styling.
Similar to the sizing discussion we should either allow styling the host element to propagate down (this is the theory of the text customized tests where font styles are inherited through the host for configuration) or if there are multiple parts that can be styled then they should be exposed as CSS shadow parts with guidance on how to style them.
| componentName: 'fv chip selector', | ||
| statusLink: './?path=/docs/component-status--docs#ok-components' | ||
| })} | ||
| <${fvChipSelectorTag} |
There was a problem hiding this comment.
consider having the chip selector use the anchored region to implement the popover like all of our other popover elements (select, combobox, tooltip, menu button)
There was a problem hiding this comment.
Also popover based elements in storybook should use the helper to prevent storybook transforms and let the popover come over the story, ex:
| > | ||
| <${iconArrowExpanderDownTag}></${iconArrowExpanderDownTag}> | ||
| </button> | ||
| <div |
There was a problem hiding this comment.
consider using an actual menu button like done in systemlinklibangular
also consider testing with scrollbars enabled / on windows in general
| componentName: 'fv card', | ||
| statusLink: './?path=/docs/component-status--docs#ok-components' | ||
| })} | ||
| <style>${badgeStyles}</style> |
There was a problem hiding this comment.
Should review your show code contents on the storybook pages, people tend to just copy and paste it and there is a lot of junk in here:
leverage the code-hide and code-hide-top-container helper CSS classes
| args: { | ||
| title: 'McBain Dailies', | ||
| subtitle: 'Soundstage vault', | ||
| description: 'Monitor reel intake, dub approvals, and pickup slips awaiting final sign-off.', | ||
| interactionMode: FvCardInteractionMode.card, | ||
| initials: 'MB' |
There was a problem hiding this comment.
consider simpsons related example content
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
2 participants
Summary
Add the FV OK web component implementations and Storybook coverage for card, chip selector, context help, split button, split button anchor, summary panel, summary panel tile, and toolbar.
What changed
@ni/ok-componentscomponent-reviewskill bundle and repository best-practices reference underpackages/ok-components/src/fv/.github/skillsNotes
Validation
npm run build:components -w @ni/ok-componentsnpm run build:ts -w @ni-private/storybook