feat: update badge API and styles #3147
Conversation
chrisdholt
requested review from
awentzel,
EisenbergEffect,
Falkicon,
janechu and
nicholasrice
as code owners
chrisdholt
force-pushed
the
users/chhol/update-msft-badge-behavior
branch
from
48a301b
to
9dac442
Compare
| private appearanceChanged( | ||
| oldValue: BadgeAppearance, | ||
| newValue: BadgeAppearance | ||
| ): void { | ||
| if (oldValue !== newValue) { |
There was a problem hiding this comment.
This class should be applied through the template or this can cause a runtime error when this is set during construction
There was a problem hiding this comment.
Are there alternatives? This isn't global across all badges and ideally we'd reuse the template.
There was a problem hiding this comment.
Leveraging DOM.queueUpdate() here
| import { Badge, BadgeTemplate as template } from "@microsoft/fast-foundation"; | ||
| import { BadgeStyles as styles } from "./badge.styles"; | ||
|
|
||
| export type BadgeFill = "accent" | "lightweight" | "neutral" | "string"; | ||
| export type BadgeAppearance = "accent" | "lightweight" | "neutral" | string; |
There was a problem hiding this comment.
Good catch on "string"
| style="background-color: var(--badge-fill-${x => | ||
| x.fill}); color: var(--badge-color-${x => x.color})" | ||
| style="${x => | ||
| x.fill || x.color |
There was a problem hiding this comment.
Is it possible that there's a fill but no color or a color but no fill?
There was a problem hiding this comment.
Yeah, this isn't ideal. I think we can update but I wanted to mitigate the issue of this being applied when neither was used. I think it's less egregious to have one undefined variable here that's not in use than both. We should fix this though to have both only written if they exist.
* feat: update badge API and styles * add initial package version BREAKING CHANGE
* feat: update badge API and styles * add initial package version BREAKING CHANGE
* feat: update badge API and styles * add initial package version BREAKING CHANGE
* feat: update badge API and styles * add initial package version BREAKING CHANGE
* feat: update badge API and styles * add initial package version BREAKING CHANGE
* feat: update badge API and styles * add initial package version BREAKING CHANGE
* feat: update badge API and styles * add initial package version BREAKING CHANGE: fundamentally changes and breaks the badge component API and styles
Description
This PR udpates the badge template to conditionally render the CSS variable map values when one is actually supplied. Additionally, this updates the base styles of Badge in fast-components and adds appearances to
fast-components-msft.Issue type checklist
Is this a breaking change?
Process & policy checklist