From 8f3f408c6d6de54f4c38f29b6e96e8e783fa63b5 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Thu, 26 Sep 2024 12:17:13 -0500 Subject: [PATCH 01/26] Updated documentation for progress indicators --- .../src/content/docs/progressindicator.mdx | 60 ++++++++++++++++++- examples/ProgressLinear.label.css | 6 ++ examples/ProgressLinear.label.jsx | 15 +++++ examples/ProgressLinear.status.css | 6 ++ examples/ProgressLinear.status.jsx | 28 +++++++++ examples/ProgressLinear.value.css | 3 + examples/ProgressLinear.value.jsx | 14 +++++ examples/ProgressRadial.content.jsx | 14 +++++ examples/ProgressRadial.size.css | 6 ++ examples/ProgressRadial.size.jsx | 17 ++++++ examples/ProgressRadial.status.css | 6 ++ examples/ProgressRadial.status.jsx | 16 +++++ examples/ProgressRadial.value.jsx | 10 ++++ examples/index.tsx | 36 +++++++++++ 14 files changed, 234 insertions(+), 3 deletions(-) create mode 100644 examples/ProgressLinear.label.css create mode 100644 examples/ProgressLinear.label.jsx create mode 100644 examples/ProgressLinear.status.css create mode 100644 examples/ProgressLinear.status.jsx create mode 100644 examples/ProgressLinear.value.css create mode 100644 examples/ProgressLinear.value.jsx create mode 100644 examples/ProgressRadial.content.jsx create mode 100644 examples/ProgressRadial.size.css create mode 100644 examples/ProgressRadial.size.jsx create mode 100644 examples/ProgressRadial.status.css create mode 100644 examples/ProgressRadial.status.jsx create mode 100644 examples/ProgressRadial.value.jsx diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index d2656072a41..11be68a8075 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -4,28 +4,82 @@ description: Progress indicators express an unspecified wait time or display the thumbnail: ProgressIndicator --- -

{frontmatter.description}

+{frontmatter.description} There are two types of progress indicators which are linear and radial. ## Progress linear - +### Usage + +The default linear progress indicator is set to be indeterminate. If a `value` is passed, the indicator becomes determinate. +#### Value + +To specify a value for indeterminate linear indicator, pass a number into the `value` prop. We recommend keeping the value inclusively between 0 and 100. + + + + + +For determinate indicators, use the `isAnimated` flag to apply animation as the value changes. + +#### Label + +Indicator label can be passed into the `labels` prop as an array. If one label is passed, it will be centered. If there are two labels, each is pushed to one end of the progress indicator. + + + + + +#### Status + +The indicator can have a progress status. The available statuses are `positive`, `negative`, and `warning`. + + + + + ### Props ## Progress radial - +### Usage + +Similar to linear progress indicators, the radial indicator is indeterminate by default unless a `value` is passed. +#### Size + +There 4 sizes available, which are `x-small`, `small`, `medium`, and `large`. The default size is `medium`. + + + + + +#### Content + +The radial progress indicator can wrap around a JSX element such as icons, texts or other components. This `children` content helps provide flexibility to enhance the progress display with additional visual appearance. + + + + + +#### Status + +There are 3 statuses available for the radial indicator, which are `positive`, `negative`, and `warning`. Unlike linear indicators, each radial indicator with status is accompanied by an icon, providing a visual cue to inform the current progress state better. These icons can be replaced by a content. + + + + + ## Accessibility To make the progress indicator accessible to non-sighted users, a visually-hidden "Loading" message will be automatically included when the `value` is not set to 100%. diff --git a/examples/ProgressLinear.label.css b/examples/ProgressLinear.label.css new file mode 100644 index 00000000000..8cc0a04ee6d --- /dev/null +++ b/examples/ProgressLinear.label.css @@ -0,0 +1,6 @@ +.demo-container { + display: flex; + flex-direction: column; + gap: var(--iui-size-s); + width: min(100%, 200px); +} diff --git a/examples/ProgressLinear.label.jsx b/examples/ProgressLinear.label.jsx new file mode 100644 index 00000000000..50ffdf93fe1 --- /dev/null +++ b/examples/ProgressLinear.label.jsx @@ -0,0 +1,15 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { ProgressLinear } from '@itwin/itwinui-react'; + +export default () => { + return ( +
+ + +
+ ); +}; diff --git a/examples/ProgressLinear.status.css b/examples/ProgressLinear.status.css new file mode 100644 index 00000000000..8cc0a04ee6d --- /dev/null +++ b/examples/ProgressLinear.status.css @@ -0,0 +1,6 @@ +.demo-container { + display: flex; + flex-direction: column; + gap: var(--iui-size-s); + width: min(100%, 200px); +} diff --git a/examples/ProgressLinear.status.jsx b/examples/ProgressLinear.status.jsx new file mode 100644 index 00000000000..5c17a122607 --- /dev/null +++ b/examples/ProgressLinear.status.jsx @@ -0,0 +1,28 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { ProgressLinear } from '@itwin/itwinui-react'; + +export default () => { + return ( +
+ + + +
+ ); +}; diff --git a/examples/ProgressLinear.value.css b/examples/ProgressLinear.value.css new file mode 100644 index 00000000000..b4f72ba9f1f --- /dev/null +++ b/examples/ProgressLinear.value.css @@ -0,0 +1,3 @@ +.demo-container { + width: min(100%, 200px); +} diff --git a/examples/ProgressLinear.value.jsx b/examples/ProgressLinear.value.jsx new file mode 100644 index 00000000000..3adc7e36d8b --- /dev/null +++ b/examples/ProgressLinear.value.jsx @@ -0,0 +1,14 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { ProgressLinear } from '@itwin/itwinui-react'; + +export default () => { + return ( +
+ +
+ ); +}; diff --git a/examples/ProgressRadial.content.jsx b/examples/ProgressRadial.content.jsx new file mode 100644 index 00000000000..60be209e581 --- /dev/null +++ b/examples/ProgressRadial.content.jsx @@ -0,0 +1,14 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { ProgressRadial, Text } from '@itwin/itwinui-react'; + +export default () => { + return ( + + 100% + + ); +}; diff --git a/examples/ProgressRadial.size.css b/examples/ProgressRadial.size.css new file mode 100644 index 00000000000..c63c46e5e74 --- /dev/null +++ b/examples/ProgressRadial.size.css @@ -0,0 +1,6 @@ +.demo-container { + display: flex; + flex-direction: row; + align-items: center; + gap: var(--iui-size-s); +} diff --git a/examples/ProgressRadial.size.jsx b/examples/ProgressRadial.size.jsx new file mode 100644 index 00000000000..66d40154e77 --- /dev/null +++ b/examples/ProgressRadial.size.jsx @@ -0,0 +1,17 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { ProgressRadial } from '@itwin/itwinui-react'; + +export default () => { + return ( +
+ + + + +
+ ); +}; diff --git a/examples/ProgressRadial.status.css b/examples/ProgressRadial.status.css new file mode 100644 index 00000000000..c63c46e5e74 --- /dev/null +++ b/examples/ProgressRadial.status.css @@ -0,0 +1,6 @@ +.demo-container { + display: flex; + flex-direction: row; + align-items: center; + gap: var(--iui-size-s); +} diff --git a/examples/ProgressRadial.status.jsx b/examples/ProgressRadial.status.jsx new file mode 100644 index 00000000000..de528ea449b --- /dev/null +++ b/examples/ProgressRadial.status.jsx @@ -0,0 +1,16 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { ProgressRadial } from '@itwin/itwinui-react'; + +export default () => { + return ( +
+ + + +
+ ); +}; diff --git a/examples/ProgressRadial.value.jsx b/examples/ProgressRadial.value.jsx new file mode 100644 index 00000000000..bd9e16616ee --- /dev/null +++ b/examples/ProgressRadial.value.jsx @@ -0,0 +1,10 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { ProgressRadial } from '@itwin/itwinui-react'; + +export default () => { + return ; +}; diff --git a/examples/index.tsx b/examples/index.tsx index d6ee488c09c..26e4405e379 100644 --- a/examples/index.tsx +++ b/examples/index.tsx @@ -892,12 +892,48 @@ const ProgressLinearMainExample = withThemeProvider( ); export { ProgressLinearMainExample }; +import { default as ProgressLinearValueExampleRaw } from './ProgressLinear.value'; +const ProgressLinearValueExample = withThemeProvider( + ProgressLinearValueExampleRaw, +); +export { ProgressLinearValueExample }; + +import { default as ProgressLinearLabelExampleRaw } from './ProgressLinear.label'; +const ProgressLinearLabelExample = withThemeProvider( + ProgressLinearLabelExampleRaw, +); +export { ProgressLinearLabelExample }; + +import { default as ProgressLinearStatusExampleRaw } from './ProgressLinear.status'; +const ProgressLinearStatusExample = withThemeProvider( + ProgressLinearStatusExampleRaw, +); +export { ProgressLinearStatusExample }; + import { default as ProgressRadialMainExampleRaw } from './ProgressRadial.main'; const ProgressRadialMainExample = withThemeProvider( ProgressRadialMainExampleRaw, ); export { ProgressRadialMainExample }; +import { default as ProgressRadialSizeExampleRaw } from './ProgressRadial.size'; +const ProgressRadialSizeExample = withThemeProvider( + ProgressRadialSizeExampleRaw, +); +export { ProgressRadialSizeExample }; + +import { default as ProgressRadialContentExampleRaw } from './ProgressRadial.content'; +const ProgressRadialContentExample = withThemeProvider( + ProgressRadialContentExampleRaw, +); +export { ProgressRadialContentExample }; + +import { default as ProgressRadialStatusExampleRaw } from './ProgressRadial.status'; +const ProgressRadialStatusExample = withThemeProvider( + ProgressRadialStatusExampleRaw, +); +export { ProgressRadialStatusExample }; + // ---------------------------------------------------------------------------- import { default as RadioMainExampleRaw } from './Radio.main'; From 2147191cfa3d9636c74a86a01f22b9f1097bee60 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Thu, 26 Sep 2024 12:46:15 -0500 Subject: [PATCH 02/26] added value example --- apps/website/src/content/docs/progressindicator.mdx | 8 +++++++- examples/index.tsx | 6 ++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index 11be68a8075..3b271f76413 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -50,12 +50,18 @@ The indicator can have a progress status. The available statuses are `positive`, ### Usage -Similar to linear progress indicators, the radial indicator is indeterminate by default unless a `value` is passed. +Like linear progress indicators, the radial indicator is indeterminate by default. It becomes determinate when a `value` is passed. +#### Value + + + + + #### Size There 4 sizes available, which are `x-small`, `small`, `medium`, and `large`. The default size is `medium`. diff --git a/examples/index.tsx b/examples/index.tsx index 26e4405e379..5ef45290a00 100644 --- a/examples/index.tsx +++ b/examples/index.tsx @@ -916,6 +916,12 @@ const ProgressRadialMainExample = withThemeProvider( ); export { ProgressRadialMainExample }; +import { default as ProgressRadialValueExampleRaw } from './ProgressRadial.value'; +const ProgressRadialValueExample = withThemeProvider( + ProgressRadialValueExampleRaw, +); +export { ProgressRadialValueExample }; + import { default as ProgressRadialSizeExampleRaw } from './ProgressRadial.size'; const ProgressRadialSizeExample = withThemeProvider( ProgressRadialSizeExampleRaw, From b3f0af73904367c4c9fa2d0f9f2e3a180a46b597 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Thu, 26 Sep 2024 13:32:11 -0500 Subject: [PATCH 03/26] cleaned up --- .../src/content/docs/progressindicator.mdx | 42 ++++++++++--------- examples/ProgressLinear.main.jsx | 2 +- examples/ProgressRadial.main.jsx | 2 +- 3 files changed, 24 insertions(+), 22 deletions(-) diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index 3b271f76413..0073b2d1e3e 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -10,7 +10,7 @@ thumbnail: ProgressIndicator ### Usage -The default linear progress indicator is set to be indeterminate. If a `value` is passed, the indicator becomes determinate. +The default linear progress indicator is indeterminate by default. If a `value` is passed, the indicator becomes determinate. @@ -18,7 +18,7 @@ The default linear progress indicator is set to be indeterminate. If a `value` i #### Value -To specify a value for indeterminate linear indicator, pass a number into the `value` prop. We recommend keeping the value inclusively between 0 and 100. +To specify a value for indeterminate linear indicator, pass a number into the `value` prop. If the `indeterminate` prop is set to `true`, this value will be ignored. We recommend keeping the value inclusively between 0 and 100. @@ -26,14 +26,6 @@ To specify a value for indeterminate linear indicator, pass a number into the `v For determinate indicators, use the `isAnimated` flag to apply animation as the value changes. -#### Label - -Indicator label can be passed into the `labels` prop as an array. If one label is passed, it will be centered. If there are two labels, each is pushed to one end of the progress indicator. - - - - - #### Status The indicator can have a progress status. The available statuses are `positive`, `negative`, and `warning`. @@ -42,6 +34,14 @@ The indicator can have a progress status. The available statuses are `positive`, +#### Label + +Indicator label can be passed into the `labels` prop as an array. If one label is passed, it will be centered. If there are two labels, each is pushed to one end of the progress indicator. + + + + + ### Props @@ -58,13 +58,23 @@ Like linear progress indicators, the radial indicator is indeterminate by defaul #### Value +To specify a value for the indeterminate radial indicator, pass a number into the `value` prop. If the `indeterminate` prop is set to `true`, this value will be ignored. We recommend keeping the value inclusively between 0 and 100. + +#### Status + +Three statuses available for radial indicators are `positive`, `negative`, and `warning`. Unlike linear indicators, each radial indicator with status is accompanied by an icon, providing a visual cue to inform the current progress state better. The icon can be replaced by a [content](#content). + + + + + #### Size -There 4 sizes available, which are `x-small`, `small`, `medium`, and `large`. The default size is `medium`. +Four size options available are `x-small`, `small`, `medium`, and `large`. The default size is `medium`. @@ -72,20 +82,12 @@ There 4 sizes available, which are `x-small`, `small`, `medium`, and `large`. Th #### Content -The radial progress indicator can wrap around a JSX element such as icons, texts or other components. This `children` content helps provide flexibility to enhance the progress display with additional visual appearance. +The radial progress indicator can be wrapped around JSX elements, such as icons, texts or other components. This content helps provide flexibility to enhance the progress display with additional visual appearance. -#### Status - -There are 3 statuses available for the radial indicator, which are `positive`, `negative`, and `warning`. Unlike linear indicators, each radial indicator with status is accompanied by an icon, providing a visual cue to inform the current progress state better. These icons can be replaced by a content. - - - - - ## Accessibility To make the progress indicator accessible to non-sighted users, a visually-hidden "Loading" message will be automatically included when the `value` is not set to 100%. diff --git a/examples/ProgressLinear.main.jsx b/examples/ProgressLinear.main.jsx index 356e47d395a..94a21ec18e8 100644 --- a/examples/ProgressLinear.main.jsx +++ b/examples/ProgressLinear.main.jsx @@ -8,7 +8,7 @@ import { ProgressLinear } from '@itwin/itwinui-react'; export default () => { return (
- +
); }; diff --git a/examples/ProgressRadial.main.jsx b/examples/ProgressRadial.main.jsx index 5b2edd4aed9..9605fad9ce0 100644 --- a/examples/ProgressRadial.main.jsx +++ b/examples/ProgressRadial.main.jsx @@ -6,5 +6,5 @@ import * as React from 'react'; import { ProgressRadial } from '@itwin/itwinui-react'; export default () => { - return ; + return ; }; From b9e42aeb1ab41ff54a38e88e15b02e23e028480d Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Thu, 26 Sep 2024 14:36:35 -0500 Subject: [PATCH 04/26] wording --- apps/website/src/content/docs/progressindicator.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index 0073b2d1e3e..cc9a32cbf1a 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -28,7 +28,7 @@ For determinate indicators, use the `isAnimated` flag to apply animation as the #### Status -The indicator can have a progress status. The available statuses are `positive`, `negative`, and `warning`. +Three available statuses for linear progress indicators are `positive`, `negative`, and `warning`. From 69bcb67965f18c59e01746699993cba88f83eb38 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Fri, 27 Sep 2024 15:48:59 -0500 Subject: [PATCH 05/26] reworded and moved sections around --- .../src/content/docs/progressindicator.mdx | 86 ++++++++----------- 1 file changed, 36 insertions(+), 50 deletions(-) diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index cc9a32cbf1a..af4433b8501 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -1,90 +1,70 @@ --- title: Progress indicator -description: Progress indicators express an unspecified wait time or display the length of a process. +description: Progress indicators express the length of in-progress operations. thumbnail: ProgressIndicator --- -{frontmatter.description} There are two types of progress indicators which are linear and radial. +

{frontmatter.description}

-## Progress linear +## Usage -### Usage - -The default linear progress indicator is indeterminate by default. If a `value` is passed, the indicator becomes determinate. +There are two types of progress indicators which are linear and radial. The default progress indicator is indeterminate. If a `value` is passed, the indicator becomes determinate. -#### Value - -To specify a value for indeterminate linear indicator, pass a number into the `value` prop. If the `indeterminate` prop is set to `true`, this value will be ignored. We recommend keeping the value inclusively between 0 and 100. - - - + + -For determinate indicators, use the `isAnimated` flag to apply animation as the value changes. +### Value -#### Status +To specify a value for indeterminate indicator, pass a number into the `value` prop. This prop is available for both linear and radial indicators. If the `indeterminate` prop is set to `true`, this value will be ignored. We recommend keeping the value inclusively between 0 and 100. -Three available statuses for linear progress indicators are `positive`, `negative`, and `warning`. - - - + + -#### Label - -Indicator label can be passed into the `labels` prop as an array. If one label is passed, it will be centered. If there are two labels, each is pushed to one end of the progress indicator. - - - + + -### Props +### Status - +Three available statuses for both linear and radial progress indicators are `positive`, `negative`, and `warning`. -## Progress radial - -### Usage - -Like linear progress indicators, the radial indicator is indeterminate by default. It becomes determinate when a `value` is passed. - - - + + -#### Value +Each radial indicator with status is accompanied by an icon, providing a visual cue to inform the current progress state better. The icon can be replaced by a [content](#content). -To specify a value for the indeterminate radial indicator, pass a number into the `value` prop. If the `indeterminate` prop is set to `true`, this value will be ignored. We recommend keeping the value inclusively between 0 and 100. - - - + + -#### Status +### Label -Three statuses available for radial indicators are `positive`, `negative`, and `warning`. Unlike linear indicators, each radial indicator with status is accompanied by an icon, providing a visual cue to inform the current progress state better. The icon can be replaced by a [content](#content). +Indicator label can be passed into the `labels` prop as an array. If one label is passed, it will be centered. If there are two labels, each is pushed to one end of the progress indicator. This prop is only available for linear indicators. - - + + -#### Size +### Size -Four size options available are `x-small`, `small`, `medium`, and `large`. The default size is `medium`. +Four size options available are `x-small`, `small`, `medium`, and `large`. The default size is `medium`. This prop is only available for radial indicators. - + -#### Content +### Content -The radial progress indicator can be wrapped around JSX elements, such as icons, texts or other components. This content helps provide flexibility to enhance the progress display with additional visual appearance. +The radial progress indicator can be wrapped around JSX elements, such as icons or texts. This content helps provide flexibility to enhance the progress display with additional visual appearance. This prop is only available for radial indicators. - + @@ -94,6 +74,12 @@ To make the progress indicator accessible to non-sighted users, a visually-hidde To further improve the experience, applications should have a mechanism to inform users once the loading process is complete. Depending on the criticality of the content and how long it takes to load, the progress completion can be indicated using a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), or by programmatically moving focus to the top of the new content. -### Props +## Props + +### Progress linear + + + +### Progress radial From 6297ccca127a21bd601800d5f8b3dcea0207d29b Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Fri, 27 Sep 2024 16:06:58 -0500 Subject: [PATCH 06/26] added example --- .../src/content/docs/progressindicator.mdx | 23 ++++++++++++++++--- examples/ProgressLinear.isAnimated.css | 3 +++ examples/ProgressLinear.isAnimated.jsx | 23 +++++++++++++++++++ examples/index.tsx | 6 +++++ 4 files changed, 52 insertions(+), 3 deletions(-) create mode 100644 examples/ProgressLinear.isAnimated.css create mode 100644 examples/ProgressLinear.isAnimated.jsx diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index af4433b8501..5a25617b69e 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -30,9 +30,19 @@ To specify a value for indeterminate indicator, pass a number into the `value` p +Exclusively for linear indicators, the `isAnimated` flag is helpful when applying animation to the indicator as the value changes. + + + + + ### Status -Three available statuses for both linear and radial progress indicators are `positive`, `negative`, and `warning`. +Three available statuses for both linear and radial progress indicators are: + +- `"positive"` +- `"negative"` +- `"warning"` @@ -46,7 +56,7 @@ Each radial indicator with status is accompanied by an icon, providing a visual ### Label -Indicator label can be passed into the `labels` prop as an array. If one label is passed, it will be centered. If there are two labels, each is pushed to one end of the progress indicator. This prop is only available for linear indicators. +Indicator labels can be passed into the `labels` prop as an array. If one label is passed, it will be centered. If there are two labels, each is pushed to one end of the progress indicator. This prop is only available for linear indicators. @@ -54,7 +64,14 @@ Indicator label can be passed into the `labels` prop as an array. If one label i ### Size -Four size options available are `x-small`, `small`, `medium`, and `large`. The default size is `medium`. This prop is only available for radial indicators. +Four size options available are: + +- `"x-small"` +- `"small"` +- `"medium"` (default) +- `"large"` + +This prop is only available for radial indicators. diff --git a/examples/ProgressLinear.isAnimated.css b/examples/ProgressLinear.isAnimated.css new file mode 100644 index 00000000000..b4f72ba9f1f --- /dev/null +++ b/examples/ProgressLinear.isAnimated.css @@ -0,0 +1,3 @@ +.demo-container { + width: min(100%, 200px); +} diff --git a/examples/ProgressLinear.isAnimated.jsx b/examples/ProgressLinear.isAnimated.jsx new file mode 100644 index 00000000000..f0be09f9f92 --- /dev/null +++ b/examples/ProgressLinear.isAnimated.jsx @@ -0,0 +1,23 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { ProgressLinear } from '@itwin/itwinui-react'; + +export default () => { + const [value, setValue] = React.useState(0); + + React.useEffect(() => { + setTimeout(() => { + const newValue = value + 20; + setValue(newValue > 100 ? 0 : newValue); + }, 3000); + }, [value]); + + return ( +
+ +
+ ); +}; diff --git a/examples/index.tsx b/examples/index.tsx index a7b9e728716..02650bcf8df 100644 --- a/examples/index.tsx +++ b/examples/index.tsx @@ -912,6 +912,12 @@ const ProgressLinearValueExample = withThemeProvider( ); export { ProgressLinearValueExample }; +import { default as ProgressLinearAnimatedExampleRaw } from './ProgressLinear.isAnimated'; +const ProgressLinearAnimatedExample = withThemeProvider( + ProgressLinearAnimatedExampleRaw, +); +export { ProgressLinearAnimatedExample }; + import { default as ProgressLinearLabelExampleRaw } from './ProgressLinear.label'; const ProgressLinearLabelExample = withThemeProvider( ProgressLinearLabelExampleRaw, From 7a5a00b2fbc91fbd70bb105a313dde0c9905486f Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Fri, 27 Sep 2024 16:14:05 -0500 Subject: [PATCH 07/26] wording --- apps/website/src/content/docs/progressindicator.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index 5a25617b69e..a0f80b7d7cc 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -8,7 +8,7 @@ thumbnail: ProgressIndicator ## Usage -There are two types of progress indicators which are linear and radial. The default progress indicator is indeterminate. If a `value` is passed, the indicator becomes determinate. +There are two types of progress indicators which are linear and radial. Linear indicators show progress on a linear bar, while radial indicators display progress in a circular form. The default progress indicator is indeterminate. If a `value` is passed, the indicator becomes determinate. From 77a128a891046c008feeb61f38abe465d75e4fd4 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Fri, 27 Sep 2024 16:21:39 -0500 Subject: [PATCH 08/26] wording --- apps/website/src/content/docs/progressindicator.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index a0f80b7d7cc..4fc2455600d 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -8,7 +8,9 @@ thumbnail: ProgressIndicator ## Usage -There are two types of progress indicators which are linear and radial. Linear indicators show progress on a linear bar, while radial indicators display progress in a circular form. The default progress indicator is indeterminate. If a `value` is passed, the indicator becomes determinate. +There are two types of progress indicators which are linear and radial. Linear indicators show progress on a linear bar, while radial indicators display progress in a circular form. + +The default progress indicator is indeterminate. If a [value](#value) is passed, the indicator becomes determinate. From f7f3b2992e34c07bb8464efc50826388d3d1155a Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Mon, 30 Sep 2024 14:28:59 -0500 Subject: [PATCH 09/26] wording --- apps/website/src/content/docs/progressindicator.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index 4fc2455600d..56dbf1158b1 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -22,7 +22,7 @@ The default progress indicator is indeterminate. If a [value](#value) is passed, ### Value -To specify a value for indeterminate indicator, pass a number into the `value` prop. This prop is available for both linear and radial indicators. If the `indeterminate` prop is set to `true`, this value will be ignored. We recommend keeping the value inclusively between 0 and 100. +To specify a value for indeterminate indicator, pass a number into the `value` prop. This prop is available for both linear and radial indicators. If the `indeterminate` prop is set to `true`, this value will be ignored. This value must be inclusively between 0 and 100. @@ -81,7 +81,7 @@ This prop is only available for radial indicators. ### Content -The radial progress indicator can be wrapped around JSX elements, such as icons or texts. This content helps provide flexibility to enhance the progress display with additional visual appearance. This prop is only available for radial indicators. +The radial progress indicator can be wrapped around JSX elements, such as icons or texts. This content helps provide flexibility to enhance the progress display with additional visual appearance. Moreover, indicators of `"x-small"` size will not display its content. This prop is only available for radial indicators. From bee5965e40531d6fe3dd131d8532338b62cf5fb6 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Wed, 2 Oct 2024 11:51:17 -0500 Subject: [PATCH 10/26] wording --- .../src/content/docs/progressindicator.mdx | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index 56dbf1158b1..4d8f83ce24f 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -8,7 +8,10 @@ thumbnail: ProgressIndicator ## Usage -There are two types of progress indicators which are linear and radial. Linear indicators show progress on a linear bar, while radial indicators display progress in a circular form. +There are two types of progress indicators available as separate components: + +- `ProgressLinear`: shows progress on a linear bar +- `ProgressRadial`: shows progress in a circular form. The default progress indicator is indeterminate. If a [value](#value) is passed, the indicator becomes determinate. @@ -22,7 +25,9 @@ The default progress indicator is indeterminate. If a [value](#value) is passed, ### Value -To specify a value for indeterminate indicator, pass a number into the `value` prop. This prop is available for both linear and radial indicators. If the `indeterminate` prop is set to `true`, this value will be ignored. This value must be inclusively between 0 and 100. +To specify a value for determinate progress indicator, the `value` prop can be used. This prop is available for both linear and radial indicators. The value must be inclusively between `0` and `100`, representing what percentage of the task has completed. + +If the `indeterminate` prop is set to `true`, this value will be ignored. @@ -40,18 +45,16 @@ Exclusively for linear indicators, the `isAnimated` flag is helpful when applyin ### Status -Three available statuses for both linear and radial progress indicators are: +The statuses for both for both linear and radial progress indicators are used to convey the outcome of a process. The desired UX flow is to show a default progress indicator during the process, and then update the status to reflect whether the process was successful, encountered an error, or requires attention. Three available statuses are: -- `"positive"` -- `"negative"` -- `"warning"` +- `"positive"`: to indicate success. +- `"negative"`: to indicate failure. +- `"warning"`: to indicate a cautionary state or partial success. -Each radial indicator with status is accompanied by an icon, providing a visual cue to inform the current progress state better. The icon can be replaced by a [content](#content). - @@ -66,7 +69,7 @@ Indicator labels can be passed into the `labels` prop as an array. If one label ### Size -Four size options available are: +Four `size` options available are: - `"x-small"` - `"small"` @@ -81,7 +84,9 @@ This prop is only available for radial indicators. ### Content -The radial progress indicator can be wrapped around JSX elements, such as icons or texts. This content helps provide flexibility to enhance the progress display with additional visual appearance. Moreover, indicators of `"x-small"` size will not display its content. This prop is only available for radial indicators. +The radial progress indicator can be wrapped around JSX elements, such as icons or texts. This content helps provide flexibility to enhance the progress display with additional visual appearance. This prop is only available for radial indicators. + +**Note**: Indicators of `"x-small"` size will not display its content. From b03f92e24e56788eeff0c467a2719d34e5a0c517 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Wed, 2 Oct 2024 11:52:28 -0500 Subject: [PATCH 11/26] more wording for status --- apps/website/src/content/docs/progressindicator.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index 4d8f83ce24f..10c9506a0bd 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -55,6 +55,8 @@ The statuses for both for both linear and radial progress indicators are used to +When using the `status` prop, each radial indicator is accompanied by a status icon, which provides a visual cue to inform the current progress state better. The status icon can also be replaced by custom [content](#content) for more advanced uses. + From 972550d85d07faff5afa1689250fed10034b304e Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Wed, 2 Oct 2024 11:54:16 -0500 Subject: [PATCH 12/26] more wording for status --- apps/website/src/content/docs/progressindicator.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index 10c9506a0bd..3b17f74f766 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -45,7 +45,7 @@ Exclusively for linear indicators, the `isAnimated` flag is helpful when applyin ### Status -The statuses for both for both linear and radial progress indicators are used to convey the outcome of a process. The desired UX flow is to show a default progress indicator during the process, and then update the status to reflect whether the process was successful, encountered an error, or requires attention. Three available statuses are: +The statuses for both `ProgressLinear` and `ProgressRadial` are used to convey the outcome of a process. The desired UX flow is to show a default progress indicator during the process, and then update the status to reflect whether the process was successful, encountered an error, or requires attention. Three available statuses are: - `"positive"`: to indicate success. - `"negative"`: to indicate failure. From 8d15f2510bc7e897390ce5e70a4c5bdc9ad5a9f7 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Wed, 2 Oct 2024 11:57:18 -0500 Subject: [PATCH 13/26] explicitly mentioned components --- apps/website/src/content/docs/progressindicator.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index 3b17f74f766..a34320590e9 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -25,7 +25,7 @@ The default progress indicator is indeterminate. If a [value](#value) is passed, ### Value -To specify a value for determinate progress indicator, the `value` prop can be used. This prop is available for both linear and radial indicators. The value must be inclusively between `0` and `100`, representing what percentage of the task has completed. +To specify a value for determinate progress indicator, the `value` prop can be used. This prop is available for both `ProgressLinear` and `ProgressRadial`. The value must be inclusively between `0` and `100`, representing what percentage of the task has completed. If the `indeterminate` prop is set to `true`, this value will be ignored. @@ -37,7 +37,7 @@ If the `indeterminate` prop is set to `true`, this value will be ignored. -Exclusively for linear indicators, the `isAnimated` flag is helpful when applying animation to the indicator as the value changes. +Exclusively for `ProgressLinear`, the `isAnimated` flag is helpful when applying animation to the indicator as the value changes. @@ -55,7 +55,7 @@ The statuses for both `ProgressLinear` and `ProgressRadial` are used to convey t -When using the `status` prop, each radial indicator is accompanied by a status icon, which provides a visual cue to inform the current progress state better. The status icon can also be replaced by custom [content](#content) for more advanced uses. +When using the `status` prop, each `ProgressRadial` is accompanied by a status icon, which provides a visual cue to inform the current progress state better. The status icon can also be replaced by custom [content](#content) for more advanced uses. @@ -63,7 +63,7 @@ When using the `status` prop, each radial indicator is accompanied by a status i ### Label -Indicator labels can be passed into the `labels` prop as an array. If one label is passed, it will be centered. If there are two labels, each is pushed to one end of the progress indicator. This prop is only available for linear indicators. +Indicator labels can be passed into the `labels` prop as an array. If one label is passed, it will be centered. If there are two labels, each is pushed to one end of the progress indicator. This prop is only available for `ProgressLinear`. @@ -78,7 +78,7 @@ Four `size` options available are: - `"medium"` (default) - `"large"` -This prop is only available for radial indicators. +This prop is only available for `ProgressRadial`. @@ -86,7 +86,7 @@ This prop is only available for radial indicators. ### Content -The radial progress indicator can be wrapped around JSX elements, such as icons or texts. This content helps provide flexibility to enhance the progress display with additional visual appearance. This prop is only available for radial indicators. +The `ProgressRadial` component can be wrapped around JSX elements, such as icons or texts. This content helps provide flexibility to enhance the progress display with additional visual appearance. This prop is only available for `ProgressRadial`. **Note**: Indicators of `"x-small"` size will not display its content. From d2beceb5ffa10ff0ff0118f52857d066c49d6a3d Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Wed, 2 Oct 2024 12:11:44 -0500 Subject: [PATCH 14/26] combined examples --- .../src/content/docs/progressindicator.mdx | 16 +++-------- examples/ProgressIndicators.main.css | 7 +++++ ...r.main.jsx => ProgressIndicators.main.jsx} | 5 ++-- examples/ProgressIndicators.value.css | 7 +++++ ...value.jsx => ProgressIndicators.value.jsx} | 5 ++-- examples/ProgressLinear.main.css | 3 -- examples/ProgressLinear.value.css | 3 -- examples/ProgressRadial.main.jsx | 10 ------- examples/index.tsx | 28 ++++++------------- 9 files changed, 32 insertions(+), 52 deletions(-) create mode 100644 examples/ProgressIndicators.main.css rename examples/{ProgressLinear.main.jsx => ProgressIndicators.main.jsx} (76%) create mode 100644 examples/ProgressIndicators.value.css rename examples/{ProgressLinear.value.jsx => ProgressIndicators.value.jsx} (73%) delete mode 100644 examples/ProgressLinear.main.css delete mode 100644 examples/ProgressLinear.value.css delete mode 100644 examples/ProgressRadial.main.jsx diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index a34320590e9..31352de1306 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -15,12 +15,8 @@ There are two types of progress indicators available as separate components: The default progress indicator is indeterminate. If a [value](#value) is passed, the indicator becomes determinate. - - - - - - + + ### Value @@ -29,12 +25,8 @@ To specify a value for determinate progress indicator, the `value` prop can be u If the `indeterminate` prop is set to `true`, this value will be ignored. - - - - - - + + Exclusively for `ProgressLinear`, the `isAnimated` flag is helpful when applying animation to the indicator as the value changes. diff --git a/examples/ProgressIndicators.main.css b/examples/ProgressIndicators.main.css new file mode 100644 index 00000000000..1ea56f60bb9 --- /dev/null +++ b/examples/ProgressIndicators.main.css @@ -0,0 +1,7 @@ +.demo-container { + display: flex; + flex-direction: row; + width: 200px; + align-items: center; + gap: var(--iui-size-s); +} diff --git a/examples/ProgressLinear.main.jsx b/examples/ProgressIndicators.main.jsx similarity index 76% rename from examples/ProgressLinear.main.jsx rename to examples/ProgressIndicators.main.jsx index 94a21ec18e8..0eb009e9ff6 100644 --- a/examples/ProgressLinear.main.jsx +++ b/examples/ProgressIndicators.main.jsx @@ -3,12 +3,13 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import { ProgressLinear } from '@itwin/itwinui-react'; +import { ProgressLinear, ProgressRadial } from '@itwin/itwinui-react'; export default () => { return (
- + +
); }; diff --git a/examples/ProgressIndicators.value.css b/examples/ProgressIndicators.value.css new file mode 100644 index 00000000000..1ea56f60bb9 --- /dev/null +++ b/examples/ProgressIndicators.value.css @@ -0,0 +1,7 @@ +.demo-container { + display: flex; + flex-direction: row; + width: 200px; + align-items: center; + gap: var(--iui-size-s); +} diff --git a/examples/ProgressLinear.value.jsx b/examples/ProgressIndicators.value.jsx similarity index 73% rename from examples/ProgressLinear.value.jsx rename to examples/ProgressIndicators.value.jsx index 3adc7e36d8b..004a92dcc48 100644 --- a/examples/ProgressLinear.value.jsx +++ b/examples/ProgressIndicators.value.jsx @@ -3,12 +3,13 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import { ProgressLinear } from '@itwin/itwinui-react'; +import { ProgressLinear, ProgressRadial } from '@itwin/itwinui-react'; export default () => { return (
- + +
); }; diff --git a/examples/ProgressLinear.main.css b/examples/ProgressLinear.main.css deleted file mode 100644 index b4f72ba9f1f..00000000000 --- a/examples/ProgressLinear.main.css +++ /dev/null @@ -1,3 +0,0 @@ -.demo-container { - width: min(100%, 200px); -} diff --git a/examples/ProgressLinear.value.css b/examples/ProgressLinear.value.css deleted file mode 100644 index b4f72ba9f1f..00000000000 --- a/examples/ProgressLinear.value.css +++ /dev/null @@ -1,3 +0,0 @@ -.demo-container { - width: min(100%, 200px); -} diff --git a/examples/ProgressRadial.main.jsx b/examples/ProgressRadial.main.jsx deleted file mode 100644 index 9605fad9ce0..00000000000 --- a/examples/ProgressRadial.main.jsx +++ /dev/null @@ -1,10 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -import * as React from 'react'; -import { ProgressRadial } from '@itwin/itwinui-react'; - -export default () => { - return ; -}; diff --git a/examples/index.tsx b/examples/index.tsx index 02650bcf8df..9704e27a74b 100644 --- a/examples/index.tsx +++ b/examples/index.tsx @@ -900,17 +900,17 @@ export const PopoverFocusExample = withThemeProvider(PopoverFocusExampleRaw); // ---------------------------------------------------------------------------- -import { default as ProgressLinearMainExampleRaw } from './ProgressLinear.main'; -const ProgressLinearMainExample = withThemeProvider( - ProgressLinearMainExampleRaw, +import { default as ProgressIndicatorsMainExampleRaw } from './ProgressIndicators.main'; +const ProgressIndicatorsMainExample = withThemeProvider( + ProgressIndicatorsMainExampleRaw, ); -export { ProgressLinearMainExample }; +export { ProgressIndicatorsMainExample }; -import { default as ProgressLinearValueExampleRaw } from './ProgressLinear.value'; -const ProgressLinearValueExample = withThemeProvider( - ProgressLinearValueExampleRaw, +import { default as ProgressIndicatorsValueExampleRaw } from './ProgressIndicators.value'; +const ProgressIndicatorsValueExample = withThemeProvider( + ProgressIndicatorsValueExampleRaw, ); -export { ProgressLinearValueExample }; +export { ProgressIndicatorsValueExample }; import { default as ProgressLinearAnimatedExampleRaw } from './ProgressLinear.isAnimated'; const ProgressLinearAnimatedExample = withThemeProvider( @@ -930,18 +930,6 @@ const ProgressLinearStatusExample = withThemeProvider( ); export { ProgressLinearStatusExample }; -import { default as ProgressRadialMainExampleRaw } from './ProgressRadial.main'; -const ProgressRadialMainExample = withThemeProvider( - ProgressRadialMainExampleRaw, -); -export { ProgressRadialMainExample }; - -import { default as ProgressRadialValueExampleRaw } from './ProgressRadial.value'; -const ProgressRadialValueExample = withThemeProvider( - ProgressRadialValueExampleRaw, -); -export { ProgressRadialValueExample }; - import { default as ProgressRadialSizeExampleRaw } from './ProgressRadial.size'; const ProgressRadialSizeExample = withThemeProvider( ProgressRadialSizeExampleRaw, From 94f8fcf25c5990bc3c0296474856cebf0b5d5b67 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Wed, 2 Oct 2024 12:13:49 -0500 Subject: [PATCH 15/26] combined examples --- apps/website/src/content/docs/progressindicator.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index 31352de1306..1f677bb9261 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -94,10 +94,10 @@ To further improve the experience, applications should have a mechanism to infor ## Props -### Progress linear +### ProgressLinear -### Progress radial +### ProgressRadial From 6249f88d41fe2fd720c564578a86f9e3cdaf0edc Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Wed, 2 Oct 2024 12:20:12 -0500 Subject: [PATCH 16/26] combined examples --- examples/ProgressIndicators.value.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/ProgressIndicators.value.jsx b/examples/ProgressIndicators.value.jsx index 004a92dcc48..0272d8396ee 100644 --- a/examples/ProgressIndicators.value.jsx +++ b/examples/ProgressIndicators.value.jsx @@ -8,7 +8,7 @@ import { ProgressLinear, ProgressRadial } from '@itwin/itwinui-react'; export default () => { return (
- +
); From 39ddc09c71ad8cf1ddff62d1a05cc8e1783ef0dd Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Wed, 2 Oct 2024 13:42:36 -0500 Subject: [PATCH 17/26] wording --- .../src/content/docs/progressindicator.mdx | 16 +++++++++------- examples/ProgressIndicators.main.css | 2 +- examples/ProgressIndicators.value.css | 2 +- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index 1f677bb9261..dd68f10de54 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -13,18 +13,16 @@ There are two types of progress indicators available as separate components: - `ProgressLinear`: shows progress on a linear bar - `ProgressRadial`: shows progress in a circular form. -The default progress indicator is indeterminate. If a [value](#value) is passed, the indicator becomes determinate. - +By default, the progress indicators are considered to be "indeterminate". This is useful for short processes, where it isn't necessary (or possible) to indicate the completion percentage. For longer processes, a "determinate" progress indicator should be used. + ### Value To specify a value for determinate progress indicator, the `value` prop can be used. This prop is available for both `ProgressLinear` and `ProgressRadial`. The value must be inclusively between `0` and `100`, representing what percentage of the task has completed. -If the `indeterminate` prop is set to `true`, this value will be ignored. - @@ -35,9 +33,13 @@ Exclusively for `ProgressLinear`, the `isAnimated` flag is helpful when applying +**Note**: If the `indeterminate` prop is set to `true`, this value will be ignored. + ### Status -The statuses for both `ProgressLinear` and `ProgressRadial` are used to convey the outcome of a process. The desired UX flow is to show a default progress indicator during the process, and then update the status to reflect whether the process was successful, encountered an error, or requires attention. Three available statuses are: +The `status` prop can be used to convey the outcome of a process. The recommended UX flow is to display the default progress indicator during the loading process, and then update the `status` to reflect whether the process was successful, encountered an error, or requires attention. + +Three available statuses are: - `"positive"`: to indicate success. - `"negative"`: to indicate failure. @@ -80,12 +82,12 @@ This prop is only available for `ProgressRadial`. The `ProgressRadial` component can be wrapped around JSX elements, such as icons or texts. This content helps provide flexibility to enhance the progress display with additional visual appearance. This prop is only available for `ProgressRadial`. -**Note**: Indicators of `"x-small"` size will not display its content. - +**Note**: Indicators of `"x-small"` size will not display its content. + ## Accessibility To make the progress indicator accessible to non-sighted users, a visually-hidden "Loading" message will be automatically included when the `value` is not set to 100%. diff --git a/examples/ProgressIndicators.main.css b/examples/ProgressIndicators.main.css index 1ea56f60bb9..66335966f9d 100644 --- a/examples/ProgressIndicators.main.css +++ b/examples/ProgressIndicators.main.css @@ -1,6 +1,6 @@ .demo-container { display: flex; - flex-direction: row; + flex-direction: column; width: 200px; align-items: center; gap: var(--iui-size-s); diff --git a/examples/ProgressIndicators.value.css b/examples/ProgressIndicators.value.css index 1ea56f60bb9..66335966f9d 100644 --- a/examples/ProgressIndicators.value.css +++ b/examples/ProgressIndicators.value.css @@ -1,6 +1,6 @@ .demo-container { display: flex; - flex-direction: row; + flex-direction: column; width: 200px; align-items: center; gap: var(--iui-size-s); From 0e0a2bfcb687acc9c845781b07ac7fa50dbfffc4 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Wed, 2 Oct 2024 14:19:57 -0500 Subject: [PATCH 18/26] added more into isAnimated example --- examples/ProgressLinear.isAnimated.css | 5 ++++- examples/ProgressLinear.isAnimated.jsx | 27 ++++++++++++++++++++------ 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/examples/ProgressLinear.isAnimated.css b/examples/ProgressLinear.isAnimated.css index b4f72ba9f1f..47d2d6fe27b 100644 --- a/examples/ProgressLinear.isAnimated.css +++ b/examples/ProgressLinear.isAnimated.css @@ -1,3 +1,6 @@ .demo-container { - width: min(100%, 200px); + width: 200px; + display: flex; + flex-direction: column; + gap: var(--iui-size-xs); } diff --git a/examples/ProgressLinear.isAnimated.jsx b/examples/ProgressLinear.isAnimated.jsx index f0be09f9f92..b5cffca1d35 100644 --- a/examples/ProgressLinear.isAnimated.jsx +++ b/examples/ProgressLinear.isAnimated.jsx @@ -3,21 +3,36 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import { ProgressLinear } from '@itwin/itwinui-react'; +import { Button, ProgressLinear } from '@itwin/itwinui-react'; export default () => { const [value, setValue] = React.useState(0); + const timeoutRef = React.useRef(null); React.useEffect(() => { - setTimeout(() => { - const newValue = value + 20; - setValue(newValue > 100 ? 0 : newValue); - }, 3000); + if (value < 100) { + timeoutRef.current = setTimeout( + () => setValue((prevValue) => prevValue + 20), + 1500, + ); + } else { + clearTimeout(timeoutRef.current); + } + + return () => clearTimeout(timeoutRef.current); }, [value]); return (
- + +
); }; From 4589bc30190f7598f40bbcf0f7adeff7ee1c8b5f Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Wed, 2 Oct 2024 14:41:27 -0500 Subject: [PATCH 19/26] added more into isAnimated example --- apps/website/src/content/docs/progressindicator.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index dd68f10de54..4ab8cf46497 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -30,7 +30,7 @@ To specify a value for determinate progress indicator, the `value` prop can be u Exclusively for `ProgressLinear`, the `isAnimated` flag is helpful when applying animation to the indicator as the value changes. - + **Note**: If the `indeterminate` prop is set to `true`, this value will be ignored. From f47cbff820280e0fca8b8265c5e9cffbec73dd1c Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Thu, 3 Oct 2024 14:00:02 -0500 Subject: [PATCH 20/26] comments --- examples/ProgressIndicators.main.css | 4 ++++ examples/ProgressIndicators.main.jsx | 2 +- examples/ProgressIndicators.value.css | 4 ++++ examples/ProgressIndicators.value.jsx | 2 +- examples/ProgressLinear.isAnimated.jsx | 9 ++++----- 5 files changed, 14 insertions(+), 7 deletions(-) diff --git a/examples/ProgressIndicators.main.css b/examples/ProgressIndicators.main.css index 66335966f9d..a4a1317fdbf 100644 --- a/examples/ProgressIndicators.main.css +++ b/examples/ProgressIndicators.main.css @@ -4,4 +4,8 @@ width: 200px; align-items: center; gap: var(--iui-size-s); + + :first-child { + width: 100%; + } } diff --git a/examples/ProgressIndicators.main.jsx b/examples/ProgressIndicators.main.jsx index 0eb009e9ff6..be78467a292 100644 --- a/examples/ProgressIndicators.main.jsx +++ b/examples/ProgressIndicators.main.jsx @@ -8,7 +8,7 @@ import { ProgressLinear, ProgressRadial } from '@itwin/itwinui-react'; export default () => { return (
- +
); diff --git a/examples/ProgressIndicators.value.css b/examples/ProgressIndicators.value.css index 66335966f9d..a4a1317fdbf 100644 --- a/examples/ProgressIndicators.value.css +++ b/examples/ProgressIndicators.value.css @@ -4,4 +4,8 @@ width: 200px; align-items: center; gap: var(--iui-size-s); + + :first-child { + width: 100%; + } } diff --git a/examples/ProgressIndicators.value.jsx b/examples/ProgressIndicators.value.jsx index 0272d8396ee..9a5f36a3483 100644 --- a/examples/ProgressIndicators.value.jsx +++ b/examples/ProgressIndicators.value.jsx @@ -8,7 +8,7 @@ import { ProgressLinear, ProgressRadial } from '@itwin/itwinui-react'; export default () => { return (
- +
); diff --git a/examples/ProgressLinear.isAnimated.jsx b/examples/ProgressLinear.isAnimated.jsx index b5cffca1d35..afdc9ea1f82 100644 --- a/examples/ProgressLinear.isAnimated.jsx +++ b/examples/ProgressLinear.isAnimated.jsx @@ -8,9 +8,10 @@ import { Button, ProgressLinear } from '@itwin/itwinui-react'; export default () => { const [value, setValue] = React.useState(0); const timeoutRef = React.useRef(null); + const isDone = value === 100; React.useEffect(() => { - if (value < 100) { + if (!isDone) { timeoutRef.current = setTimeout( () => setValue((prevValue) => prevValue + 20), 1500, @@ -27,10 +28,8 @@ export default () => { From 8505c8f9ac16dc149f8d679211809435a21cc89f Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Thu, 3 Oct 2024 14:31:33 -0500 Subject: [PATCH 21/26] comments --- examples/ProgressIndicators.main.css | 4 ++-- examples/ProgressIndicators.value.css | 3 ++- examples/ProgressLinear.isAnimated.jsx | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/examples/ProgressIndicators.main.css b/examples/ProgressIndicators.main.css index a4a1317fdbf..28605bf6704 100644 --- a/examples/ProgressIndicators.main.css +++ b/examples/ProgressIndicators.main.css @@ -2,10 +2,10 @@ display: flex; flex-direction: column; width: 200px; - align-items: center; gap: var(--iui-size-s); - :first-child { + > * { + margin-inline: auto; width: 100%; } } diff --git a/examples/ProgressIndicators.value.css b/examples/ProgressIndicators.value.css index a4a1317fdbf..1f0252ee1ec 100644 --- a/examples/ProgressIndicators.value.css +++ b/examples/ProgressIndicators.value.css @@ -5,7 +5,8 @@ align-items: center; gap: var(--iui-size-s); - :first-child { + > * { + margin-inline: auto; width: 100%; } } diff --git a/examples/ProgressLinear.isAnimated.jsx b/examples/ProgressLinear.isAnimated.jsx index afdc9ea1f82..7071048ac18 100644 --- a/examples/ProgressLinear.isAnimated.jsx +++ b/examples/ProgressLinear.isAnimated.jsx @@ -21,7 +21,7 @@ export default () => { } return () => clearTimeout(timeoutRef.current); - }, [value]); + }, [isDone]); return (
From ba614695b5b778d812a4dd3604613fab8fae9750 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Thu, 3 Oct 2024 15:06:10 -0500 Subject: [PATCH 22/26] simpified css --- examples/ProgressIndicators.main.css | 5 ----- examples/ProgressIndicators.value.css | 6 ------ 2 files changed, 11 deletions(-) diff --git a/examples/ProgressIndicators.main.css b/examples/ProgressIndicators.main.css index 28605bf6704..2a54a8f32ee 100644 --- a/examples/ProgressIndicators.main.css +++ b/examples/ProgressIndicators.main.css @@ -3,9 +3,4 @@ flex-direction: column; width: 200px; gap: var(--iui-size-s); - - > * { - margin-inline: auto; - width: 100%; - } } diff --git a/examples/ProgressIndicators.value.css b/examples/ProgressIndicators.value.css index 1f0252ee1ec..2a54a8f32ee 100644 --- a/examples/ProgressIndicators.value.css +++ b/examples/ProgressIndicators.value.css @@ -2,11 +2,5 @@ display: flex; flex-direction: column; width: 200px; - align-items: center; gap: var(--iui-size-s); - - > * { - margin-inline: auto; - width: 100%; - } } From 7d10091af45109345ff905876fa3e758903ca026 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Thu, 3 Oct 2024 15:21:07 -0500 Subject: [PATCH 23/26] used setInterval --- apps/website/src/content/docs/progressindicator.mdx | 2 +- examples/ProgressLinear.isAnimated.jsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index 4ab8cf46497..dd68f10de54 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -30,7 +30,7 @@ To specify a value for determinate progress indicator, the `value` prop can be u Exclusively for `ProgressLinear`, the `isAnimated` flag is helpful when applying animation to the indicator as the value changes. - + **Note**: If the `indeterminate` prop is set to `true`, this value will be ignored. diff --git a/examples/ProgressLinear.isAnimated.jsx b/examples/ProgressLinear.isAnimated.jsx index 7071048ac18..fc6581ebcef 100644 --- a/examples/ProgressLinear.isAnimated.jsx +++ b/examples/ProgressLinear.isAnimated.jsx @@ -7,20 +7,20 @@ import { Button, ProgressLinear } from '@itwin/itwinui-react'; export default () => { const [value, setValue] = React.useState(0); - const timeoutRef = React.useRef(null); + const intervalRef = React.useRef(null); const isDone = value === 100; React.useEffect(() => { if (!isDone) { - timeoutRef.current = setTimeout( + intervalRef.current = setInterval( () => setValue((prevValue) => prevValue + 20), 1500, ); } else { - clearTimeout(timeoutRef.current); + clearInterval(intervalRef.current); } - return () => clearTimeout(timeoutRef.current); + return () => clearInterval(intervalRef.current); }, [isDone]); return ( From 0b09d44afe92b73020f2bfb0e88e80faafe44843 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Thu, 3 Oct 2024 15:30:30 -0500 Subject: [PATCH 24/26] reorganized --- examples/ProgressLinear.isAnimated.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/ProgressLinear.isAnimated.jsx b/examples/ProgressLinear.isAnimated.jsx index fc6581ebcef..d632c300476 100644 --- a/examples/ProgressLinear.isAnimated.jsx +++ b/examples/ProgressLinear.isAnimated.jsx @@ -7,29 +7,29 @@ import { Button, ProgressLinear } from '@itwin/itwinui-react'; export default () => { const [value, setValue] = React.useState(0); - const intervalRef = React.useRef(null); const isDone = value === 100; React.useEffect(() => { + let interval; + if (!isDone) { - intervalRef.current = setInterval( + interval = setInterval( () => setValue((prevValue) => prevValue + 20), 1500, ); - } else { - clearInterval(intervalRef.current); } - return () => clearInterval(intervalRef.current); + return () => clearTimeout(interval); }, [isDone]); return (
From 8bd581a17c5c46224560ece65962fd14b5905352 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Thu, 3 Oct 2024 15:36:35 -0500 Subject: [PATCH 25/26] clearInterval instead of clearTimeout --- examples/ProgressLinear.isAnimated.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/ProgressLinear.isAnimated.jsx b/examples/ProgressLinear.isAnimated.jsx index d632c300476..3aa00a300b0 100644 --- a/examples/ProgressLinear.isAnimated.jsx +++ b/examples/ProgressLinear.isAnimated.jsx @@ -19,7 +19,7 @@ export default () => { ); } - return () => clearTimeout(interval); + return () => clearInterval(interval); }, [isDone]); return ( From c4e973b1da0bebb26fa25f23c1c4b31fb91fb1bd Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Tue, 8 Oct 2024 01:02:30 -0500 Subject: [PATCH 26/26] wording --- apps/website/src/content/docs/progressindicator.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/website/src/content/docs/progressindicator.mdx b/apps/website/src/content/docs/progressindicator.mdx index dd68f10de54..bc704111106 100644 --- a/apps/website/src/content/docs/progressindicator.mdx +++ b/apps/website/src/content/docs/progressindicator.mdx @@ -10,7 +10,7 @@ thumbnail: ProgressIndicator There are two types of progress indicators available as separate components: -- `ProgressLinear`: shows progress on a linear bar +- `ProgressLinear`: shows progress on a linear bar. - `ProgressRadial`: shows progress in a circular form. @@ -21,7 +21,7 @@ By default, the progress indicators are considered to be "indeterminate". This i ### Value -To specify a value for determinate progress indicator, the `value` prop can be used. This prop is available for both `ProgressLinear` and `ProgressRadial`. The value must be inclusively between `0` and `100`, representing what percentage of the task has completed. +To specify a value for determinate progress indicator, the `value` prop can be used. This prop is available for both `ProgressLinear` and `ProgressRadial`. The value must be inclusively between `0` and `100`, representing what percentage of the task has been completed.