From fa538424cd99a243c3d8a6e00f1469cd09460b4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Wed, 18 Oct 2023 16:31:58 -0400 Subject: [PATCH] chore: pr feedback --- .changeset/olive-forks-hang.md | 5 ---- cypress/integration/sitemap-vrt/constants.ts | 3 +++ .../components/progress-bar/package.json | 2 +- .../progress-bar/stories/index.stories.tsx | 6 ++--- .../src/pages/components/progress-bar/api.mdx | 6 ++--- .../components/progress-bar/changelog.mdx | 2 +- .../pages/components/progress-bar/index.mdx | 26 +++++++++---------- 7 files changed, 24 insertions(+), 26 deletions(-) delete mode 100644 .changeset/olive-forks-hang.md diff --git a/.changeset/olive-forks-hang.md b/.changeset/olive-forks-hang.md deleted file mode 100644 index c9173b74f6..0000000000 --- a/.changeset/olive-forks-hang.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@twilio-paste/progress-bar": patch ---- - -[Progress bar] Improve TsDoc type annotations diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts index 2236b5b160..9b0f2f0c32 100644 --- a/cypress/integration/sitemap-vrt/constants.ts +++ b/cypress/integration/sitemap-vrt/constants.ts @@ -153,6 +153,9 @@ export const SITEMAP = [ "/components/product-switcher/", "/components/product-switcher/api", "/components/product-switcher/changelog", + "/components/progress-bar/", + "/components/progress-bar/api", + "/components/progress-bar/changelog", "/components/progress-steps/", "/components/progress-steps/api", "/components/progress-steps/changelog", diff --git a/packages/paste-core/components/progress-bar/package.json b/packages/paste-core/components/progress-bar/package.json index 5253a90d84..7f0ca574ef 100644 --- a/packages/paste-core/components/progress-bar/package.json +++ b/packages/paste-core/components/progress-bar/package.json @@ -3,7 +3,7 @@ "version": "1.0.0", "category": "feedback", "status": "alpha", - "description": "A Progress Bar visually displays the progression/duration of a system operation such as downloading, uploading, or processing information.", + "description": "A Progress Bar communicates the completion status of a process or task.", "author": "Twilio Inc.", "license": "MIT", "main:dev": "src/index.tsx", diff --git a/packages/paste-core/components/progress-bar/stories/index.stories.tsx b/packages/paste-core/components/progress-bar/stories/index.stories.tsx index bb965057ab..71a31f9b6d 100644 --- a/packages/paste-core/components/progress-bar/stories/index.stories.tsx +++ b/packages/paste-core/components/progress-bar/stories/index.stories.tsx @@ -50,7 +50,7 @@ export const Default = (): React.ReactNode => { {value >= 100 ? ( - + Your submission has been approved! ) : ( @@ -88,10 +88,10 @@ export const Indeterminate = (): React.ReactNode => { return ( - Uploading sunrise_video.mov + Uploading sunrise_video.mov... - Converting files + Converting files... Connection lost. Check your connection and refresh the page to get up-to-date information. diff --git a/packages/paste-website/src/pages/components/progress-bar/api.mdx b/packages/paste-website/src/pages/components/progress-bar/api.mdx index fe838545dc..a19956c718 100644 --- a/packages/paste-website/src/pages/components/progress-bar/api.mdx +++ b/packages/paste-website/src/pages/components/progress-bar/api.mdx @@ -1,7 +1,7 @@ export const meta = { title: 'Progress Bar - API', package: '@twilio-paste/progress-bar', - description: 'Progress Bar communicates the completion status of a process or task.', + description: 'A Progress Bar communicates the completion status of a process or task.', slug: '/components/progress-bar/api', }; @@ -57,9 +57,9 @@ const AlertDialogExample = () => { return ( - Downloading more ram + Downloading more RAM - Increasing your ram helps your computer run faster. + Increasing your RAM helps your computer run faster. ); }; diff --git a/packages/paste-website/src/pages/components/progress-bar/changelog.mdx b/packages/paste-website/src/pages/components/progress-bar/changelog.mdx index bc3b18fa08..a0f2832edb 100644 --- a/packages/paste-website/src/pages/components/progress-bar/changelog.mdx +++ b/packages/paste-website/src/pages/components/progress-bar/changelog.mdx @@ -1,7 +1,7 @@ export const meta = { title: 'Progress Bar - Changelog', package: '@twilio-paste/progress-bar', - description: 'Progress Bar communicates the completion status of a process or task.', + description: 'A Progress Bar communicates the completion status of a process or task.', slug: '/components/progress-bar/changelog', }; diff --git a/packages/paste-website/src/pages/components/progress-bar/index.mdx b/packages/paste-website/src/pages/components/progress-bar/index.mdx index 8ee9dd84f4..dd0210b239 100644 --- a/packages/paste-website/src/pages/components/progress-bar/index.mdx +++ b/packages/paste-website/src/pages/components/progress-bar/index.mdx @@ -1,7 +1,7 @@ export const meta = { title: 'Progress Bar', package: '@twilio-paste/progress-bar', - description: 'Progress Bar communicates the completion status of a process or task.', + description: 'A Progress Bar communicates the completion status of a process or task.', slug: '/components/progress-bar/', }; @@ -45,7 +45,7 @@ export const getStaticProps = async () => { {value >= 100 ? ( - + Your submission has been approved! ) : ( @@ -87,10 +87,10 @@ or where the system is in a process. ### Progress Bar vs. Meter A Progress Bar represents only completion progress, like a file upload -or filling out a form. If you're not displaying progress, use a Meter. +or filling out a form. If you're not displaying progress, use a [Meter](/components/meter). One way to check if you need a Progress Bar or a Meter is to ask -yourself: _Could you substitute your UI element for Progress Steps? +yourself: _Could you substitute your UI element for [Progress Steps](/components/progress-steps)? Would it communicate roughly the same intent?_ If yes, then Progress Bar is probably the right element to use. @@ -102,7 +102,7 @@ that don't need the extra layer of information that Progress Steps provides. Example: A sign-up flow that a customer can reasonably complete without leaving the flow. -In contrast, Progress Steps are a visual representation of a complex +In contrast, [Progress Steps](/components/progress-steps) are a visual representation of a complex task broken up into multiple steps. They indicate what has and what needs to be done to fully complete the task. Use Progress Steps when the task is nonlinear or can't be completed in one sitting. Example: @@ -128,11 +128,11 @@ the full task. Use a Progress Bar to communicate the completion status of a process or task. Use the `valueLabel` prop to show a visible value. -If you don't show a visible value through `valueLabel`, communicate what -kind of process is happening through `ProgressBarLabel`. If the label -starts with a verb, use an ellipsis at the end of the label. For example, -the Progress Bar Label should say “Uploading filename.png…” not just -“filename.png”. +If you don't show a visible value, communicate what kind of process is +happening through `ProgressBarLabel`. For example, the Progress Bar Label should say +“Uploading filename.png…” not just “filename.png” if you don't show the completion percentage. +If the label starts with a verb and the Progress Bar is not disabled, use an ellipsis at the +end of the label. {value >= 100 ? ( - + Your submission has been approved! ) : ( @@ -220,12 +220,12 @@ Progress Bar Label should say “Uploading filename.png…” not just height="260px" title="Indeterminate progress state" storyID="components-progressbar--indeterminate" - code={`Uploading sunrise_video.mov + code={`Uploading sunrise_video.mov... -Converting files +Converting files... Connection lost. Check your connection and refresh the page to get up-to-date information.