diff --git a/core/src/components/chip/chip.ios.scss b/core/src/components/chip/chip.ios.scss
new file mode 100644
index 0000000000..a6d23fc169
--- /dev/null
+++ b/core/src/components/chip/chip.ios.scss
@@ -0,0 +1,11 @@
+@import "./chip";
+@import "./chip.vars";
+
+:host {
+ /**
+ * Main content should be prioritized on iOS,
+ * so we set max font size for chips.
+ * We add a min font size to keep the text legible.
+ */
+ font-size: clamp(13px, $chip-base-font-size-rem, 22px);
+}
diff --git a/core/src/components/chip/chip.md.scss b/core/src/components/chip/chip.md.scss
new file mode 100644
index 0000000000..c123b971bb
--- /dev/null
+++ b/core/src/components/chip/chip.md.scss
@@ -0,0 +1,6 @@
+@import "./chip";
+@import "./chip.vars";
+
+:host {
+ font-size: $chip-base-font-size-rem;
+}
diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.scss
index 29f8ed95b0..37a3f700f1 100644
--- a/core/src/components/chip/chip.scss
+++ b/core/src/components/chip/chip.scss
@@ -1,17 +1,18 @@
@import "../../themes/ionic.globals";
+@import "./chip.vars";
:host {
/**
* @prop --background: Background of the chip
* @prop --color: Color of the chip
*/
- --background: #{rgba($text-color-rgb, .12)};
- --color: #{rgba($text-color-rgb, .87)};
+ --background: #{rgba($text-color-rgb, 0.12)};
+ --color: #{rgba($text-color-rgb, 0.87)};
@include border-radius(16px);
@include font-smoothing();
@include margin(4px);
- @include padding(7px, 12px);
+ @include padding(6px, 12px);
display: inline-flex;
@@ -19,13 +20,12 @@
align-items: center;
- height: 32px;
+ min-height: 32px;
background: var(--background);
color: var(--color);
font-family: $font-family-base;
- font-size: 14px;
cursor: pointer;
@@ -37,7 +37,7 @@
:host(.chip-disabled) {
cursor: default;
- opacity: .4;
+ opacity: 0.4;
pointer-events: none;
}
@@ -45,19 +45,18 @@
// ---------------------------------------------
:host(.ion-color) {
- background: current-color(base, .08);
+ background: current-color(base, 0.08);
color: current-color(shade);
}
:host(.ion-color:focus) {
- background: current-color(base, .12);
+ background: current-color(base, 0.12);
}
:host(.ion-color.ion-activated) {
- background: current-color(base, .16);
+ background: current-color(base, 0.16);
}
-
// Outline Chip
// ---------------------------------------------
@@ -67,33 +66,32 @@
}
:host(.chip-outline) {
- border-color: rgba($text-color-rgb, .32);
+ border-color: rgba($text-color-rgb, 0.32);
background: transparent;
}
:host(.chip-outline.ion-color) {
- border-color: current-color(base, .32);
+ border-color: current-color(base, 0.32);
}
:host(.chip-outline:not(.ion-color):focus) {
- background: rgba($text-color-rgb, .04);
+ background: rgba($text-color-rgb, 0.04);
}
:host(.chip-outline.ion-activated:not(.ion-color)) {
- background: rgba($text-color-rgb, .08);
+ background: rgba($text-color-rgb, 0.08);
}
-
// Chip Icon
// ---------------------------------------------
::slotted(ion-icon) {
- font-size: 20px;
+ font-size: $chip-icon-size;
}
:host(:not(.ion-color)) ::slotted(ion-icon) {
- color: rgba($text-color-rgb, .54);
+ color: rgba($text-color-rgb, 0.54);
}
::slotted(ion-icon:first-child) {
@@ -104,13 +102,14 @@
@include margin(-4px, -4px, -4px, 8px);
}
-
// Chip Avatar
// ---------------------------------------------
::slotted(ion-avatar) {
- width: 24px;
- height: 24px;
+ flex-shrink: 0;
+
+ width: $chip-avatar-size;
+ height: $chip-avatar-size;
}
::slotted(ion-avatar:first-child) {
@@ -121,7 +120,6 @@
@include margin(-4px, -8px, -4px, 8px);
}
-
// Chip: Focus
// ---------------------------------------------
@@ -130,31 +128,29 @@
}
:host(:focus) {
- --background: #{rgba($text-color-rgb, .16)};
+ --background: #{rgba($text-color-rgb, 0.16)};
}
-
// Chip: Activated
// ---------------------------------------------
:host(.ion-activated) {
- --background: #{rgba($text-color-rgb, .20)};
+ --background: #{rgba($text-color-rgb, 0.2)};
}
-
// Chip: Hover
// ---------------------------------------------
@media (any-hover: hover) {
:host(:hover) {
- --background: #{rgba($text-color-rgb, .16)};
+ --background: #{rgba($text-color-rgb, 0.16)};
}
:host(.ion-color:hover) {
- background: current-color(base, .12);
+ background: current-color(base, 0.12);
}
:host(.chip-outline:not(.ion-color):hover) {
- background: rgba($text-color-rgb, .04);
+ background: rgba($text-color-rgb, 0.04);
}
}
diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx
index 51100a992f..0d04a53482 100644
--- a/core/src/components/chip/chip.tsx
+++ b/core/src/components/chip/chip.tsx
@@ -10,7 +10,10 @@ import { createColorClasses } from '../../utils/theme';
*/
@Component({
tag: 'ion-chip',
- styleUrl: 'chip.scss',
+ styleUrls: {
+ ios: 'chip.ios.scss',
+ md: 'chip.md.scss',
+ },
shadow: true,
})
export class Chip implements ComponentInterface {
diff --git a/core/src/components/chip/chip.vars.scss b/core/src/components/chip/chip.vars.scss
new file mode 100644
index 0000000000..d0bf28bfbd
--- /dev/null
+++ b/core/src/components/chip/chip.vars.scss
@@ -0,0 +1,13 @@
+@use "sass:math";
+
+/// @prop - Unitless font size of the chip before scaling
+$chip-base-font-size: 14;
+
+/// @prop - Font size of the chip in rem before scaling
+$chip-base-font-size-rem: #{math.div($chip-base-font-size, 16)}rem;
+
+/// @prop - Size of an icon within a chip (in em to scale as the font size of the chip scales)
+$chip-icon-size: math.div(20em, $chip-base-font-size);
+
+/// @prop - Size of an avatar within a chip (in em to scale as the font size of the chip scales)
+$chip-avatar-size: math.div(24em, $chip-base-font-size);
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts b/core/src/components/chip/test/a11y/chip.e2e.ts
new file mode 100644
index 0000000000..5a00515b17
--- /dev/null
+++ b/core/src/components/chip/test/a11y/chip.e2e.ts
@@ -0,0 +1,67 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+ /**
+ * Font scaling does not vary across directions.
+ */
+ test.describe(title('chip: font scaling'), () => {
+ test('should scale text', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+ 
+
+ With Icon and Avatar
+
+ `,
+ config
+ );
+
+ const chip = page.locator('ion-chip');
+
+ await expect(chip).toHaveScreenshot(screenshot('chip-scale'));
+ });
+ });
+});
+
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+ /**
+ * Font scaling does not vary across directions
+ * ios mode has a min font size
+ */
+ test.describe(title('chip: contents at large scale'), () => {
+ test('should handle contents wider than chip', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+
+ With Icon and Avatar
+
+ `,
+ config
+ );
+
+ const chip = page.locator('ion-chip');
+
+ await expect(chip).toHaveScreenshot(screenshot('chip-large-contents'));
+ });
+ });
+});
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..34c317c62d
Binary files /dev/null and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2690595b31
Binary files /dev/null and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..6d1b089b54
Binary files /dev/null and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8d7789b41c
Binary files /dev/null and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..506f530b7d
Binary files /dev/null and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9e9e3c1d75
Binary files /dev/null and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..52b8b74f3c
Binary files /dev/null and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b1c92404b7
Binary files /dev/null and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9731a7acd0
Binary files /dev/null and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Safari-linux.png differ