diff --git a/core/api.txt b/core/api.txt index a8217994eef..071a102000a 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1931,16 +1931,12 @@ ion-popover,part,content ion-progress-bar,shadow ion-progress-bar,prop,buffer,number,1,false,false ion-progress-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true -ion-progress-bar,prop,mode,"ios" | "md",undefined,false,false ion-progress-bar,prop,reversed,boolean,false,false,false ion-progress-bar,prop,shape,"rectangular" | "round" | undefined,undefined,false,false -ion-progress-bar,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-progress-bar,prop,type,"determinate" | "indeterminate",'determinate',false,false ion-progress-bar,prop,value,number,0,false,false -ion-progress-bar,css-prop,--background,ios -ion-progress-bar,css-prop,--background,md -ion-progress-bar,css-prop,--progress-background,ios -ion-progress-bar,css-prop,--progress-background,md +ion-progress-bar,css-prop,--ion-progress-bar-determinate-buffer-bar-default-background +ion-progress-bar,css-prop,--ion-progress-bar-determinate-progress-default-background ion-progress-bar,part,progress ion-progress-bar,part,stream ion-progress-bar,part,track diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 5d1eff6638c..f7ac316bc1f 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -28,6 +28,7 @@ import { PickerChangeEventDetail } from "./components/picker/picker-interfaces"; import { PickerColumnChangeEventDetail, PickerColumnValue } from "./components/picker-column/picker-column-interfaces"; import { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface"; import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface"; +import { IonProgressBarShape } from "./components/progress-bar/progress-bar.interfaces"; import { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface"; import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface"; import { RefresherEventDetail } from "./components/refresher/refresher-interface"; @@ -68,6 +69,7 @@ export { PickerChangeEventDetail } from "./components/picker/picker-interfaces"; export { PickerColumnChangeEventDetail, PickerColumnValue } from "./components/picker-column/picker-column-interfaces"; export { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface"; export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface"; +export { IonProgressBarShape } from "./components/progress-bar/progress-bar.interfaces"; export { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface"; export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface"; export { RefresherEventDetail } from "./components/refresher/refresher-interface"; @@ -2987,23 +2989,15 @@ 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; - /** - * The mode determines the platform behaviors of the component. - */ - "mode"?: "ios" | "md"; /** * If true, reverse the progress bar direction. * @default false */ "reversed": boolean; /** - * 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. + * 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. */ - "shape"?: 'round' | 'rectangular'; - /** - * The theme determines the visual appearance of the component. - */ - "theme"?: "ios" | "md" | "ionic"; + "shape"?: IonProgressBarShape; /** * 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). * @default 'determinate' @@ -8911,23 +8905,15 @@ 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; - /** - * The mode determines the platform behaviors of the component. - */ - "mode"?: "ios" | "md"; /** * If true, reverse the progress bar direction. * @default false */ "reversed"?: boolean; /** - * 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. + * 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. */ - "shape"?: 'round' | 'rectangular'; - /** - * The theme determines the visual appearance of the component. - */ - "theme"?: "ios" | "md" | "ionic"; + "shape"?: IonProgressBarShape; /** * 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). * @default 'determinate' diff --git a/core/src/components/progress-bar/progress-bar.common.scss b/core/src/components/progress-bar/progress-bar.common.scss deleted file mode 100644 index 95541ae1449..00000000000 --- a/core/src/components/progress-bar/progress-bar.common.scss +++ /dev/null @@ -1,249 +0,0 @@ -@import "../../themes/mixins"; - -// Progress bar -// ------------------------------------------------------------------------ - -// Host has no background by default - this will be added to the progress-buffer-bar -:host { - display: block; - - position: relative; - - width: 100%; - - contain: strict; - - direction: ltr; - overflow: hidden; -} - -.progress, -.progress-indeterminate, -.indeterminate-bar-primary, -.indeterminate-bar-secondary, -.progress-buffer-bar { - @include position(0, 0, 0, 0); - position: absolute; - - width: 100%; - height: 100%; -} - -.buffer-circles-container, -.buffer-circles { - @include position(0, 0, 0, 0); - position: absolute; -} - -// Extend a bit to overflow. The size of animated distance. -.buffer-circles { - /* stylelint-disable property-disallowed-list */ - right: -10px; - left: -10px; - /* stylelint-enable property-disallowed-list */ -} - -// Determinate progress bar -// -------------------------------------------------- - -.progress, -.progress-buffer-bar, -.buffer-circles-container { - /* stylelint-disable-next-line property-disallowed-list */ - transform-origin: left top; - - transition: transform 150ms linear; -} - -// Progress and background bar -// -------------------------------------------------- - -.progress, -.progress-indeterminate { - background: var(--progress-background); - - z-index: 2; -} - -.progress-buffer-bar { - background: var(--background); - - z-index: 1; -} - -.buffer-circles-container { - overflow: hidden; -} - -// MD based animation on indeterminate type -// -------------------------------------------------- - -.indeterminate-bar-primary { - /* stylelint-disable property-disallowed-list */ - top: 0; - right: 0; - bottom: 0; - left: -145.166611%; - /* stylelint-enable property-disallowed-list */ - - animation: primary-indeterminate-translate 2s infinite linear; - - .progress-indeterminate { - animation: primary-indeterminate-scale 2s infinite linear; - animation-play-state: inherit; - } -} - -.indeterminate-bar-secondary { - /* stylelint-disable property-disallowed-list */ - top: 0; - right: 0; - bottom: 0; - left: -54.888891%; - /* stylelint-enable property-disallowed-list */ - - animation: secondary-indeterminate-translate 2s infinite linear; - - .progress-indeterminate { - animation: secondary-indeterminate-scale 2s infinite linear; - animation-play-state: inherit; - } -} - -// Progress Bar: Buffer Circles -// ------------------------------------------------------------------------ - -.buffer-circles { - background-image: radial-gradient(ellipse at center, var(--background) 0%, var(--background) 30%, transparent 30%); - - /* stylelint-disable property-disallowed-list */ - background-repeat: repeat-x; - background-position: 5px center; - background-size: 10px 10px; - /* stylelint-enable property-disallowed-list */ - - z-index: 0; - animation: buffering 450ms infinite linear; -} - -// Progress Bar: Reversed -// ------------------------------------------------------------------------ -// If reversed is set to true, the animation will be reversed -// and the bar will start at the top right - -:host(.progress-bar-reversed) { - transform: scaleX(-1); -} - -// Progress Bar: Paused -// ------------------------------------------------------------------------ - -:host(.progress-paused) { - .indeterminate-bar-secondary, - .indeterminate-bar-primary, - .buffer-circles { - animation-play-state: paused; - } -} - -// Progress Bar: Animation Keyframes -// ------------------------------------------------------------------------ -// Source: https://github.com/material-components/material-components-web/blob/master/packages/mdc-linear-progress/_keyframes.scss - -@keyframes primary-indeterminate-translate { - 0% { - transform: translateX(0); - } - - 20% { - animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819); - - transform: translateX(0); - } - - 59.15% { - animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352); - - transform: translateX(83.67142%); - } - - 100% { - transform: translateX(200.611057%); - } -} - -@keyframes primary-indeterminate-scale { - 0% { - transform: scaleX(0.08); - } - - 36.65% { - animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1); - - transform: scaleX(0.08); - } - - 69.15% { - animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1); - - transform: scaleX(0.661479); - } - - 100% { - transform: scaleX(0.08); - } -} - -@keyframes secondary-indeterminate-translate { - 0% { - animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685); - - transform: translateX(0); - } - - 25% { - animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712); - - transform: translateX(37.651913%); - } - - 48.35% { - animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026); - - transform: translateX(84.386165%); - } - - 100% { - transform: translateX(160.277782%); - } -} - -@keyframes secondary-indeterminate-scale { - 0% { - animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971); - - transform: scaleX(0.08); - } - - 19.15% { - animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315); - - transform: scaleX(0.457104); - } - - 44.15% { - animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179); - - transform: scaleX(0.72796); - } - - 100% { - transform: scaleX(0.08); - } -} - -@keyframes buffering { - to { - transform: translateX(-10px); - } -} diff --git a/core/src/components/progress-bar/progress-bar.interfaces.ts b/core/src/components/progress-bar/progress-bar.interfaces.ts new file mode 100644 index 00000000000..ecea5560d6f --- /dev/null +++ b/core/src/components/progress-bar/progress-bar.interfaces.ts @@ -0,0 +1,108 @@ +export type IonProgressBarRecipe = { + height?: string | number; + + // Indeterminate type (animated, no specific value) + indeterminate?: { + progress?: { + default?: { + background?: string; + }; + semantic?: { + // Default state of the semantic color (not hover, focus, activated, etc.) + default?: { + background?: string; + }; + }; + }; + buffer?: { + bar?: { + default?: { + background?: string; + }; + semantic?: { + default?: { + background?: string; + }; + }; + solid?: { + default?: { + background?: string; + }; + }; + }; + }; + }; + + // Determinate type (has a specific value, optional buffer) + // it has three parts: + // - progress: the progress bar which represents the current value + // - buffer-bar: the buffer bar which represents the buffer value + // - 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 + determinate?: { + progress?: { + default?: { + background?: string; + }; + semantic?: { + // Default state of the semantic color (not hover, focus, activated, etc.) + default?: { + background?: string; + }; + }; + }; + buffer?: { + bar?: { + default?: { + background?: string; + }; + semantic?: { + default?: { + background?: string; + }; + }; + // When progress bar is solid (buffer = 1) + solid?: { + default?: { + background?: string; + }; + }; + }; + circles?: { + default?: { + background?: string; + }; + semantic?: { + default?: { + background?: string; + }; + }; + // When progress bar is solid (buffer = 1) + solid?: { + default?: { + background?: string; + }; + }; + }; + }; + }; + + // Shape variants + shape?: { + round?: { + border?: { + radius?: string | number; + }; + }; + rectangular?: { + border?: { + radius?: string | number; + }; + }; + }; +}; + +export type IonProgressBarConfig = { + shape?: IonProgressBarShape; +}; + +export type IonProgressBarShape = 'round' | 'rectangular'; diff --git a/core/src/components/progress-bar/progress-bar.ionic.scss b/core/src/components/progress-bar/progress-bar.ionic.scss index 3fad235b07f..877322916a2 100644 --- a/core/src/components/progress-bar/progress-bar.ionic.scss +++ b/core/src/components/progress-bar/progress-bar.ionic.scss @@ -1,12 +1,12 @@ @use "../../themes/ionic/ionic.globals.scss" as globals; -@use "./progress-bar.common.scss"; +@use "./progress-bar.scss"; // Ionic Progress bar // -------------------------------------------------- :host { - --background: #{globals.$ion-bg-neutral-subtle-default}; - --progress-background: #{globals.ion-color(primary, base)}; + --background: #{globals.$ion-bg-neutral-subtle-default}; // for determinate - buffer bar and circles + --progress-background: #{globals.ion-color(primary, base)}; // both determinate and indeterminate height: globals.$ion-scale-100; } diff --git a/core/src/components/progress-bar/progress-bar.native.scss b/core/src/components/progress-bar/progress-bar.native.scss index 5bc8e728b77..0bbb0d9d9e6 100644 --- a/core/src/components/progress-bar/progress-bar.native.scss +++ b/core/src/components/progress-bar/progress-bar.native.scss @@ -1,5 +1,5 @@ @import "../../themes/native/native.globals"; -@import "./progress-bar.common.scss"; +@import "./progress-bar.scss"; // Host has no background by default - this will be added to the progress-buffer-bar :host { @@ -7,8 +7,8 @@ * @prop --background: Background of the progress track, or the buffer bar if `buffer` is set * @prop --progress-background: Background of the progress bar representing the current value */ - --background: #{ion-color(primary, base, 0.3)}; - --progress-background: #{ion-color(primary, base)}; + --background: #{ion-color(primary, base, 0.3)}; // for determinate - buffer bar and circles + --progress-background: #{ion-color(primary, base)}; // both determinate and indeterminate } // Progress Bar: Color diff --git a/core/src/components/progress-bar/progress-bar.scss b/core/src/components/progress-bar/progress-bar.scss new file mode 100644 index 00000000000..2e358a94367 --- /dev/null +++ b/core/src/components/progress-bar/progress-bar.scss @@ -0,0 +1,345 @@ +@use "../../themes/mixins" as mixins; + +// Progress Bar: Common Styles +// -------------------------------------------------- + +:host { + /** + * @prop --ion-progress-bar-determinate-buffer-bar-default-background: Background of the progress track, or the buffer bar if `buffer` is set + * @prop --ion-progress-bar-determinate-progress-default-background: Background of the progress bar representing the current value + */ + + display: block; + + position: relative; + + width: 100%; + height: var(--ion-progress-bar-height); + + contain: strict; + + direction: ltr; + overflow: hidden; +} + +.progress, +.progress-indeterminate, +.indeterminate-bar-primary, +.indeterminate-bar-secondary, +.progress-buffer-bar { + @include mixins.position(0, 0, 0, 0); + position: absolute; + + width: 100%; + height: 100%; +} + +.progress, +.progress-indeterminate { + z-index: 2; +} + +.progress-buffer-bar { + z-index: 1; +} + +.buffer-circles-container, +.buffer-circles { + @include mixins.position(0, 0, 0, 0); + position: absolute; +} + +.buffer-circles-container { + overflow: hidden; +} + +// Extend a bit to overflow. The size of animated distance. +.buffer-circles { + /* stylelint-disable property-disallowed-list */ + right: -10px; + left: -10px; + /* stylelint-enable property-disallowed-list */ +} + +// Progress Bar Types +// -------------------------------------------------- + +// Determinate +.progress, +.progress-buffer-bar, +.buffer-circles-container { + /* stylelint-disable-next-line property-disallowed-list */ + transform-origin: left top; + + transition: transform 150ms linear; +} + +.progress { + background: var(--ion-progress-bar-determinate-progress-default-background); +} + +:host(.progress-bar-determinate) .progress-buffer-bar { + background: var(--ion-progress-bar-determinate-buffer-bar-default-background); +} + +.buffer-circles { + background-image: radial-gradient( + ellipse at center, + var(--ion-progress-bar-determinate-buffer-circles-default-background) 0%, + var(--ion-progress-bar-determinate-buffer-circles-default-background) 30%, + transparent 30% + ); + + /* stylelint-disable property-disallowed-list */ + background-repeat: repeat-x; + background-position: 5px center; + background-size: 10px 10px; + /* stylelint-enable property-disallowed-list */ + + z-index: 0; + animation: buffering 450ms infinite linear; +} + +// Indeterminate +.progress-indeterminate { + background: var(--ion-progress-bar-indeterminate-progress-default-background); +} + +:host(.progress-bar-indeterminate) .progress-buffer-bar { + background: var(--ion-progress-bar-indeterminate-buffer-bar-default-background); +} + +// Progress Bar Shapes +// -------------------------------------------------- + +:host(.progress-bar-shape-round) { + @include mixins.border-radius(var(--ion-progress-bar-shape-round-border-radius)); +} + +:host(.progress-bar-shape-rectangular) { + @include mixins.border-radius(var(--ion-progress-bar-shape-rectangular-border-radius)); +} + +// Progress Bar Semantic Colors +// -------------------------------------------------- + +// Determinate +:host(.ion-color) .progress { + background: var(--ion-progress-bar-determinate-progress-semantic-default-background); +} + +:host(.ion-color.progress-bar-determinate:not(.progress-bar-solid)) .progress-buffer-bar { + background: var( + --ion-progress-bar-determinate-buffer-bar-semantic-default-background, + var(--ion-progress-bar-determinate-buffer-bar-default-background) + ); +} + +:host(.ion-color) .buffer-circles { + background-image: radial-gradient( + ellipse at center, + var(--ion-progress-bar-determinate-buffer-circles-semantic-default-background) 0%, + var(--ion-progress-bar-determinate-buffer-circles-semantic-default-background) 30%, + transparent 30% + ); +} + +// Indeterminate +:host(.ion-color) .progress-indeterminate { + background: var(--ion-progress-bar-indeterminate-progress-semantic-default-background); +} + +:host(.ion-color.progress-bar-indeterminate:not(.progress-bar-solid)) .progress-buffer-bar { + background: var( + --ion-progress-bar-indeterminate-buffer-bar-semantic-default-background, + var(--ion-progress-bar-indeterminate-buffer-bar-default-background) + ); +} + +// Progress Bar States +// -------------------------------------------------- + +// Reversed +// If set to true, the animation will be reversed +// and the bar will start at the top right +:host(.progress-bar-reversed) { + transform: scaleX(-1); +} + +// Paused +:host(.progress-paused) { + .indeterminate-bar-secondary, + .indeterminate-bar-primary, + .buffer-circles { + animation-play-state: paused; + } +} + +// Progress Bar Solid State (buffer = 1) +// -------------------------------------------------- + +// Determinate +:host(.progress-bar-solid.progress-bar-determinate) .progress-buffer-bar { + background: var( + --ion-progress-bar-determinate-buffer-bar-solid-default-background, + var(--ion-progress-bar-determinate-buffer-bar-default-background) + ); +} + +:host(.progress-bar-solid) .buffer-circles { + background-image: radial-gradient( + ellipse at center, + var(--ion-progress-bar-determinate-buffer-circles-solid-default-background) 0%, + var(--ion-progress-bar-determinate-buffer-circles-solid-default-background) 30%, + transparent 30% + ); +} + +// Indeterminate +:host(.progress-bar-solid.progress-bar-indeterminate) .progress-buffer-bar { + background: var( + --ion-progress-bar-indeterminate-buffer-bar-solid-default-background, + var(--ion-progress-bar-indeterminate-buffer-bar-default-background) + ); +} + +// Progress Bar Animation +// -------------------------------------------------- + +// Indeterminate +.indeterminate-bar-primary { + /* stylelint-disable property-disallowed-list */ + top: 0; + right: 0; + bottom: 0; + left: -145.166611%; + /* stylelint-enable property-disallowed-list */ + + animation: primary-indeterminate-translate 2s infinite linear; + + .progress-indeterminate { + animation: primary-indeterminate-scale 2s infinite linear; + animation-play-state: inherit; + } +} + +.indeterminate-bar-secondary { + /* stylelint-disable property-disallowed-list */ + top: 0; + right: 0; + bottom: 0; + left: -54.888891%; + /* stylelint-enable property-disallowed-list */ + + animation: secondary-indeterminate-translate 2s infinite linear; + + .progress-indeterminate { + animation: secondary-indeterminate-scale 2s infinite linear; + animation-play-state: inherit; + } +} + +// Progress Bar Animation Keyframes +// -------------------------------------------------- + +// Source: https://github.com/material-components/material-components-web/blob/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-linear-progress/_linear-progress.scss#L323-L357 +@keyframes primary-indeterminate-translate { + 0% { + transform: translateX(0); + } + + 20% { + animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819); + + transform: translateX(0); + } + + 59.15% { + animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352); + + transform: translateX(83.67142%); + } + + 100% { + transform: translateX(200.611057%); + } +} + +// Source: https://github.com/material-components/material-components-web/blob/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-linear-progress/_linear-progress.scss#L359-L379 +@keyframes primary-indeterminate-scale { + 0% { + transform: scaleX(0.08); + } + + 36.65% { + animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1); + + transform: scaleX(0.08); + } + + 69.15% { + animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1); + + transform: scaleX(0.661479); + } + + 100% { + transform: scaleX(0.08); + } +} + +// Source: https://github.com/material-components/material-components-web/blob/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-linear-progress/_linear-progress.scss#L381-L414 +@keyframes secondary-indeterminate-translate { + 0% { + animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685); + + transform: translateX(0); + } + + 25% { + animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712); + + transform: translateX(37.651913%); + } + + 48.35% { + animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026); + + transform: translateX(84.386165%); + } + + 100% { + transform: translateX(160.277782%); + } +} + +// Source: https://github.com/material-components/material-components-web/blob/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-linear-progress/_linear-progress.scss#L416-L452 +@keyframes secondary-indeterminate-scale { + 0% { + animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971); + + transform: scaleX(0.08); + } + + 19.15% { + animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315); + + transform: scaleX(0.457104); + } + + 44.15% { + animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179); + + transform: scaleX(0.72796); + } + + 100% { + transform: scaleX(0.08); + } +} + +@keyframes buffering { + to { + transform: translateX(-10px); + } +} diff --git a/core/src/components/progress-bar/progress-bar.tsx b/core/src/components/progress-bar/progress-bar.tsx index 729448aff1e..5534e0a32a6 100644 --- a/core/src/components/progress-bar/progress-bar.tsx +++ b/core/src/components/progress-bar/progress-bar.tsx @@ -4,13 +4,11 @@ import { clamp } from '@utils/helpers'; import { createColorClasses } from '@utils/theme'; import { config } from '../../global/config'; -import { getIonTheme } from '../../global/ionic-global'; import type { Color } from '../../interface'; +import type { IonProgressBarShape } from './progress-bar.interfaces'; + /** - * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component. - * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component. - * * @part progress - The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`. * @part stream - The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`. * @part track - The track bar behind the progress bar. If the `buffer` property is set and `type` is `"determinate"` the track will be the @@ -18,11 +16,7 @@ import type { Color } from '../../interface'; */ @Component({ tag: 'ion-progress-bar', - styleUrls: { - ios: 'progress-bar.ios.scss', - md: 'progress-bar.md.scss', - ionic: 'progress-bar.ionic.scss', - }, + styleUrl: 'progress-bar.scss', shadow: true, }) export class ProgressBar implements ComponentInterface { @@ -61,31 +55,22 @@ export class ProgressBar implements ComponentInterface { * 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. + * Defaults to `"round"` if both the shape property and theme config are unset. */ - @Prop() shape?: 'round' | 'rectangular'; - - private getShape(): string | undefined { - const theme = getIonTheme(this); - const { shape } = this; - - // TODO(ROU-11638): Remove theme check when shapes are defined for all themes. - if (theme !== 'ionic') { - return undefined; - } + @Prop() shape?: IonProgressBarShape; - if (shape === undefined) { - return 'round'; - } - - return shape; + /** + * Gets the progress bar shape. Uses the `shape` property if set, otherwise + * checks the theme config. Returns undefined if neither is set. + */ + get shapeValue(): IonProgressBarShape | undefined { + return this.shape ?? (config.getObjectValue('IonProgressBar.shape') as IonProgressBarShape | undefined); } render() { const { color, type, reversed, value, buffer } = this; const paused = config.getBoolean('_testing'); - const theme = getIonTheme(this); - const shape = this.getShape(); + const shape = this.shapeValue; // If the progress is displayed as a solid bar. const progressSolid = buffer === 1; return ( @@ -95,7 +80,6 @@ export class ProgressBar implements ComponentInterface { aria-valuemin="0" aria-valuemax="1" class={createColorClasses(color, { - [theme]: true, [`progress-bar-${type}`]: true, 'progress-paused': paused, 'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed, diff --git a/core/src/components/progress-bar/test/basic/index.html b/core/src/components/progress-bar/test/basic/index.html index 31ab53d9137..da38c6a7faa 100644 --- a/core/src/components/progress-bar/test/basic/index.html +++ b/core/src/components/progress-bar/test/basic/index.html @@ -15,11 +15,11 @@