Progress Bar Component #99

zwkohn · 2023-08-07T20:15:04Z

Overview

This adds a Progress Bar component to the library

The parameters are

Security

REMINDER: All file contents are public.

I have ensured no secure credentials or sensitive information remain in code, metadata, comments, etc.
- Please verify that you double checked that .storybook/preview.js does not contain your participant access key details.
- There are no temporary testing changes committed such as API base URLs, access tokens, print/log statements, etc.
These changes do not introduce any security risks, or any such risks have been properly mitigated.

Describe briefly what security risks you considered, why they don't apply, or how they've been mitigated.

Checklist

Testing

MyDataHelps iOS app
MyDataHelps Android app
MyDataHelps website

Documentation

I have added relevant Storybook updates to this PR as well.
If this feature requires a developer doc update, tag @CareEvolution/api-docs.

Consider "Squash and merge" as needed to keep the commit history reasonable on main.

Reviewers

Assign to the appropriate reviewer(s). Minimally, a second set of eyes is needed ensure no non-public information is published. Consider also including:

Subject-matter experts
Style/editing reviewers
Others requested by the content owner

chrisnowak · 2023-08-09T13:52:44Z

Few thoughts:

I think we want to name this a lot more narrowly; e.g. "IncentivesProgressBar"; or honestly just "ProgressBar" since it may not always be in the context of incentives but could work for goal setting etc.
We should do a bit of a review of other incentives progress bars we have done for other studies...e.g. PROGRESS...may suggest different options or look/feel. PROGRESS may be the gold standard here in some ways
- I would see if we can track a bit more to that look / feel
Would suggest we do not have an "increment" or anything...but rather we should leave this as a presentational component and have:
- background (string that does into CSS background prop; could be color or gradient)
- fill (string that does into CSS background prop of the fill layer; could be color or gradient)
- fillPercent (how wide the fill bar is): 0 to 100
- steps[] e.g. the placement of the various icons...each of these would have
  - stepPercent: number 0 to 100 for where the step should be placed on the progress bar
  - a react element for the thing that should be displayed on the step...could be an icon or something...

Then I think maybe another component for "IncentiveProgressBarStepIcon" that has some options like a $$ amount that you can use in the "step" array...

ajmenca · 2023-08-09T15:48:38Z

A couple of reference points from recent work on AoU Rewards. They use two variations of this kind of idea; one shows progress "in" level progression, the other shows progress across the entire reward program.

I think that for both the AoU and Progress designs, having the right side of the fill bar be curved looks really nice, I think we should integrate that.
I think both of these designs also animate the bar when the percentage changes; that's definitely a feature we should have. There's also some subtle animations that the AoU Bar has; if you hit 100%, the bar animates to the top, and then the star icon changes from gray to orange. This is also a really nice effect that looks polished.
In your screenshots, it looks like some things might need to get adjusted left/right by a pixel or so. There's some aliasing between the circle of the "100" and the blue border, and also in the second screenshot there's some white pixels leaking through on the left side of the completion bar.

bxh · 2023-08-15T20:06:52Z

AOU clearly has more than one kind of progress bar in mind.

Suvarna-Thejas-CE · 2023-11-27T21:13:57Z

I like the idea of making this just a pure progress bar. I created an issue #162 that could be a wrapper around this component that has labels/text that make it useful for a specific use case.

This one I think would be good with the parameters that Chris suggested above.

chrisnowak · 2023-11-28T14:31:35Z

src/components/presentational/ProgressBar/ProgressBar.css

@@ -0,0 +1,50 @@
+.progress-bar {


Should prefix all CSS classes with .mdhui-, so this should be .mdhui-progress-bar

I would also nest all classes in this file under that - so for the fill it shuold be .mdhui-progress-bar .mdhui-progress-bar-fill

(alternative to consider at some point is using CSS modules; but so far we haven't taken that leap and CSS is still being overridden in places)

chrisnowak · 2023-11-28T14:33:16Z

src/components/presentational/ProgressBar/ProgressBar.css

@@ -0,0 +1,50 @@
+.progress-bar {
+	display:inline-block;
+	margin: 10px 0px;


Would remove the margin on this

removed. I realize now that the reason this was there was to compensate for the way storybook is set to hide overflow.

chrisnowak · 2023-11-28T14:33:52Z

src/components/presentational/ProgressBar/ProgressBar.css

@@ -0,0 +1,50 @@
+.progress-bar {
+	display:inline-block;


Why inline-block? I think we would want this to be block?

chrisnowak · 2023-11-28T14:34:10Z

src/components/presentational/ProgressBar/ProgressBar.css

+	display:inline-block;
+	margin: 10px 0px;
+	width: 100%;
+	max-width: 500px;


Why a max-width? Will look awkward on desktop so I would remove

chrisnowak · 2023-11-28T14:34:58Z

src/components/presentational/ProgressBar/ProgressBar.css

+
+.progress-bar-fill {
+    position: absolute;
+	min-height: 1px;


Seems like some autoformatting is off in this file

chrisnowak · 2023-11-28T14:37:49Z

src/components/presentational/ProgressBar/ProgressBar.tsx

+	fillPercent: number;
+	steps?: [
+		{
+			stepPercent: number;


"step" prefix here seems unnecessary since this will be in a "steps" array; so would just go with percent/icon

chrisnowak · 2023-11-28T14:39:40Z

src/components/presentational/ProgressBar/ProgressBar.tsx

+import React, { ReactElement, useEffect } from "react";
+
+export interface ProgressBarProps {
+	background?: string;


We use color suffix for color properties, so would use backgroundColor and fillColor.

Also would make both background/fill a ColorDefinition and not a string - that was probably introduced after this PR but see the button component for an example (ColorDefinition allows specifying 2 colors, one for light mode and one for dark mode)

Oh hmm, i'm realizing that fill might actually be a gradient...yet let me think about that for a sec

Nevermind, I think it does't matter too much actually. Should still use ColorDefinition which just ends up being 2 strings so you could specify 2 gradients theoretically. Currently view builder doesn't let you configure a gradient but that's something we could look at adding

src/components/presentational/ProgressBar/ProgressBar.tsx

chrisnowak · 2023-11-28T14:41:29Z

src/components/presentational/ProgressBar/ProgressBar.tsx

+
+ProgressBar.defaultProps = {
+	background: "#d3d3d3",
+	fill: "#00A862",


I would probably have the default fill be var(--mdhui-color-primary)

chrisnowak · 2023-11-28T14:41:52Z

src/components/presentational/ProgressBar/ProgressBar.tsx

+}
+
+ProgressBar.defaultProps = {
+	background: "#d3d3d3",


Would have this be the closest CSS backround color var from the globalCss file

src/components/presentational/ProgressBar/ProgressBar.tsx

chrisnowak · 2023-11-28T14:47:20Z

src/components/presentational/ProgressBar/ProgressBar.stories.tsx

+		layout: 'auto',
+	},
+	argTypes: {
+		background: { control: 'color', description: "The background color of the progress bar" },


Documentation! Awesome. Need to start doing that...

chrisnowak · 2023-11-28T15:00:11Z

src/components/presentational/ProgressBar/ProgressBar.css

+
+.progress-bar .step-icon {
+	position: absolute;
+	transform: translate(-100%, 0)


This does make things a bit awkward if you have a stop near the beginning of the progress bar - it will get clipped out...there's no way to have a stop at 0 reliably I think (since steps are based on percent).

That being said, this seems like the best and most reasonable solution to this and, as demonstrated by the stories, works pretty well. I don't think having a stop right at the beginning makes a ton of sense

and someone using this could always fix that by having the element at the beginning have a left margin or something

chrisnowak · 2023-11-28T15:12:37Z

src/components/presentational/ProgressBar/ProgressBar.css

+	transform: translate(-100%, 0)
+}
+
+.progress-bar .step-icon span {


I wouldn't assume a span will be used as the child element...

So there is actually some cool stuff you did in the story here for the various little star icons and how they are colored etc.

I would not just waste that in a story but would actually invest in a separate component called "ProgressBarStep"...it could be exported under the progress bar...such that we have some out of box progress bar steps that can be placed on this (but someone could also come up with their own to supply to this).

and the props could be like:

borderColor?: ColorDefinition

backgroundColor: ColorDefinition

children (this is where you'd put in the font awesome icon for the star, or the text 75 or whatnot)

height (based on this it would auto-calculate the top margin to center itself vertically, e.g. for the large star)

e.g. for the big star at the end your step would be like:

steps: [{ stepPercent: 100, stepIcon: <ProgressBarStep borderColor="yellow" backgroundColor="orange" height="24px"> <FontAwesomeIcon icon={faStar} style={{ color: "yellow" }} /> </ProgressBarStep> }],

Basically to have to limit the amount of work someone has to do to get it to look like the storybook, while still allowing some flexibility

chrisnowak · 2023-11-28T15:14:42Z

src/components/presentational/ProgressBar/index.ts

@@ -0,0 +1 @@
+export { default as ProgressBar } from './ProgressBar'


You'll want to also export this from presentational/index.ts

chrisnowak · 2023-11-30T19:01:00Z

src/components/presentational/ProgressBar/ProgressBar.css

+
+.mdhui-progress-bar .mdhui-progress-bar-background {
+	border-radius: 500px;
+	border-width: var(--icon_border_width) ;


Huh...did you just add a border to this? I didn't think there was a border before

But the border width is added to the width so it ends up overflowing 100% width

i would probably drop the border because it makes it look a bit awkward when stuff overlaps it:

chrisnowak · 2023-11-30T19:01:48Z

src/components/presentational/ProgressBar/ProgressBar.css

+	--icon_border_width: 2px;
+}
+
+.mdhui-progress-bar .mdhui-progress-bar-default-margin {


Looks like this isn't working because you have a space between these and this class is applied to the progress bar itself.

Also, you will need to adjust the width like we do for buttons so it's width:calc(100% - 32px), otherwise it overflows

chrisnowak · 2023-11-30T19:51:50Z

src/components/presentational/ProgressBar/ProgressBar.stories.css

@@ -0,0 +1,3 @@
+.sb-story {


What does this CSS do?

Trying to get some padding in the storybook component. I replaced this with an extra div in the Template

const Template: StoryFn<typeof ProgressBar> = (args: ProgressBarProps) => <Layout colorScheme="auto"><div style={{padding: "35px 0"}}><ProgressBar {...args} /></div></Layout>;

chrisnowak · 2023-11-30T19:52:09Z

src/components/presentational/ProgressBar/ProgressBar.stories.tsx

+	}
+} as Meta<typeof ProgressBar>;
+
+const Template: StoryFn<typeof ProgressBar> = (args: ProgressBarProps) => <Layout colorScheme="auto"><ProgressBar {...args} /></Layout>;


Minor, maybe put "defaultMargin" on this so it's spaced out from the edges

chrisnowak · 2023-11-30T19:53:27Z

src/components/presentational/index.ts

+export { default as ProgressRing } from "./ProgressRing"
+export { default as ProgressBar } from "./ProgressBar"
+export { default as ProgressBarStep } from "./ProgressBar/ProgressBarStep"


Minor but I have attempted to keep this file alphabetical

chrisnowak

Looks good!

zwkohn added 3 commits August 7, 2023 16:10

initial incentive bar

54694b3

remove console log

39256e9

use computedWidth of container

701587d

renaming; more general

2fd549d

zwkohn changed the title ~~Incentives component~~ Progress Bar Component Aug 28, 2023

zwkohn added 3 commits August 28, 2023 09:16

allow stepIcon to be any ReactElement

b953e02

remove step lines

7efe1cd

remove left/right margin; adjust step percent

ecd9297

zwkohn marked this pull request as ready for review November 27, 2023 20:57

Suvarna-Thejas-CE mentioned this pull request Nov 27, 2023

ProgressBar Wrapper #162

Open

chrisnowak reviewed Nov 28, 2023

View reviewed changes

src/components/presentational/ProgressBar/ProgressBar.tsx Show resolved Hide resolved

chrisnowak reviewed Nov 28, 2023

View reviewed changes

src/components/presentational/ProgressBar/ProgressBar.tsx Show resolved Hide resolved

chrisnowak reviewed Nov 28, 2023

View reviewed changes

Merge remote-tracking branch 'origin/main' into zkohn/incentives

e655b7f

zwkohn added 5 commits November 28, 2023 13:37

some PR cleanup

7b82f4d

fix export

fe5846a

clean up doc

b285a41

fix exports

cd672b0

add borderColor; fix margintop calc

a08c901

zwkohn requested a review from chrisnowak November 30, 2023 15:10

chrisnowak reviewed Nov 30, 2023

View reviewed changes

zwkohn added 2 commits November 30, 2023 14:11

fixing default margin

e36ea9b

truncate the percentages; add sb css

7240ae7

chrisnowak reviewed Nov 30, 2023

View reviewed changes

chrisnowak approved these changes Nov 30, 2023

View reviewed changes

zwkohn added 2 commits November 30, 2023 14:59

cleanup exports; add padding to Template

512ff86

add defaultMargin to args

dbe3a4f

zwkohn merged commit 959c676 into main Nov 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Progress Bar Component #99

Progress Bar Component #99

zwkohn commented Aug 7, 2023 •

edited

Loading

chrisnowak commented Aug 9, 2023

ajmenca commented Aug 9, 2023

bxh commented Aug 15, 2023

Suvarna-Thejas-CE commented Nov 27, 2023

chrisnowak Nov 28, 2023

chrisnowak Nov 28, 2023

chrisnowak Nov 28, 2023

zwkohn Nov 30, 2023

chrisnowak Nov 28, 2023

chrisnowak Nov 28, 2023

chrisnowak Nov 28, 2023

chrisnowak Nov 28, 2023

chrisnowak Nov 28, 2023

chrisnowak Nov 28, 2023

chrisnowak Nov 28, 2023

chrisnowak Nov 28, 2023

chrisnowak Nov 28, 2023

chrisnowak Nov 28, 2023

chrisnowak Nov 28, 2023

chrisnowak Nov 28, 2023 •

edited

Loading

chrisnowak Nov 28, 2023

chrisnowak Nov 28, 2023

chrisnowak Nov 30, 2023

chrisnowak Nov 30, 2023

chrisnowak Nov 30, 2023

chrisnowak Nov 30, 2023

chrisnowak Nov 30, 2023

zwkohn Nov 30, 2023

chrisnowak Nov 30, 2023

chrisnowak Nov 30, 2023

chrisnowak left a comment

		@@ -0,0 +1 @@
		export { default as ProgressBar } from './ProgressBar'

Progress Bar Component #99

Progress Bar Component #99

Conversation

zwkohn commented Aug 7, 2023 • edited Loading

Overview

Security

Checklist

Testing

Documentation

Reviewers

chrisnowak commented Aug 9, 2023

ajmenca commented Aug 9, 2023

bxh commented Aug 15, 2023

Suvarna-Thejas-CE commented Nov 27, 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

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

chrisnowak Nov 28, 2023 • edited Loading

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chrisnowak left a comment

Choose a reason for hiding this comment

zwkohn commented Aug 7, 2023 •

edited

Loading

chrisnowak Nov 28, 2023 •

edited

Loading