feat(popover): add component tokens #10253
Conversation
|
This is looking good Eliza! Thanks! Probably outside this PR but @macandcheese @SkyeSeitz @ashetland @jcfranco per the discussion on accordion-item header, I'm wondering if there is a larger ui pattern we should be setting here allowing component container header backgrounds to be styled separately from the body? |
packages/calcite-components/src/components/popover/popover.e2e.ts
Outdated
Show resolved
Hide resolved
Elijbet
added
the
pr ready for visual snapshots
packages/calcite-components/src/components/popover/popover.e2e.ts
Outdated
Show resolved
Hide resolved
packages/calcite-components/src/components/popover/resources.ts
Outdated
Show resolved
Hide resolved
Outside the scope, but I agree it might be helpful to explore this pattern. I'll defer to the rest of the group on this. |
Agreed - many components will require multiple regions of styling - Panel (and consuming components like DIalog) has "content", "header", "footer", "content-top/bottom", etc. that may all be styled separately depending on needs. Same for Block, Accordion, etc. |
packages/calcite-components/src/components/popover/popover.stories.ts
Outdated
Show resolved
Hide resolved
packages/calcite-components/src/components/popover/popover.e2e.ts
Outdated
Show resolved
Hide resolved
packages/calcite-components/src/components/popover/popover.e2e.ts
Outdated
Show resolved
Hide resolved
| * @prop --calcite-popover-background-color: Specifies the background color of the component. | ||
| * @prop --calcite-popover-border-color: Specifies the border color of the component. | ||
| * @prop --calcite-popover-corner-radius: Specifies the corner radius of the component. | ||
| * @prop --calcite-popover-text-color: Specifies the text color of the component. | ||
| * @prop --calcite-popover-z-index: Sets the z-index value for the component. | ||
| */ |
There was a problem hiding this comment.
I might expect a --calcite-popover-shadow css property here.
There was a problem hiding this comment.
I don't see any shadow related styling on the component. Can you expand on that?
There was a problem hiding this comment.
It's coming from floating ui - but I don't think a user would need to know that, so maybe a pattern q of how to set that up. As a user I'd want to just set it at the component level like the other adjustments to border color, corner radius, etc.
There was a problem hiding this comment.
let's leave the floating-ui tokens separately.
…r close action button
Elijbet
added
pr ready for visual snapshots
packages/calcite-components/src/components/popover/popover.scss
Outdated
Show resolved
Hide resolved
packages/calcite-components/src/components/popover/popover.scss
Outdated
Show resolved
Hide resolved
| * @prop --calcite-popover-background-color: Specifies the background color of the component. | ||
| * @prop --calcite-popover-border-color: Specifies the border color of the component. | ||
| * @prop --calcite-popover-corner-radius: Specifies the corner radius of the component. | ||
| * @prop --calcite-popover-text-color: Specifies the text color of the component. | ||
| * @prop --calcite-popover-z-index: Sets the z-index value for the component. |
There was a problem hiding this comment.
Sidebar: can we deprecate component-specific z-indices? We should be using the semantic z-indices instead to adjust different layers. cc @alisonailea @driskull @macandcheese
packages/calcite-components/src/components/popover/popover.e2e.ts
Outdated
Show resolved
Hide resolved
| border-end-end-radius: none; | ||
| border-start-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round)); | ||
| border-end-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round)); | ||
| --calcite-internal-action-corner-radius-start-end: var( |
There was a problem hiding this comment.
Shouldn't this be setting the public action CSS props?
| --calcite-action-corner-radius-end-end, | ||
| var( | ||
| --calcite-action-corner-radius, | ||
| var(--calcite-internal-action-corner-radius-end-end, var(--calcite-corner-radius)) |
There was a problem hiding this comment.
Should the internal CSS prop be defined in this file?
Related Issue: #7180
Summary
Add
popovercomponent tokens.--calcite-popover-background-color: Specifies the background color of the component.--calcite-popover-border-color: Specifies the border color of the component.--calcite-popover-corner-radius: Specifies the corner radius of the component.--calcite-popover-text-color: Specifies the text color of the component.