feat(chip): add recipe and variables#30873
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
core/src/themes/md/default.tokens.ts
Outdated
| }, | ||
|
|
||
| avatar: { | ||
| size: `${24 / fontSizes.chipBase}em`, |
There was a problem hiding this comment.
These numbers seem made up - maybe we need to define these calculations better?
There was a problem hiding this comment.
The avatar size is based on the existing values from the original vars file.
| } | ||
|
|
||
| const fontSizes = { | ||
| chipBase: 14, |
There was a problem hiding this comment.
Why is the base 14 for Chip? Shouldn't all components have the same base size?
There was a problem hiding this comment.
The original value is 14 based on the vars file. I don't remember why 14 was chosen.
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
| @include mixins.border-radius(var(--border-radius)); | ||
| @include mixins.margin(vars.$chip-margin); | ||
| @include mixins.padding(vars.$chip-padding-vertical, vars.$chip-padding-horizontal); | ||
| @include mixins.typography(vars.$chip-typography); |
There was a problem hiding this comment.
The font family for chip on ionic-modular and this branch do not match when it comes to the ionic theme. The ionic theme uses ion-body-sm-medium to set the typography for chip. This variable includes font family with the value of -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol". This is exactly what is being rendered on this branch. However, the ionic-modular renders it with a value of var(--ion-font-family, inherit). Based on my investigation, ionic-modular and next are not loading the correct font family. This branch fixes it.
There was a problem hiding this comment.
These changes for iosmd are happening because the shape default is now round instead of soft.
There was a problem hiding this comment.
These changes for md are happening because the shape default is now round instead of soft.
There was a problem hiding this comment.
I renamed these to be chip-solid instead of chip-basic.
| await page.setContent( | ||
| ` | ||
| <ion-chip> | ||
| <ion-chip fill="solid"> |
There was a problem hiding this comment.
Verifying that it's always solid since defaults can be changed per theme.
| test('should render default outline chip', async ({ page }) => { | ||
| await page.setContent( | ||
| `<ion-chip outline="true"> | ||
| `<ion-chip fill="outline"> |
There was a problem hiding this comment.
Verifying that it's always outline since defaults can be changed per theme.
There was a problem hiding this comment.
Updated this page to only display the default chip since the hue page captures colors.
There was a problem hiding this comment.
hue has been added to md.
There was a problem hiding this comment.
hue has been added to ios.
There was a problem hiding this comment.
We don't need snapshots for the default shape. These are being captured in other tests.
There was a problem hiding this comment.
The diff is because ionic was rendering the app background as black. I didn't think it was necessary so I switched it back to white to stay consistent with the other themes.
| await page.goto(`/src/components/chip/test/shape`, config); | ||
| }); | ||
|
|
||
| test.describe('default', () => { |
There was a problem hiding this comment.
We don't need snapshots for the default shape. These are being captured in other tests.
| // Disabled | ||
| :host(.chip-disabled) { | ||
| cursor: default; | ||
| opacity: var(--ion-chip-state-disabled-opacity, 1); |
There was a problem hiding this comment.
ionic targets the :after to add a layer of disabled. In order to accommodate all the themes, I feel that using an opacity is a good compromise. We should aim to do the same for the other components when it comes to disabled.
| } | ||
|
|
||
| return shape; | ||
| const fillConfig = config.getObjectValue('IonChip.fill', 'solid') as string; |
There was a problem hiding this comment.
Typing it as a string since I'm passing a fallback so I know for a fact that it will return a string value.
There was a problem hiding this comment.
Without these changes, config.get, config.getObjectValue, etc, would always return undefined and would create components with the fallbacks. This would cause false snapshots. For example, md has been set to have bold hues by default but snapshots would keep rendering it as subtle. subtle is the fallback if config was unable to find a value.
In a perfect world, scripts.js should be the only file it needs but scripts is being run too late so Playwright ends up creating flaky tests.
| import type { Page, TestInfo } from '@playwright/test'; | ||
| import type { Direction, E2EPageOptions, Mode, Palette, Theme } from '@utils/test/playwright'; | ||
|
|
||
| import { defaultTheme as baseTheme } from '../../../../../themes/base/default.tokens'; |
There was a problem hiding this comment.
I'm not too thrilled of importing all the themes but dynamic imports would cause run errors within Playwright.
2 participants
Issue number: resolves internal
What is the current behavior?
Component styles for
ion-chipare fragmented across multiple files (ios,md,ionic). Developers were restricted to those themes and how those themes structured the logic and styles.What is the new behavior?
chip.base.scssfile that consumes CSS variables, ensuring a single source of truth for component logic.IonChiptype and tokens to prioritize a Property-First approach. Instead of flat or element-centric tokens, they are nested by element and then by property (e.g.,icon.firstChild.margin.end). This ensures:paddingandborder.chip.interfaces.tswith reusable utility types likeHueRefto standardize the "Bold vs. Subtle" logic used in variants and interaction states.mdandios.mdandios.Does this introduce a breaking change?
This PR introduces a breaking change to how
IonChipis styled. Existing manual CSS overrides targeting internal chip structures or old token names will no longer work due to the shift to a Property-First token hierarchy and a unified base SCSS file.Migration Path:
Token Updates: Update any custom theme configurations to match the new nested structure.
CSS Overrides: Ensure selectors align with the new slotted element logic and variable names (e.g.,
--ion-chip-hue-bold-bg).--backgroundshould no longer be used. Setting the value withIonChip.hue.bold.bgandIonChip.hue.subtle.bgwithin the tokens file should be used to change the background based on the hue.If
mdorioswith no shape, then update the component to default tosoft.Other information
This PR significantly improves the developer experience for theming. By moving logic into
default.tokens.tsand away from hardcoded SCSS functions, designers and developers can now override complex states (like an activated outline chip) purely through token configuration.Preview: