Skip to content

Commit 58c251b

Browse files
brandyscarneybrandyscarney
committed
feat(item-option): add subtle hue for the ionic theme
1 parent 8fc775f commit 58c251b

File tree

7 files changed

+165
-5
lines changed

7 files changed

+165
-5
lines changed

‎core/src/components.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1696,6 +1696,10 @@ export namespace Components {
16961696
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
16971697
*/
16981698
"href": string | undefined;
1699+
/**
1700+
* Set to `"bold"` for an option with vibrant, bold colors or to `"subtle"` for an option with muted, subtle colors.
1701+
*/
1702+
"hue"?: 'bold' | 'subtle';
16991703
/**
17001704
* The mode determines the platform behaviors of the component.
17011705
*/
@@ -7188,6 +7192,10 @@ declare namespace LocalJSX {
71887192
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
71897193
*/
71907194
"href"?: string | undefined;
7195+
/**
7196+
* Set to `"bold"` for an option with vibrant, bold colors or to `"subtle"` for an option with muted, subtle colors.
7197+
*/
7198+
"hue"?: 'bold' | 'subtle';
71917199
/**
71927200
* The mode determines the platform behaviors of the component.
71937201
*/

‎core/src/components/item-option/item-option.ionic.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,17 @@
7575
:host(.item-option-disabled) .button-native {
7676
opacity: 1;
7777
}
78+
79+
// Subtle Item Option
80+
// --------------------------------------------------
81+
82+
:host(.item-option-subtle) {
83+
--background: #{globals.ion-color(primary, base, $subtle: true)};
84+
--background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
85+
--color: #{globals.ion-color(primary, contrast, $subtle: true)};
86+
}
87+
88+
:host(.item-option-subtle.ion-color) {
89+
background: globals.current-color(base, $subtle: true);
90+
color: globals.current-color(contrast, $subtle: true);
91+
}

‎core/src/components/item-option/item-option.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,12 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
6262
*/
6363
@Prop() href: string | undefined;
6464

65+
/**
66+
* Set to `"bold"` for an option with vibrant, bold colors or to `"subtle"` for
67+
* an option with muted, subtle colors.
68+
*/
69+
@Prop() hue?: 'bold' | 'subtle' = 'bold';
70+
6571
/**
6672
* Specifies the relationship of the target object to the link object.
6773
* The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
@@ -113,7 +119,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
113119
}
114120

115121
render() {
116-
const { disabled, expandable, href } = this;
122+
const { disabled, expandable, href, hue } = this;
117123
const TagType = href === undefined ? 'button' : ('a' as any);
118124
const theme = getIonTheme(this);
119125
const shape = this.getShape();
@@ -133,6 +139,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
133139
class={createColorClasses(this.color, {
134140
[theme]: true,
135141
[`item-option-${shape}`]: shape !== undefined,
142+
[`item-option-${hue}`]: hue !== undefined,
136143
'item-option-disabled': disabled,
137144
'item-option-expandable': expandable,
138145
'ion-activatable': true,

‎core/src/components/item-sliding/test/colors/index.html‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Item Sliding - Colors</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
</head>
16+
17+
<body onLoad="openItems()">
18+
<ion-app>
19+
<ion-header>
20+
<ion-toolbar>
21+
<ion-title>Item Sliding - Colors</ion-title>
22+
</ion-toolbar>
23+
</ion-header>
24+
25+
<ion-content>
26+
<ion-list>
27+
<ion-list-header>
28+
<ion-label>Core Colors</ion-label>
29+
</ion-list-header>
30+
<ion-item-sliding>
31+
<ion-item>
32+
<ion-label>
33+
Bold
34+
</ion-label>
35+
</ion-item>
36+
<ion-item-options side="start">
37+
<ion-item-option color="primary">Primary</ion-item-option>
38+
<ion-item-option color="secondary">Secondary</ion-item-option>
39+
<ion-item-option color="tertiary">Tertiary</ion-item-option>
40+
</ion-item-options>
41+
</ion-item-sliding>
42+
43+
<ion-item-sliding>
44+
<ion-item>
45+
<ion-label>
46+
Subtle
47+
</ion-label>
48+
</ion-item>
49+
<ion-item-options side="start">
50+
<ion-item-option hue="subtle" color="primary">Primary</ion-item-option>
51+
<ion-item-option hue="subtle" color="secondary">Secondary</ion-item-option>
52+
<ion-item-option hue="subtle" color="tertiary">Tertiary</ion-item-option>
53+
</ion-item-options>
54+
</ion-item-options>
55+
</ion-item-sliding>
56+
57+
<ion-list-header>
58+
<ion-label>Status Colors</ion-label>
59+
</ion-list-header>
60+
<ion-item-sliding>
61+
<ion-item>
62+
<ion-label>
63+
Bold
64+
</ion-label>
65+
</ion-item>
66+
<ion-item-options side="start">
67+
<ion-item-option color="success">Success</ion-item-option>
68+
<ion-item-option color="warning">Warning</ion-item-option>
69+
<ion-item-option color="danger">Danger</ion-item-option>
70+
</ion-item-options>
71+
</ion-item-sliding>
72+
73+
<ion-item-sliding>
74+
<ion-item>
75+
<ion-label>
76+
Subtle
77+
</ion-label>
78+
</ion-item>
79+
<ion-item-options side="start">
80+
<ion-item-option hue="subtle" color="success">Success</ion-item-option>
81+
<ion-item-option hue="subtle" color="warning">Warning</ion-item-option>
82+
<ion-item-option hue="subtle" color="danger">Danger</ion-item-option>
83+
</ion-item-options>
84+
</ion-item-options>
85+
</ion-item-sliding>
86+
87+
88+
<ion-list-header>
89+
<ion-label>Neutral Colors</ion-label>
90+
</ion-list-header>
91+
<ion-item-sliding>
92+
<ion-item>
93+
<ion-label>
94+
Bold
95+
</ion-label>
96+
</ion-item>
97+
<ion-item-options side="start">
98+
<ion-item-option color="light">Light</ion-item-option>
99+
<ion-item-option color="medium">Medium</ion-item-option>
100+
<ion-item-option color="dark">Dark</ion-item-option>
101+
</ion-item-options>
102+
</ion-item-sliding>
103+
104+
<ion-item-sliding>
105+
<ion-item>
106+
<ion-label>
107+
Subtle
108+
</ion-label>
109+
</ion-item>
110+
<ion-item-options side="start">
111+
<ion-item-option hue="subtle" color="light">Light</ion-item-option>
112+
<ion-item-option hue="subtle" color="medium">Medium</ion-item-option>
113+
<ion-item-option hue="subtle" color="dark">Dark</ion-item-option>
114+
</ion-item-options>
115+
</ion-item-options>
116+
</ion-item-sliding>
117+
</ion-list>
118+
119+
<script>
120+
// Open all sliding items on load
121+
function openItems() {
122+
document.querySelectorAll('ion-item-sliding').forEach(item => {
123+
item.open();
124+
});
125+
}
126+
</script>
127+
</ion-content>
128+
</ion-app>
129+
</body>
130+
</html>

‎packages/angular/src/directives/proxies.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1131,14 +1131,14 @@ export declare interface IonItemGroup extends Components.IonItemGroup {}
11311131

11321132

11331133
@ProxyCmp({
1134-
inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'shape', 'target', 'theme', 'type']
1134+
inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'hue', 'mode', 'rel', 'shape', 'target', 'theme', 'type']
11351135
})
11361136
@Component({
11371137
selector: 'ion-item-option',
11381138
changeDetection: ChangeDetectionStrategy.OnPush,
11391139
template: '<ng-content></ng-content>',
11401140
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
1141-
inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'shape', 'target', 'theme', 'type'],
1141+
inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'hue', 'mode', 'rel', 'shape', 'target', 'theme', 'type'],
11421142
})
11431143
export class IonItemOption {
11441144
protected el: HTMLIonItemOptionElement;

‎packages/angular/standalone/src/directives/proxies.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1106,14 +1106,14 @@ export declare interface IonItemGroup extends Components.IonItemGroup {}
11061106

11071107
@ProxyCmp({
11081108
defineCustomElementFn: defineIonItemOption,
1109-
inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'shape', 'target', 'theme', 'type']
1109+
inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'hue', 'mode', 'rel', 'shape', 'target', 'theme', 'type']
11101110
})
11111111
@Component({
11121112
selector: 'ion-item-option',
11131113
changeDetection: ChangeDetectionStrategy.OnPush,
11141114
template: '<ng-content></ng-content>',
11151115
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
1116-
inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'shape', 'target', 'theme', 'type'],
1116+
inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'hue', 'mode', 'rel', 'shape', 'target', 'theme', 'type'],
11171117
standalone: true
11181118
})
11191119
export class IonItemOption {

‎packages/vue/src/proxies.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -552,6 +552,7 @@ export const IonItemOption: StencilVueComponent<JSX.IonItemOption> = /*@__PURE__
552552
'download',
553553
'expandable',
554554
'href',
555+
'hue',
555556
'rel',
556557
'target',
557558
'type',

0 commit comments

Comments
 (0)