Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(badge): add hue property for the ionic theme #30307

Draft
wants to merge 6 commits into
base: FW-6252
Choose a base branch
from
+117 −5
Draft

feat(badge): add hue property for the ionic theme #30307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3692846
feat(badge): add subtle hue for the ionic theme
brandyscarney Mar 26, 2025
4331eb7
chore: build
brandyscarney Mar 26, 2025
0d485b7
Merge branch 'FW-6252' into FW-6252-badge
brandyscarney Mar 28, 2025
e4f344e
Merge branch 'FW-6252' into FW-6252-badge
brandyscarney Apr 2, 2025
f64e50c
Merge branch 'FW-6252' into FW-6252-badge
brandyscarney Apr 2, 2025
203c306
Merge branch 'FW-6252' into FW-6252-badge
brandyscarney Apr 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions core/api.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,7 @@ ion-backdrop,event,ionBackdropTap,void,true

ion-badge,shadow
ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
ion-badge,prop,hue,"bold" | "subtle" | undefined,'bold',false,false
ion-badge,prop,mode,"ios" | "md",undefined,false,false
ion-badge,prop,shape,"round | rectangular" | "soft" | undefined,undefined,false,false
ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false
Expand Down
8 changes: 8 additions & 0 deletions core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -429,6 +429,10 @@ export namespace Components {
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
*/
"color"?: Color;
/**
* Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.
*/
"hue"?: 'bold' | 'subtle';
/**
* The mode determines the platform behaviors of the component.
*/
Expand Down Expand Up @@ -5870,6 +5874,10 @@ declare namespace LocalJSX {
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
*/
"color"?: Color;
/**
* Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.
*/
"hue"?: 'bold' | 'subtle';
/**
* The mode determines the platform behaviors of the component.
*/
Expand Down
14 changes: 14 additions & 0 deletions core/src/components/badge/badge.ionic.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,20 @@
font-weight: globals.$ion-font-weight-medium;
}

// Subtle Badge
// --------------------------------------------------

:host(.badge-subtle) {
--background: #{globals.ion-color(primary, base, $subtle: true)};
--background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
--color: #{globals.ion-color(primary, contrast, $subtle: true)};
}

:host(.badge-subtle.ion-color) {
background: globals.current-color(base, $subtle: true);
color: globals.current-color(contrast, $subtle: true);
}

// Badge Shapes
// --------------------------------------------------

Expand Down
8 changes: 8 additions & 0 deletions core/src/components/badge/badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,12 @@ export class Badge implements ComponentInterface {
*/
@Prop({ reflect: true }) color?: Color;

/**
* Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for
* a badge with muted, subtle colors.
*/
@Prop() hue?: 'bold' | 'subtle' = 'bold';

/**
* Set to `"rectangular"` for non-rounded corners.
* Set to `"soft"` for slightly rounded corners.
Expand Down Expand Up @@ -88,6 +94,7 @@ export class Badge implements ComponentInterface {
}

render() {
const { hue } = this;
const shape = this.getShape();
const size = this.getSize();
const theme = getIonTheme(this);
Expand All @@ -96,6 +103,7 @@ export class Badge implements ComponentInterface {
<Host
class={createColorClasses(this.color, {
[theme]: true,
[`badge-${hue}`]: hue !== undefined,
[`badge-${shape}`]: shape !== undefined,
[`badge-${size}`]: size !== undefined,
[`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
Expand Down
82 changes: 81 additions & 1 deletion core/src/components/badge/test/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,72 +30,112 @@
<ion-item>
<ion-label>Default Badge</ion-label>
<ion-badge slot="end">00</ion-badge>
<ion-badge slot="end" hue="subtle">00</ion-badge>
<ion-badge slot="end">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="end" hue="subtle">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Primary Badge</ion-label>
<ion-badge slot="end" color="primary">11</ion-badge>
<ion-badge slot="end" hue="subtle" color="primary">11</ion-badge>
<ion-badge slot="end" color="primary">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="end" hue="subtle" color="primary">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Secondary Badge</ion-label>
<ion-badge slot="end" color="secondary">22</ion-badge>
<ion-badge slot="end" hue="subtle" color="secondary">22</ion-badge>
<ion-badge slot="end" color="secondary">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="end" hue="subtle" color="secondary">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Tertiary Badge</ion-label>
<ion-badge slot="end" color="tertiary">33</ion-badge>
<ion-badge slot="end" hue="subtle" color="tertiary">33</ion-badge>
<ion-badge slot="end" color="tertiary">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="end" hue="subtle" color="tertiary">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Success Badge</ion-label>
<ion-badge slot="end" color="success">44</ion-badge>
<ion-badge slot="end" hue="subtle" color="success">44</ion-badge>
<ion-badge slot="end" color="success">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="end" hue="subtle" color="success">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Warning Badge</ion-label>
<ion-badge slot="end" color="warning">55</ion-badge>
<ion-badge slot="end" hue="subtle" color="warning">55</ion-badge>
<ion-badge slot="end" color="warning">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="end" hue="subtle" color="warning">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Danger Badge</ion-label>
<ion-badge slot="end" color="danger">66</ion-badge>
<ion-badge slot="end" hue="subtle" color="danger">66</ion-badge>
<ion-badge slot="end" color="danger">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="end" hue="subtle" color="danger">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Light Badge</ion-label>
<ion-badge slot="end" color="light">77</ion-badge>
<ion-badge slot="end" hue="subtle" color="light">77</ion-badge>
<ion-badge slot="end" color="light">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="end" hue="subtle" color="light">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Medium Badge</ion-label>
<ion-badge slot="end" color="medium">88</ion-badge>
<ion-badge slot="end" hue="subtle" color="medium">88</ion-badge>
<ion-badge slot="end" color="medium">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="end" hue="subtle" color="medium">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Dark Badge</ion-label>
<ion-badge slot="end" color="dark">99</ion-badge>
<ion-badge slot="end" hue="subtle" color="dark">99</ion-badge>
<ion-badge slot="end" color="dark">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="end" hue="subtle" color="dark">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item onclick="toggleColor()">
<ion-badge id="toggleColor" slot="end" color="primary">primary</ion-badge>
Expand All @@ -110,72 +150,112 @@
<ion-item>
<ion-label>Default Badge</ion-label>
<ion-badge slot="start">00</ion-badge>
<ion-badge slot="start" color="primary">
<ion-badge slot="start" hue="subtle">00</ion-badge>
<ion-badge slot="start">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge hue="subtle" slot="start">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Primary Badge</ion-label>
<ion-badge slot="start" color="primary">11</ion-badge>
<ion-badge slot="start" hue="subtle" color="primary">11</ion-badge>
<ion-badge slot="start" color="primary">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="start" hue="subtle" color="primary">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Secondary Badge</ion-label>
<ion-badge slot="start" color="secondary">22</ion-badge>
<ion-badge slot="start" hue="subtle" color="secondary">22</ion-badge>
<ion-badge slot="start" color="secondary">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="start" hue="subtle" color="secondary">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Tertiary Badge</ion-label>
<ion-badge slot="start" color="tertiary">33</ion-badge>
<ion-badge slot="start" hue="subtle" color="tertiary">33</ion-badge>
<ion-badge slot="start" color="tertiary">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="start" hue="subtle" color="tertiary">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Success Badge</ion-label>
<ion-badge slot="start" color="success">44</ion-badge>
<ion-badge slot="start" hue="subtle" color="success">44</ion-badge>
<ion-badge slot="start" color="success">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="start" hue="subtle" color="success">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Warning Badge</ion-label>
<ion-badge slot="start" color="warning">55</ion-badge>
<ion-badge slot="start" hue="subtle" color="warning">55</ion-badge>
<ion-badge slot="start" color="warning">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="start" hue="subtle" color="warning">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Danger Badge</ion-label>
<ion-badge slot="start" color="danger">66</ion-badge>
<ion-badge slot="start" hue="subtle" color="danger">66</ion-badge>
<ion-badge slot="start" color="danger">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="start" hue="subtle" color="danger">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Light Badge</ion-label>
<ion-badge slot="start" color="light">77</ion-badge>
<ion-badge slot="start" hue="subtle" color="light">77</ion-badge>
<ion-badge slot="start" color="light">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="start" hue="subtle" color="light">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Medium Badge</ion-label>
<ion-badge slot="start" color="medium">88</ion-badge>
<ion-badge slot="start" hue="subtle" color="medium">88</ion-badge>
<ion-badge slot="start" color="medium">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="start" hue="subtle" color="medium">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
<ion-item>
<ion-label>Dark Badge</ion-label>
<ion-badge slot="start" color="dark">99</ion-badge>
<ion-badge slot="start" hue="subtle" color="dark">99</ion-badge>
<ion-badge slot="start" color="dark">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
<ion-badge slot="start" hue="subtle" color="dark">
<ion-icon name="logo-ionic"></ion-icon>
</ion-badge>
</ion-item>
</ion-list>
</ion-content>
Expand Down
4 changes: 2 additions & 2 deletions packages/angular/src/directives/proxies.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,14 +261,14 @@ export declare interface IonBackdrop extends Components.IonBackdrop {


@ProxyCmp({
inputs: ['color', 'mode', 'shape', 'size', 'theme', 'vertical']
inputs: ['color', 'hue', 'mode', 'shape', 'size', 'theme', 'vertical']
})
@Component({
selector: 'ion-badge',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['color', 'mode', 'shape', 'size', 'theme', 'vertical'],
inputs: ['color', 'hue', 'mode', 'shape', 'size', 'theme', 'vertical'],
})
export class IonBadge {
protected el: HTMLIonBadgeElement;
Expand Down
4 changes: 2 additions & 2 deletions packages/angular/standalone/src/directives/proxies.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -350,14 +350,14 @@ export declare interface IonBackdrop extends Components.IonBackdrop {

@ProxyCmp({
defineCustomElementFn: defineIonBadge,
inputs: ['color', 'mode', 'shape', 'size', 'theme', 'vertical']
inputs: ['color', 'hue', 'mode', 'shape', 'size', 'theme', 'vertical']
})
@Component({
selector: 'ion-badge',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['color', 'mode', 'shape', 'size', 'theme', 'vertical'],
inputs: ['color', 'hue', 'mode', 'shape', 'size', 'theme', 'vertical'],
standalone: true
})
export class IonBadge {
Expand Down
1 change: 1 addition & 0 deletions packages/vue/src/proxies.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ export const IonBackdrop: StencilVueComponent<JSX.IonBackdrop> = /*@__PURE__*/ d

export const IonBadge: StencilVueComponent<JSX.IonBadge> = /*@__PURE__*/ defineContainer<JSX.IonBadge>('ion-badge', defineIonBadge, [
'color',
'hue',
'shape',
'size',
'vertical'
Expand Down
Loading