Icon button variations #898
Conversation
…sortium/hra-ui into Icon-button-variations
|
View your CI Pipeline Execution ↗ for commit 69f68b1.
☁️ Nx Cloud last updated this comment at |
🚀 Preview Deploy Report Updated✅ Successfully deployed preview here |
|
|
||
| &:focus-visible { | ||
| outline: 2px solid var(--sys-tertiary); | ||
| --mdc-icon-button-icon-color: var(--sys-secondary); | ||
| border: 2px solid var(--sys-tertiary); |
There was a problem hiding this comment.
Please change back to using outline. Using border causes a layout shift making the icon move slightly
| --mat-icon-button-focus-state-layer-opacity: 0; | ||
| --mdc-icon-button-icon-color: var(--sys-on-tertiary-fixed); | ||
|
|
||
| &:focus-visible { |
There was a problem hiding this comment.
Put this entire block after the variant selectors at line 30 to give it higher priority. Currently the icon color does not change when focused
| } | ||
|
|
||
| mat-icon { | ||
| height: var(--mdc-icon-button-icon-size); | ||
| width: var(--mdc-icon-button-icon-size); | ||
| font-size: var(--mdc-icon-button-icon-size); | ||
| } | ||
|
|
||
| &.icon-button-variant-light { |
There was a problem hiding this comment.
The ripple colors need to be changed to match the spec
There was a problem hiding this comment.
Please add stories show casing the different variants
| }) | ||
| export class IconButtonVariantDirective { | ||
| /** Input for icon button color variant */ | ||
| readonly variant = input<IconButtonVariant>('default', { alias: 'hraIconButtonVariant' }); |
There was a problem hiding this comment.
Let's change the default value to dark. It seems to be the most commonly used version across the apps. Let's also change the string default to color since it is no longer the default
|
Update icon button with new variations #814