From db991da7c482ac2c0a3f2a52d45f9e2b5ae3e0a0 Mon Sep 17 00:00:00 2001 From: sooinc Date: Wed, 6 Mar 2024 15:04:25 -0500 Subject: [PATCH 1/7] add flat prop to progressBar --- packages/gamut/src/ProgressBar/index.tsx | 29 +++++++++++++- .../Atoms/ProgressBar/index.stories.mdx | 38 +++++++++++++++++++ 2 files changed, 66 insertions(+), 1 deletion(-) diff --git a/packages/gamut/src/ProgressBar/index.tsx b/packages/gamut/src/ProgressBar/index.tsx index a731ab0b3a..e37858da25 100644 --- a/packages/gamut/src/ProgressBar/index.tsx +++ b/packages/gamut/src/ProgressBar/index.tsx @@ -28,12 +28,33 @@ export type ProgressBarProps = { */ variant: 'blue' | 'yellow' | 'default'; + /** + * Whether to flatten the bottom or top of the progress bar. + */ + flat?: 'flat-bottom' | 'flat-top'; + /** * Pattern component to use as a background. */ pattern?: React.ComponentType; }; +const progressBarFlatVariants = variant({ + defaultVariant: 'default', + prop: 'flat', + variants: { + 'flat-bottom': { + borderBottomRightRadius: 0, + borderBottomLeftRadius: 0, + }, + 'flat-top': { + borderTopRightRadius: 0, + borderTopLeftRadius: 0, + }, + default: {}, + }, +}); + const progressBarSizeVariants = variant({ defaultVariant: 'small', prop: 'size', @@ -119,7 +140,10 @@ const progressBarForegroundVariants = variant({ }, }); -type ProgressBarElementProps = Pick; +type ProgressBarElementProps = Pick< + ProgressBarProps, + 'variant' | 'size' | 'flat' +>; type ProgressBarElementWrapperProps = ProgressBarElementProps & { backgroundOverride: 'pattern' | 'none'; @@ -129,6 +153,7 @@ const ProgressBarWrapper = styled.div` ${progressBarBackgroundVariants}; ${progressBarSizeVariants}; ${progressBarBackgroundOverride}; + ${progressBarFlatVariants} `; const Bar = styled.div(progressBarForegroundVariants); @@ -141,6 +166,7 @@ const DisplayedPercent = styled.span` `; export const ProgressBar: React.FC = ({ + flat, minimumPercent = 0, percent, pattern: Pattern, @@ -151,6 +177,7 @@ export const ProgressBar: React.FC = ({ return ( } + +## Flat + +Use the prop flat and set it to either "flat-bottom" or "flat-bottom". This allows the ProgressBar to be either be on top of or bottom of a Card. + +### Flat-top + + + + {(args) => } + + + +### Flat-bottom + + + + {(args) => } + + From d28d2e9095b5a442fd17315fad0f543f220ac9d4 Mon Sep 17 00:00:00 2001 From: sooinc Date: Wed, 6 Mar 2024 15:07:53 -0500 Subject: [PATCH 2/7] fix story --- packages/styleguide/stories/Atoms/ProgressBar/index.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styleguide/stories/Atoms/ProgressBar/index.stories.mdx b/packages/styleguide/stories/Atoms/ProgressBar/index.stories.mdx index c05d6ab578..0eeb40c92c 100644 --- a/packages/styleguide/stories/Atoms/ProgressBar/index.stories.mdx +++ b/packages/styleguide/stories/Atoms/ProgressBar/index.stories.mdx @@ -147,7 +147,7 @@ Here we are using the `DiagonalARegular` pattern in navy in the large ProgressBa ## Flat -Use the prop flat and set it to either "flat-bottom" or "flat-bottom". This allows the ProgressBar to be either be on top of or bottom of a Card. +Use the prop flat and set it to either "flat-top" or "flat-bottom". This allows the ProgressBar to be on top or bottom of a Card. ### Flat-top From d04f86d0b00dce8f2289bee724c5843f38c2d316 Mon Sep 17 00:00:00 2001 From: sooinc Date: Wed, 6 Mar 2024 17:08:47 -0500 Subject: [PATCH 3/7] fix inner bar border radius --- packages/gamut/src/ProgressBar/index.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/gamut/src/ProgressBar/index.tsx b/packages/gamut/src/ProgressBar/index.tsx index e37858da25..26f013cad8 100644 --- a/packages/gamut/src/ProgressBar/index.tsx +++ b/packages/gamut/src/ProgressBar/index.tsx @@ -5,6 +5,13 @@ import * as React from 'react'; import { Text } from '../Typography'; +const borderRadius = { + small: '3px', + medium: '80px', + large: '9px', + xl: '18px', +}; + export type ProgressBarProps = { className?: string; @@ -66,20 +73,20 @@ const progressBarSizeVariants = variant({ variants: { small: { height: '6px', - borderRadius: '3px', + borderRadius: borderRadius.small, }, medium: { height: '8px', - borderRadius: '80px', + borderRadius: borderRadius.medium, }, large: { height: '18px', - borderRadius: '9px', + borderRadius: borderRadius.large, fontSize: 14, }, xl: { height: '36px', - borderRadius: '18px', + borderRadius: borderRadius.xl, }, }, }); @@ -122,7 +129,6 @@ const progressBarForegroundVariants = variant({ display: 'flex', transition: 'width 0.5s', position: 'relative', - borderRadius: 'inherit', }, variants: { blue: { @@ -192,6 +198,8 @@ export const ProgressBar: React.FC = ({ boxShadow: showBarBorder ? `0.5px 0 0 0.5px ${theme.colors.navy}` : 'none', + borderTopRightRadius: flat ? borderRadius[size] : 'inherit', + borderBottomRightRadius: flat ? borderRadius[size] : 'inherit', }} > {['large', 'xl'].includes(size) && ( From 9149d5fe83795fb7f66317a59e12857bfdd21db8 Mon Sep 17 00:00:00 2001 From: sooinc Date: Thu, 14 Mar 2024 11:27:35 -0400 Subject: [PATCH 4/7] use Box and inline props --- .vscode/settings.json | 4 ++-- packages/gamut/src/ProgressBar/index.tsx | 17 ++++++++--------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index cea1d399a6..419143752f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -28,7 +28,7 @@ "editor.wordWrap": "wordWrapColumn", "editor.wordWrapColumn": 120, "editor.codeActionsOnSave": { - "source.fixAll": true + "source.fixAll": "explicit" } }, "mdx.experimentalLanguageServer": true, @@ -37,7 +37,7 @@ }, "typescript.tsdk": "node_modules/typescript/lib", "editor.codeActionsOnSave": { - "source.fixAll.eslint": true + "source.fixAll.eslint": "explicit" }, "storyExplorer.storiesGlobs": "packages/styleguide/stories/**/*.stories.mdx", "jest.jestCommandLine": "node_modules/.bin/jest" diff --git a/packages/gamut/src/ProgressBar/index.tsx b/packages/gamut/src/ProgressBar/index.tsx index 26f013cad8..a1daf43bac 100644 --- a/packages/gamut/src/ProgressBar/index.tsx +++ b/packages/gamut/src/ProgressBar/index.tsx @@ -3,6 +3,7 @@ import { theme, variant } from '@codecademy/gamut-styles'; import styled from '@emotion/styled'; import * as React from 'react'; +import { Box } from '../Box'; import { Text } from '../Typography'; const borderRadius = { @@ -162,7 +163,7 @@ const ProgressBarWrapper = styled.div` ${progressBarFlatVariants} `; -const Bar = styled.div(progressBarForegroundVariants); +const Bar = styled(Box)(progressBarForegroundVariants); const DisplayedPercent = styled.span` font-weight: bold; @@ -192,15 +193,13 @@ export const ProgressBar: React.FC = ({ {Pattern && } {['large', 'xl'].includes(size) && ( {percent}% From f62d15edde17543fad741ee3e506a30932cc1621 Mon Sep 17 00:00:00 2001 From: sooinc Date: Thu, 14 Mar 2024 11:30:38 -0400 Subject: [PATCH 5/7] revert settings.json change --- .vscode/settings.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 419143752f..cea1d399a6 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -28,7 +28,7 @@ "editor.wordWrap": "wordWrapColumn", "editor.wordWrapColumn": 120, "editor.codeActionsOnSave": { - "source.fixAll": "explicit" + "source.fixAll": true } }, "mdx.experimentalLanguageServer": true, @@ -37,7 +37,7 @@ }, "typescript.tsdk": "node_modules/typescript/lib", "editor.codeActionsOnSave": { - "source.fixAll.eslint": "explicit" + "source.fixAll.eslint": true }, "storyExplorer.storiesGlobs": "packages/styleguide/stories/**/*.stories.mdx", "jest.jestCommandLine": "node_modules/.bin/jest" From 8f92ebfc575c77570fb98e513c10b81b79aa0bb8 Mon Sep 17 00:00:00 2001 From: sooinc Date: Thu, 14 Mar 2024 16:41:41 -0400 Subject: [PATCH 6/7] make inner straight --- .vscode/settings.json | 4 ++-- packages/gamut/src/ProgressBar/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index cea1d399a6..419143752f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -28,7 +28,7 @@ "editor.wordWrap": "wordWrapColumn", "editor.wordWrapColumn": 120, "editor.codeActionsOnSave": { - "source.fixAll": true + "source.fixAll": "explicit" } }, "mdx.experimentalLanguageServer": true, @@ -37,7 +37,7 @@ }, "typescript.tsdk": "node_modules/typescript/lib", "editor.codeActionsOnSave": { - "source.fixAll.eslint": true + "source.fixAll.eslint": "explicit" }, "storyExplorer.storiesGlobs": "packages/styleguide/stories/**/*.stories.mdx", "jest.jestCommandLine": "node_modules/.bin/jest" diff --git a/packages/gamut/src/ProgressBar/index.tsx b/packages/gamut/src/ProgressBar/index.tsx index a1daf43bac..c15faf6b3a 100644 --- a/packages/gamut/src/ProgressBar/index.tsx +++ b/packages/gamut/src/ProgressBar/index.tsx @@ -196,8 +196,8 @@ export const ProgressBar: React.FC = ({ boxShadow={ showBarBorder ? `0.5px 0 0 0.5px ${theme.colors.navy}` : 'none' } - borderRadiusTopRight={flat ? borderRadius[size] : 'inherit'} - borderRadiusBottomRight={flat ? borderRadius[size] : 'inherit'} + borderRadiusTopRight={flat ? 0 : 'inherit'} + borderRadiusBottomRight={flat ? 0 : 'inherit'} width={`${Math.max(minimumPercent, percent)}%`} data-testid="progress-bar-bar" > From 73dff8e3c8abd70945b588f9d29ebcad9d391d98 Mon Sep 17 00:00:00 2001 From: sooinc Date: Thu, 14 Mar 2024 17:00:07 -0400 Subject: [PATCH 7/7] revert settings.json --- .vscode/settings.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 419143752f..cea1d399a6 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -28,7 +28,7 @@ "editor.wordWrap": "wordWrapColumn", "editor.wordWrapColumn": 120, "editor.codeActionsOnSave": { - "source.fixAll": "explicit" + "source.fixAll": true } }, "mdx.experimentalLanguageServer": true, @@ -37,7 +37,7 @@ }, "typescript.tsdk": "node_modules/typescript/lib", "editor.codeActionsOnSave": { - "source.fixAll.eslint": "explicit" + "source.fixAll.eslint": true }, "storyExplorer.storiesGlobs": "packages/styleguide/stories/**/*.stories.mdx", "jest.jestCommandLine": "node_modules/.bin/jest"