Users/procload/add progressbar as new component #26329

procload · 2023-01-12T21:28:20Z

New Behavior

Adds ProgressBar web component variant.

fabricteam · 2023-01-12T21:34:24Z

📊 Bundle size report

_{🤖 This report was generated against eead74fee07339f998615fe34d8f847d0f63af6e}

codesandbox-ci · 2023-01-12T21:40:05Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d55df45:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

size-auditor · 2023-01-12T21:41:24Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: eead74fee07339f998615fe34d8f847d0f63af6e (build)

chrisdholt

A solid start! I see a couple things to clean up and a couple things we should probably clarify together.

The one outstanding question I have here is naming. I see the name "ProgressBar" here and in the nav on the Fluent react site, but the component name being imported and used in the repo is Progress. I think we should align on Progress if that's what's being used in code and as an import elsewhere.

packages/web-components/src/index.ts

packages/web-components/src/progressbar/progressbar.options.ts

packages/web-components/src/progressbar/progressbar.ts

packages/web-components/src/progressbar/progressbar.stories.ts

packages/web-components/src/progressbar/progressbar.ts

packages/web-components/src/progressbar/progressbar.styles.ts

chrisdholt · 2023-01-14T03:21:16Z

@procload another thing that I see missing that I didn't see initially was an export path in the package.json for the component. That will allow users to do:

import "@fluentui/web-components/progress-bar";

procload · 2023-01-14T15:44:30Z

@chrisdholt Made a number of requested changes. I'll wait on @miroslavstastny's comments on the issues above. There were a couple of Storybook user experience upgrades I was hoping to make, but don't know how to do so or if it's possible.

It would be nice if we could only have the one component example and when value is equal to 0 it turns into an indeterminate progress-bar. The current way to trigger indeterminate is by removing the value attribute and I wasn't sure if it's possible to do that via Storybook by reducing a number to 0 or adding a separate boolean toggle.
If No. 1 isn't possible, I would like to add an attribute table to the second example that has a boolean paused control to allow the user to show the indeterminate paused state.

miroslavstastny · 2023-01-17T13:12:44Z

packages/web-components/src/progress-bar/progress-bar.stories.ts

+    ?paused=${x => x.paused}
+    thickness=${x => x.thickness}
+    shape=${x => x.shape}
+    min=${x => x.min}


React implementation does not contain paused and min. I would rather not expose them here.

@chrisdholt Since we're inheriting from a FAST Foundation class, is there a way to restrict these in the Fluent implementation?

@miroslavstastny @procload We should check with edge but it's possible that they have scenarios where they have a "paused" (not disabled...) instance...I think that may have led to us adding. In terms of removing, you can't remove attributes but I do think that paused is specifically a visual state...so we can probably just remove it from FAST if we get agreement from folks. For now, I just wouldn't style it at all and it'll be a noop. Consider that technically in HTML I can add any attribute to any element and it'll be present in the DOM.

With regard to min that maps to aria-valuemin and I'm not sure we can as readily remove that. Min has functionality w/r/t the overall percentage complete...we can re-evaluate but that may be more nuanced in terms of removal. I'd suggest we not expose in the stories, etc for this one.

miroslavstastny · 2023-01-17T13:19:26Z

packages/web-components/src/progress-bar/progress-bar.styles.ts

+      ${colorBrandBackground2}
+    );
+    border-radius: var(--progress-bar-radius);
+    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);


I would expect some @media (prefers-reduced-motion) styles, but there is nothing in a design spec.

packages/web-components/src/progress-bar/progress-bar.styles.ts

…d corners

chrisdholt · 2023-01-18T00:21:18Z

packages/web-components/src/progress-bar/progress-bar.options.ts

+ */
+export const ProgressBarShape = {
+  rounded: 'rounded',
+  rectangular: 'rectangular',


this is interesting - @miroslavstastny curious if this is intentionally different than square semantic found in badge, etc. Are we documenting these inconsistencies elsewhere or are some of these known and desired to be "aligned" back to something consistent?

not blocking but if we have an opportunity to do that work now...

My first guess would be "square" means "four equal straight sides and four right angles", which might be the case for Badge or Avatar where we use it in FUIR9, but we also use it in Button and Image which can render as rectangles.

ProgressBar is still unstable in FUIR9, I will discuss with engineers there.

FUIR9 will rename to square

Will rename in this implementation.

packages/web-components/src/progress-bar/progress-bar.stories.ts

chrisdholt

LGTM - Let's make sure that @miroslavstastny signs off as well.

…as-new-component

… Storybook

…ps://github.com/procload/fluentui into users/procload/add-progressbar-as-new-component

* Adds web component version of ProgressBar * Generates change * Renames progressbar to progress-bar * Changes alphabetical ordering of imports * Enumerates null value; Adds ? to boolean in Story * Adds typedocs to progress-bar class * Fixes class to attribute typo in CSS * Removes duped CSS * Adds export of progress-bar to package.json * Removes null in validation state object * Removes local CSS variables; Removes defaults on thickness and rounded corners * Removes unused CSS * Removes unused options, pause and min, that don't exist in Fluent * Addresses remaining feedback on PR: Renames rect to square; Cleans up Storybook

procload added 2 commits January 12, 2023 16:23

Adds web component version of ProgressBar

59c84e6

Generates change

60c7f67

msft-fluent-ui-bot added the web-components label Jan 12, 2023

msft-fluent-ui-bot assigned TristanWatanabe Jan 12, 2023

procload marked this pull request as ready for review January 12, 2023 21:29

procload requested a review from a team as a code owner January 12, 2023 21:29

procload requested review from miroslavstastny and chrisdholt January 13, 2023 16:12

chrisdholt requested changes Jan 13, 2023

View reviewed changes

msft-fluent-ui-bot added the Needs: Author Feedback label Jan 13, 2023

chrisdholt assigned chrisdholt and unassigned TristanWatanabe Jan 13, 2023

chrisdholt reviewed Jan 13, 2023

View reviewed changes

packages/web-components/src/progressbar/progressbar.styles.ts Outdated Show resolved Hide resolved

Renames progressbar to progress-bar

600337a

msft-fluent-ui-bot removed the Needs: Author Feedback label Jan 14, 2023

procload added 7 commits January 14, 2023 10:30

Changes alphabetical ordering of imports

607551a

Enumerates null value; Adds ? to boolean in Story

96d4ff3

Adds typedocs to progress-bar class

2480006

Fixes class to attribute typo in CSS

209fce1

Removes duped CSS

6dbaf03

Adds export of progress-bar to package.json

be61425

Removes null in validation state object

ab8f173

miroslavstastny reviewed Jan 17, 2023

View reviewed changes

packages/web-components/src/progress-bar/progress-bar.styles.ts Show resolved Hide resolved

procload added 3 commits January 17, 2023 14:55

Removes local CSS variables; Removes defaults on thickness and rounde…

f05ff02

…d corners

Removes unused CSS

0988572

Removes unused options, pause and min, that don't exist in Fluent

d8ff717

chrisdholt reviewed Jan 18, 2023

View reviewed changes

packages/web-components/src/progress-bar/progress-bar.stories.ts Outdated Show resolved Hide resolved

chrisdholt reviewed Jan 18, 2023

View reviewed changes

packages/web-components/src/progress-bar/progress-bar.stories.ts Outdated Show resolved Hide resolved

chrisdholt approved these changes Jan 18, 2023

View reviewed changes

miroslavstastny approved these changes Jan 18, 2023

View reviewed changes

procload added 3 commits January 18, 2023 09:51

Merge branch 'web-components-v3' into users/procload/add-progressbar-…

b682cd6

…as-new-component

Addresses remaining feedback on PR: Renames rect to square; Cleans up…

9532a32

… Storybook

Merge branch 'users/procload/add-progressbar-as-new-component' of htt…

a6acfb8

…ps://github.com/procload/fluentui into users/procload/add-progressbar-as-new-component

procload enabled auto-merge (squash) January 18, 2023 18:18

procload added 2 commits January 18, 2023 15:01

Fixes Storybook type error

7de2f2e

Runs build to generate api-report to fix failing build

d55df45

procload merged commit 1322f3f into microsoft:web-components-v3 Jan 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Users/procload/add progressbar as new component #26329

Users/procload/add progressbar as new component #26329

procload commented Jan 12, 2023

fabricteam commented Jan 12, 2023 •

edited

Loading

codesandbox-ci bot commented Jan 12, 2023 •

edited

Loading

size-auditor bot commented Jan 12, 2023 •

edited

Loading

chrisdholt left a comment

chrisdholt commented Jan 14, 2023

procload commented Jan 14, 2023

miroslavstastny Jan 17, 2023

procload Jan 17, 2023

chrisdholt Jan 17, 2023

miroslavstastny Jan 17, 2023

chrisdholt Jan 18, 2023

chrisdholt Jan 18, 2023

miroslavstastny Jan 18, 2023

miroslavstastny Jan 18, 2023

procload Jan 18, 2023

chrisdholt left a comment

Users/procload/add progressbar as new component #26329

Users/procload/add progressbar as new component #26329

Conversation

procload commented Jan 12, 2023

New Behavior

fabricteam commented Jan 12, 2023 • edited Loading

📊 Bundle size report

codesandbox-ci bot commented Jan 12, 2023 • edited Loading

size-auditor bot commented Jan 12, 2023 • edited Loading

Asset size changes

chrisdholt left a comment

Choose a reason for hiding this comment

chrisdholt commented Jan 14, 2023

procload commented Jan 14, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chrisdholt left a comment

Choose a reason for hiding this comment

fabricteam commented Jan 12, 2023 •

edited

Loading

codesandbox-ci bot commented Jan 12, 2023 •

edited

Loading

size-auditor bot commented Jan 12, 2023 •

edited

Loading