Skip to content

Commit cf033e1

Browse files
thetaPCthetaPC
committed
feat(progress-bar): add recipe and tokens pt2
1 parent 184a126 commit cf033e1

13 files changed

Lines changed: 525 additions & 71 deletions

File tree

‎core/src/components.d.ts‎

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
2828
import { PickerColumnChangeEventDetail, PickerColumnValue } from "./components/picker-column/picker-column-interfaces";
2929
import { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface";
3030
import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
31+
import { IonProgressBarShape } from "./components/progress-bar/progress-bar.interfaces";
3132
import { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
3233
import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
3334
import { RefresherEventDetail } from "./components/refresher/refresher-interface";
@@ -68,6 +69,7 @@ export { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
6869
export { PickerColumnChangeEventDetail, PickerColumnValue } from "./components/picker-column/picker-column-interfaces";
6970
export { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface";
7071
export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
72+
export { IonProgressBarShape } from "./components/progress-bar/progress-bar.interfaces";
7173
export { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
7274
export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
7375
export { RefresherEventDetail } from "./components/refresher/refresher-interface";
@@ -2987,23 +2989,15 @@ export namespace Components {
29872989
* 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).
29882990
*/
29892991
"color"?: Color;
2990-
/**
2991-
* The mode determines the platform behaviors of the component.
2992-
*/
2993-
"mode"?: "ios" | "md";
29942992
/**
29952993
* If true, reverse the progress bar direction.
29962994
* @default false
29972995
*/
29982996
"reversed": boolean;
29992997
/**
3000-
* Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
2998+
* Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners. Defaults to `"round"` if both the shape property and theme config are unset.
30012999
*/
3002-
"shape"?: 'round' | 'rectangular';
3003-
/**
3004-
* The theme determines the visual appearance of the component.
3005-
*/
3006-
"theme"?: "ios" | "md" | "ionic";
3000+
"shape"?: IonProgressBarShape;
30073001
/**
30083002
* The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
30093003
* @default 'determinate'
@@ -8911,23 +8905,15 @@ declare namespace LocalJSX {
89118905
* 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).
89128906
*/
89138907
"color"?: Color;
8914-
/**
8915-
* The mode determines the platform behaviors of the component.
8916-
*/
8917-
"mode"?: "ios" | "md";
89188908
/**
89198909
* If true, reverse the progress bar direction.
89208910
* @default false
89218911
*/
89228912
"reversed"?: boolean;
89238913
/**
8924-
* Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
8914+
* Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners. Defaults to `"round"` if both the shape property and theme config are unset.
89258915
*/
8926-
"shape"?: 'round' | 'rectangular';
8927-
/**
8928-
* The theme determines the visual appearance of the component.
8929-
*/
8930-
"theme"?: "ios" | "md" | "ionic";
8916+
"shape"?: IonProgressBarShape;
89318917
/**
89328918
* The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
89338919
* @default 'determinate'

‎core/src/components/progress-bar/progress-bar.interfaces.ts‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
export type IonProgressBarRecipe = {
2+
height?: string | number;
3+
4+
// Indeterminate type (animated, no specific value)
5+
indeterminate?: {
6+
progress?: {
7+
default?: {
8+
background?: string;
9+
};
10+
semantic?: {
11+
// Default state of the semantic color (not hover, focus, activated, etc.)
12+
default?: {
13+
background?: string;
14+
};
15+
};
16+
};
17+
buffer?: {
18+
bar?: {
19+
default?: {
20+
background?: string;
21+
};
22+
semantic?: {
23+
default?: {
24+
background?: string;
25+
};
26+
};
27+
solid?: {
28+
default?: {
29+
background?: string;
30+
};
31+
};
32+
};
33+
};
34+
};
35+
36+
// Determinate type (has a specific value, optional buffer)
37+
// it has three parts:
38+
// - progress: the progress bar which represents the current value
39+
// - buffer-bar: the buffer bar which represents the buffer value
40+
// - buffer-circles: the buffer circles which are displayed when there is a buffer value but no progress value (value = 0, buffer > 0), this is optional
41+
determinate?: {
42+
progress?: {
43+
default?: {
44+
background?: string;
45+
};
46+
semantic?: {
47+
// Default state of the semantic color (not hover, focus, activated, etc.)
48+
default?: {
49+
background?: string;
50+
};
51+
};
52+
};
53+
buffer?: {
54+
bar?: {
55+
default?: {
56+
background?: string;
57+
};
58+
semantic?: {
59+
default?: {
60+
background?: string;
61+
};
62+
};
63+
// When progress bar is solid (buffer = 1)
64+
solid?: {
65+
default?: {
66+
background?: string;
67+
};
68+
};
69+
};
70+
circles?: {
71+
default?: {
72+
background?: string;
73+
};
74+
semantic?: {
75+
default?: {
76+
background?: string;
77+
};
78+
};
79+
// When progress bar is solid (buffer = 1)
80+
solid?: {
81+
default?: {
82+
background?: string;
83+
};
84+
};
85+
};
86+
};
87+
};
88+
89+
// Shape variants
90+
shape?: {
91+
round?: {
92+
border?: {
93+
radius?: string | number;
94+
};
95+
};
96+
rectangular?: {
97+
border?: {
98+
radius?: string | number;
99+
};
100+
};
101+
};
102+
};
103+
104+
export type IonProgressBarConfig = {
105+
shape?: IonProgressBarShape;
106+
};
107+
108+
export type IonProgressBarShape = 'round' | 'rectangular';

‎core/src/components/progress-bar/progress-bar.ionic.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
@use "../../themes/ionic/ionic.globals.scss" as globals;
2-
@use "./progress-bar.common.scss";
2+
@use "./progress-bar.scss";
33

44
// Ionic Progress bar
55
// --------------------------------------------------
66

77
:host {
8-
--background: #{globals.$ion-bg-neutral-subtle-default};
9-
--progress-background: #{globals.ion-color(primary, base)};
8+
--background: #{globals.$ion-bg-neutral-subtle-default}; // for determinate - buffer bar and circles
9+
--progress-background: #{globals.ion-color(primary, base)}; // both determinate and indeterminate
1010

1111
height: globals.$ion-scale-100;
1212
}

‎core/src/components/progress-bar/progress-bar.native.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
@import "../../themes/native/native.globals";
2-
@import "./progress-bar.common.scss";
2+
@import "./progress-bar.scss";
33

44
// Host has no background by default - this will be added to the progress-buffer-bar
55
:host {
66
/**
77
* @prop --background: Background of the progress track, or the buffer bar if `buffer` is set
88
* @prop --progress-background: Background of the progress bar representing the current value
99
*/
10-
--background: #{ion-color(primary, base, 0.3)};
11-
--progress-background: #{ion-color(primary, base)};
10+
--background: #{ion-color(primary, base, 0.3)}; // for determinate - buffer bar and circles
11+
--progress-background: #{ion-color(primary, base)}; // both determinate and indeterminate
1212
}
1313

1414
// Progress Bar: Color

‎core/src/components/progress-bar/progress-bar.scss‎

Lines changed: 100 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
1-
@import "../../themes/mixins";
1+
@use "../../themes/mixins" as mixins;
22

3-
// Progress bar
3+
// Progress Bar
44
// ------------------------------------------------------------------------
55

6-
// Host has no background by default - this will be added to the progress-buffer-bar
76
:host {
7+
/**
8+
* @prop --ion-progress-bar-determinate-buffer-bar-default-background: Background of the progress track, or the buffer bar if `buffer` is set
9+
* @prop --ion-progress-bar-determinate-progress-default-background: Background of the progress bar representing the current value
10+
*/
11+
812
display: block;
913

1014
position: relative;
1115

1216
width: 100%;
17+
height: var(--ion-progress-bar-height);
1318

1419
contain: strict;
1520

@@ -22,7 +27,7 @@
2227
.indeterminate-bar-primary,
2328
.indeterminate-bar-secondary,
2429
.progress-buffer-bar {
25-
@include position(0, 0, 0, 0);
30+
@include mixins.position(0, 0, 0, 0);
2631
position: absolute;
2732

2833
width: 100%;
@@ -31,7 +36,7 @@
3136

3237
.buffer-circles-container,
3338
.buffer-circles {
34-
@include position(0, 0, 0, 0);
39+
@include mixins.position(0, 0, 0, 0);
3540
position: absolute;
3641
}
3742

@@ -60,22 +65,34 @@
6065

6166
.progress,
6267
.progress-indeterminate {
63-
background: var(--progress-background);
64-
6568
z-index: 2;
6669
}
6770

68-
.progress-buffer-bar {
69-
background: var(--background);
71+
.progress {
72+
background: var(--ion-progress-bar-determinate-progress-default-background);
73+
}
7074

75+
.progress-indeterminate {
76+
background: var(--ion-progress-bar-indeterminate-progress-default-background);
77+
}
78+
79+
.progress-buffer-bar {
7180
z-index: 1;
7281
}
7382

83+
:host(.progress-bar-determinate) .progress-buffer-bar {
84+
background: var(--ion-progress-bar-determinate-buffer-bar-default-background);
85+
}
86+
87+
:host(.progress-bar-indeterminate) .progress-buffer-bar {
88+
background: var(--ion-progress-bar-indeterminate-buffer-bar-default-background);
89+
}
90+
7491
.buffer-circles-container {
7592
overflow: hidden;
7693
}
7794

78-
// MD based animation on indeterminate type
95+
// Indeterminate Animation
7996
// --------------------------------------------------
8097

8198
.indeterminate-bar-primary {
@@ -114,7 +131,12 @@
114131
// ------------------------------------------------------------------------
115132

116133
.buffer-circles {
117-
background-image: radial-gradient(ellipse at center, var(--background) 0%, var(--background) 30%, transparent 30%);
134+
background-image: radial-gradient(
135+
ellipse at center,
136+
var(--ion-progress-bar-determinate-buffer-circles-default-background) 0%,
137+
var(--ion-progress-bar-determinate-buffer-circles-default-background) 30%,
138+
transparent 30%
139+
);
118140

119141
/* stylelint-disable property-disallowed-list */
120142
background-repeat: repeat-x;
@@ -126,6 +148,73 @@
126148
animation: buffering 450ms infinite linear;
127149
}
128150

151+
// Progress Bar: Shape Variants
152+
// -------------------------------------------------------------------------------
153+
154+
:host(.progress-bar-shape-round) {
155+
@include mixins.border-radius(var(--ion-progress-bar-shape-round-border-radius));
156+
}
157+
158+
:host(.progress-bar-shape-rectangular) {
159+
@include mixins.border-radius(var(--ion-progress-bar-shape-rectangular-border-radius));
160+
}
161+
162+
// Progress Bar: Solid (buffer = 1)
163+
// -------------------------------------------------------------------------------
164+
165+
:host(.progress-bar-solid.progress-bar-determinate) .progress-buffer-bar {
166+
background: var(
167+
--ion-progress-bar-determinate-buffer-bar-solid-default-background,
168+
var(--ion-progress-bar-determinate-buffer-bar-default-background)
169+
);
170+
}
171+
172+
:host(.progress-bar-solid.progress-bar-indeterminate) .progress-buffer-bar {
173+
background: var(
174+
--ion-progress-bar-indeterminate-buffer-bar-solid-default-background,
175+
var(--ion-progress-bar-indeterminate-buffer-bar-default-background)
176+
);
177+
}
178+
179+
:host(.progress-bar-solid) .buffer-circles {
180+
background-image: radial-gradient(
181+
ellipse at center,
182+
var(--ion-progress-bar-determinate-buffer-circles-solid-default-background) 0%,
183+
var(--ion-progress-bar-determinate-buffer-circles-solid-default-background) 30%,
184+
transparent 30%
185+
);
186+
}
187+
188+
// Progress Bar: Color
189+
// ------------------------------------------------------------------------
190+
191+
// Indeterminate
192+
:host(.ion-color) .progress-indeterminate {
193+
background: var(--ion-progress-bar-indeterminate-progress-semantic-default-background);
194+
}
195+
196+
// Determinate
197+
:host(.ion-color) .progress {
198+
background: var(--ion-progress-bar-determinate-progress-semantic-default-background);
199+
}
200+
201+
:host(.ion-color.progress-bar-determinate) .progress-buffer-bar {
202+
background: var(--ion-progress-bar-determinate-buffer-bar-semantic-default-background);
203+
}
204+
205+
:host(.ion-color.progress-bar-indeterminate) .progress-buffer-bar {
206+
background: var(--ion-progress-bar-indeterminate-buffer-bar-semantic-default-background);
207+
}
208+
209+
:host(.ion-color) .buffer-circles {
210+
background-image: radial-gradient(
211+
ellipse at center,
212+
var(--ion-progress-bar-determinate-buffer-circles-semantic-default-background) 0%,
213+
var(--ion-progress-bar-determinate-buffer-circles-semantic-default-background) 30%,
214+
transparent 30%
215+
);
216+
}
217+
129218
// Progress Bar: Reversed
130219
// ------------------------------------------------------------------------
131220
// If reversed is set to true, the animation will be reversed

0 commit comments

Comments
 (0)