Skip to content

Commit 2fbeade

Browse files
thetaPCthetaPC
committed
feat(progress-bar): cleanup
1 parent 10f28df commit 2fbeade

5 files changed

Lines changed: 47 additions & 18 deletions

File tree

‎core/src/components/chip/chip.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,8 @@ export class Chip implements ComponentInterface {
8484

8585
/**
8686
* Gets the chip fill. Uses the `fill` property if set, otherwise
87-
* checks the theme config and falls back to 'solid' if neither is provided.
87+
* checks the theme config. Defaults to `solid` if
88+
* neither is set.
8889
*/
8990
get fillValue(): IonChipFill {
9091
const fillConfig = config.getObjectValue('IonChip.fill', 'solid') as IonChipFill;
@@ -95,7 +96,8 @@ export class Chip implements ComponentInterface {
9596

9697
/**
9798
* Gets the chip hue. Uses the `hue` property if set, otherwise
98-
* checks the theme config and falls back to 'subtle' if neither is provided.
99+
* checks the theme config. Defaults to `subtle` if
100+
* neither is set.
99101
*/
100102
get hueValue(): IonChipHue {
101103
const hueConfig = config.getObjectValue('IonChip.hue', 'subtle') as IonChipHue;
@@ -106,7 +108,8 @@ export class Chip implements ComponentInterface {
106108

107109
/**
108110
* Gets the chip shape. Uses the `shape` property if set, otherwise
109-
* checks the theme config and falls back to 'round' if neither is provided.
111+
* checks the theme config. Defaults to `round` if
112+
* neither is set.
110113
*/
111114
get shapeValue(): IonChipShape {
112115
const shapeConfig = config.getObjectValue('IonChip.shape', 'round') as IonChipShape;
@@ -117,7 +120,8 @@ export class Chip implements ComponentInterface {
117120

118121
/**
119122
* Gets the chip size. Uses the `size` property if set, otherwise
120-
* checks the theme config and falls back to 'large' if neither is provided.
123+
* checks the theme config. Defaults to `large` if
124+
* neither is set.
121125
*/
122126
get sizeValue(): IonChipSize {
123127
const sizeConfig = config.getObjectValue('IonChip.size', 'large') as IonChipSize;

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

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,28 @@
55

66
:host {
77
/**
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
8+
* @prop --ion-progress-bar-height: Height of the progress bar
9+
*
10+
* @prop --ion-progress-bar-determinate-progress-default-background: Background of the filled progress indicator in a determinate progress bar
11+
* @prop --ion-progress-bar-determinate-progress-semantic-default-background: Background of the filled progress indicator in a determinate progress bar when a semantic color is applied
12+
*
13+
* @prop --ion-progress-bar-determinate-buffer-bar-default-background: Background of the track representing the buffered amount in a determinate progress bar
14+
* @prop --ion-progress-bar-determinate-buffer-bar-semantic-default-background: Background of the track representing the buffered amount in a determinate progress bar when a semantic color is applied
15+
* @prop --ion-progress-bar-determinate-buffer-bar-solid-default-background: Background of the track representing the buffered amount in a determinate progress bar when it's fully buffered
16+
*
17+
* @prop --ion-progress-bar-determinate-buffer-circles-default-background: Background of the buffer circles in a determinate progress bar
18+
* @prop --ion-progress-bar-determinate-buffer-circles-semantic-default-background: Background of the buffer circles in a determinate progress bar when a semantic color is applied
19+
* @prop --ion-progress-bar-determinate-buffer-circles-solid-default-background: Background of the buffer circles in a determinate progress bar when it's fully buffered
20+
*
21+
* @prop --ion-progress-bar-indeterminate-progress-default-background: Background of the filled progress indicator in an indeterminate progress bar
22+
* @prop --ion-progress-bar-indeterminate-progress-semantic-default-background: Background of the filled progress indicator in an indeterminate progress bar when a semantic color is applied
23+
*
24+
* @prop --ion-progress-bar-indeterminate-buffer-bar-default-background: Background of the track representing the buffered amount in an indeterminate progress bar
25+
* @prop --ion-progress-bar-indeterminate-buffer-bar-semantic-default-background: Background of the track representing the buffered amount in an indeterminate progress bar when a semantic color is applied
26+
* @prop --ion-progress-bar-indeterminate-buffer-bar-solid-default-background: Background of the track representing the buffered amount in an indeterminate progress bar when it's fully buffered
27+
*
28+
* @prop --ion-progress-bar-shape-round-border-radius: Border radius of the `round` progress bar shape
29+
* @prop --ion-progress-bar-shape-rectangular-border-radius: Border radius of the `rectangular` progress bar shape
1030
*/
1131

1232
display: block;
@@ -78,7 +98,7 @@
7898
background: var(--ion-progress-bar-determinate-progress-default-background);
7999
}
80100

81-
:host(.progress-bar-determinate) .progress-buffer-bar {
101+
:host(.progress-bar-type-determinate) .progress-buffer-bar {
82102
background: var(--ion-progress-bar-determinate-buffer-bar-default-background);
83103
}
84104

@@ -105,7 +125,7 @@
105125
background: var(--ion-progress-bar-indeterminate-progress-default-background);
106126
}
107127

108-
:host(.progress-bar-indeterminate) .progress-buffer-bar {
128+
:host(.progress-bar-type-indeterminate) .progress-buffer-bar {
109129
background: var(--ion-progress-bar-indeterminate-buffer-bar-default-background);
110130
}
111131

@@ -128,7 +148,7 @@
128148
background: var(--ion-progress-bar-determinate-progress-semantic-default-background);
129149
}
130150

131-
:host(.ion-color.progress-bar-determinate:not(.progress-bar-solid)) .progress-buffer-bar {
151+
:host(.ion-color.progress-bar-type-determinate:not(.progress-bar-solid)) .progress-buffer-bar {
132152
background: var(
133153
--ion-progress-bar-determinate-buffer-bar-semantic-default-background,
134154
var(--ion-progress-bar-determinate-buffer-bar-default-background)
@@ -149,7 +169,7 @@
149169
background: var(--ion-progress-bar-indeterminate-progress-semantic-default-background);
150170
}
151171

152-
:host(.ion-color.progress-bar-indeterminate:not(.progress-bar-solid)) .progress-buffer-bar {
172+
:host(.ion-color.progress-bar-type-indeterminate:not(.progress-bar-solid)) .progress-buffer-bar {
153173
background: var(
154174
--ion-progress-bar-indeterminate-buffer-bar-semantic-default-background,
155175
var(--ion-progress-bar-indeterminate-buffer-bar-default-background)
@@ -179,7 +199,7 @@
179199
// --------------------------------------------------
180200

181201
// Determinate
182-
:host(.progress-bar-solid.progress-bar-determinate) .progress-buffer-bar {
202+
:host(.progress-bar-solid.progress-bar-type-determinate) .progress-buffer-bar {
183203
background: var(
184204
--ion-progress-bar-determinate-buffer-bar-solid-default-background,
185205
var(--ion-progress-bar-determinate-buffer-bar-default-background)
@@ -196,7 +216,7 @@
196216
}
197217

198218
// Indeterminate
199-
:host(.progress-bar-solid.progress-bar-indeterminate) .progress-buffer-bar {
219+
:host(.progress-bar-solid.progress-bar-type-indeterminate) .progress-buffer-bar {
200220
background: var(
201221
--ion-progress-bar-indeterminate-buffer-bar-solid-default-background,
202222
var(--ion-progress-bar-indeterminate-buffer-bar-default-background)

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -60,11 +60,12 @@ export class ProgressBar implements ComponentInterface {
6060
@Prop() shape?: IonProgressBarShape;
6161

6262
/**
63-
* Gets the progress bar shape. Uses the `shape` property if set, otherwise
64-
* checks the theme config. Returns undefined if neither is set.
63+
* Gets the progress bar shape. Uses the `shape` property if set,
64+
* otherwise checks the theme config. Defaults to `round` if
65+
* neither is set.
6566
*/
66-
get shapeValue(): IonProgressBarShape | undefined {
67-
return this.shape ?? (config.getObjectValue('IonProgressBar.shape') as IonProgressBarShape | undefined);
67+
get shapeValue(): IonProgressBarShape {
68+
return this.shape ?? (config.getObjectValue('IonProgressBar.shape', 'round') as IonProgressBarShape);
6869
}
6970

7071
render() {
@@ -80,7 +81,7 @@ export class ProgressBar implements ComponentInterface {
8081
aria-valuemin="0"
8182
aria-valuemax="1"
8283
class={createColorClasses(color, {
83-
[`progress-bar-${type}`]: true,
84+
[`progress-bar-type-${type}`]: true,
8485
'progress-paused': paused,
8586
'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
8687
'progress-bar-solid': progressSolid,

‎core/src/components/spinner/spinner.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export class Spinner implements ComponentInterface {
6464

6565
/**
6666
* Gets the spinner size. Uses the `size` property if set, otherwise
67-
* checks the theme config and falls back to 'medium' if neither is provided.
67+
* checks the theme config. Defaults to `medium` if neither is set.
6868
*/
6969
get sizeValue(): SpinnerSize {
7070
const sizeConfig = config.getObjectValue('IonSpinner.size', 'medium') as SpinnerSize;

‎core/src/themes/md/default.tokens.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ export const defaultTheme: DefaultTheme = {
3333
size: 'large',
3434
},
3535

36+
IonProgressBar: {
37+
shape: 'rectangular',
38+
},
39+
3640
IonSpinner: {
3741
size: 'medium',
3842
},

0 commit comments

Comments
 (0)