feat(menu, menu-item): add scales, update padding, spacing, font-sizes#14797
feat(menu, menu-item): add scales, update padding, spacing, font-sizes#14797Elijbet wants to merge 4 commits into
Conversation
github-actions
Bot
added
the
bug
Elijbet
added
the
pr ready for visual snapshots
Elijbet
added
pr ready for visual snapshots
Elijbet
added
pr ready for visual snapshots
jcfranco
left a comment
jcfranco
left a comment
There was a problem hiding this comment.
Looking good, @Elijbet!
@brendan-vincent-rice @ashetland Could you take a look at this one? 🙇♂️
|
|
||
| :host([layout="vertical"]) .icon--end ~ .icon--breadcrumb { | ||
| @apply ms-2; | ||
| margin-inline-start: 0.5rem; |
There was a problem hiding this comment.
This should use --calcite-space-sm.
| } | ||
|
|
||
| :host([slot="submenu-item"][scale="l"][layout="vertical"]) { | ||
| min-block-size: theme("spacing.16"); |
There was a problem hiding this comment.
Are there any token equivalents for these? We need to avoid additional Tailwind usage (see #12080). Applies to other new styles.
|
|
||
| //#region Private Methods | ||
|
|
||
| private getContentIconScale(): "s" | "m" { |
There was a problem hiding this comment.
Why not use getIconScale directly? 🤔
| } | ||
| } | ||
|
|
||
| .content-container { |
There was a problem hiding this comment.
Can you check if this is always overridden? If so, the default styles (e.g., flex items-center) could be moved here.
| } | ||
|
|
||
| .icon--dropdown { | ||
| box-sizing: border-box; |
There was a problem hiding this comment.
Could these styles be DRYed up a bit by using additional internal custom CSS props?
| ></calcite-menu-item> | ||
| </calcite-menu>`; | ||
|
|
||
| export const scaleComparison = (): string => html` |
There was a problem hiding this comment.
For consistency, can you use allScales for the story name?
|
Also, should this use |
Elijbet
changed the title
2 participants
Related Issue: #12337
Summary
Add menu and menu-item scales, update padding, spacing, font-sizes.