Skip to content

Commit 502fab6

Browse files
brandyscarneybrandyscarney
committed
fix(badge): should default hue to subtle
1 parent 344e8e6 commit 502fab6

File tree

4 files changed

+46
-46
lines changed

4 files changed

+46
-46
lines changed

‎core/api.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -314,7 +314,7 @@ ion-backdrop,event,ionBackdropTap,void,true
314314

315315
ion-badge,shadow
316316
ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
317-
ion-badge,prop,hue,"bold" | "subtle" | undefined,'bold',false,false
317+
ion-badge,prop,hue,"bold" | "subtle" | undefined,'subtle',false,false
318318
ion-badge,prop,mode,"ios" | "md",undefined,false,false
319319
ion-badge,prop,shape,"round | rectangular" | "soft" | undefined,undefined,false,false
320320
ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false

‎core/src/components/badge/badge.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export class Badge implements ComponentInterface {
3232
* Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for
3333
* a badge with muted, subtle colors.
3434
*/
35-
@Prop() hue?: 'bold' | 'subtle' = 'bold';
35+
@Prop() hue?: 'bold' | 'subtle' = 'subtle';
3636

3737
/**
3838
* Set to `"rectangular"` for non-rounded corners.

‎core/src/components/badge/test/hue/badge.e2e.ts‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { configs, test } from '@utils/test/playwright';
33

44
configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
55
test.describe(title('badge: hue'), () => {
6-
test('should render bold badges', async ({ page }) => {
6+
test('should render subtle badges', async ({ page }) => {
77
await page.setContent(
88
`
99
<div id="container">
@@ -37,44 +37,44 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
3737

3838
const container = page.locator('#container');
3939

40-
await expect(container).toHaveScreenshot(screenshot(`badge-hue-bold`));
40+
await expect(container).toHaveScreenshot(screenshot(`badge-hue-subtle`));
4141
});
4242

43-
test('should render subtle badges', async ({ page }) => {
43+
test('should render bold badges', async ({ page }) => {
4444
await page.setContent(
4545
`
4646
<div id="container">
47-
<ion-badge hue="subtle">99</ion-badge>
48-
<ion-badge hue="subtle" color="primary">99</ion-badge>
49-
<ion-badge hue="subtle" color="secondary">99</ion-badge>
50-
<ion-badge hue="subtle" color="tertiary">99</ion-badge>
51-
<ion-badge hue="subtle" color="success">99</ion-badge>
52-
<ion-badge hue="subtle" color="warning">99</ion-badge>
53-
<ion-badge hue="subtle" color="danger">99</ion-badge>
54-
<ion-badge hue="subtle" color="light">99</ion-badge>
55-
<ion-badge hue="subtle" color="medium">99</ion-badge>
56-
<ion-badge hue="subtle" color="dark">99</ion-badge>
47+
<ion-badge hue="bold">99</ion-badge>
48+
<ion-badge hue="bold" color="primary">99</ion-badge>
49+
<ion-badge hue="bold" color="secondary">99</ion-badge>
50+
<ion-badge hue="bold" color="tertiary">99</ion-badge>
51+
<ion-badge hue="bold" color="success">99</ion-badge>
52+
<ion-badge hue="bold" color="warning">99</ion-badge>
53+
<ion-badge hue="bold" color="danger">99</ion-badge>
54+
<ion-badge hue="bold" color="light">99</ion-badge>
55+
<ion-badge hue="bold" color="medium">99</ion-badge>
56+
<ion-badge hue="bold" color="dark">99</ion-badge>
5757
5858
<br>
5959
60-
<ion-badge hue="subtle"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
61-
<ion-badge hue="subtle" color="primary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
62-
<ion-badge hue="subtle" color="secondary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
63-
<ion-badge hue="subtle" color="tertiary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
64-
<ion-badge hue="subtle" color="success"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
65-
<ion-badge hue="subtle" color="warning"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
66-
<ion-badge hue="subtle" color="danger"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
67-
<ion-badge hue="subtle" color="light"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
68-
<ion-badge hue="subtle" color="medium"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
69-
<ion-badge hue="subtle" color="dark"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
60+
<ion-badge hue="bold"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
61+
<ion-badge hue="bold" color="primary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
62+
<ion-badge hue="bold" color="secondary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
63+
<ion-badge hue="bold" color="tertiary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
64+
<ion-badge hue="bold" color="success"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
65+
<ion-badge hue="bold" color="warning"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
66+
<ion-badge hue="bold" color="danger"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
67+
<ion-badge hue="bold" color="light"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
68+
<ion-badge hue="bold" color="medium"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
69+
<ion-badge hue="bold" color="dark"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
7070
</div>
7171
`,
7272
config
7373
);
7474

7575
const container = page.locator('#container');
7676

77-
await expect(container).toHaveScreenshot(screenshot(`badge-hue-subtle`));
77+
await expect(container).toHaveScreenshot(screenshot(`badge-hue-bold`));
7878
});
7979
});
8080
});

‎core/src/components/badge/test/hue/index.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
</ion-header>
2424

2525
<ion-content id="content">
26-
<h2>Badge Hue: Bold</h2>
26+
<h2>Badge Hue: Subtle</h2>
2727
<ion-badge color="primary">99</ion-badge>
2828
<ion-badge color="secondary">99</ion-badge>
2929
<ion-badge color="tertiary">99</ion-badge>
@@ -46,28 +46,28 @@ <h2>Badge Hue: Bold</h2>
4646
<ion-badge color="medium"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
4747
<ion-badge color="dark"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
4848

49-
<h2>Badge Hue: Subtle</h2>
50-
<ion-badge hue="subtle" color="primary">99</ion-badge>
51-
<ion-badge hue="subtle" color="secondary">99</ion-badge>
52-
<ion-badge hue="subtle" color="tertiary">99</ion-badge>
53-
<ion-badge hue="subtle" color="success">99</ion-badge>
54-
<ion-badge hue="subtle" color="warning">99</ion-badge>
55-
<ion-badge hue="subtle" color="danger">99</ion-badge>
56-
<ion-badge hue="subtle" color="light">99</ion-badge>
57-
<ion-badge hue="subtle" color="medium">99</ion-badge>
58-
<ion-badge hue="subtle" color="dark">99</ion-badge>
49+
<h2>Badge Hue: Bold</h2>
50+
<ion-badge hue="bold" color="primary">99</ion-badge>
51+
<ion-badge hue="bold" color="secondary">99</ion-badge>
52+
<ion-badge hue="bold" color="tertiary">99</ion-badge>
53+
<ion-badge hue="bold" color="success">99</ion-badge>
54+
<ion-badge hue="bold" color="warning">99</ion-badge>
55+
<ion-badge hue="bold" color="danger">99</ion-badge>
56+
<ion-badge hue="bold" color="light">99</ion-badge>
57+
<ion-badge hue="bold" color="medium">99</ion-badge>
58+
<ion-badge hue="bold" color="dark">99</ion-badge>
5959

6060
<br />
6161

62-
<ion-badge hue="subtle" color="primary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
63-
<ion-badge hue="subtle" color="secondary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
64-
<ion-badge hue="subtle" color="tertiary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
65-
<ion-badge hue="subtle" color="success"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
66-
<ion-badge hue="subtle" color="warning"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
67-
<ion-badge hue="subtle" color="danger"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
68-
<ion-badge hue="subtle" color="light"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
69-
<ion-badge hue="subtle" color="medium"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
70-
<ion-badge hue="subtle" color="dark"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
62+
<ion-badge hue="bold" color="primary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
63+
<ion-badge hue="bold" color="secondary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
64+
<ion-badge hue="bold" color="tertiary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
65+
<ion-badge hue="bold" color="success"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
66+
<ion-badge hue="bold" color="warning"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
67+
<ion-badge hue="bold" color="danger"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
68+
<ion-badge hue="bold" color="light"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
69+
<ion-badge hue="bold" color="medium"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
70+
<ion-badge hue="bold" color="dark"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
7171
</ion-content>
7272
</ion-app>
7373
</body>

0 commit comments

Comments
 (0)