fix(ProgressBar): allow value to be above maximum (#4855)

Author: matthprost

.changeset/tasty-olives-flash.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Fix `<ProgressBar />` to allow values above the maximum value

packages/ui/src/components/ProgressBar/__stories__/Overflow.stories.tsx

@@ -0,0 +1,12 @@
+import { Template } from './Template.stories'
+
+export const Overflow = Template.bind({})
+
+Overflow.args = {
+  label: 'Storage',
+  value: 110,
+  max: 100,
+  suffix: '%',
+  showProgress: true,
+  sentiment: 'danger',
+}

packages/ui/src/components/ProgressBar/__stories__/index.stories.tsx

@@ -15,3 +15,4 @@ export { Direction } from './Direction.stories'
 export { ShowProgress } from './ShowProgress.stories'
 export { PrefixSuffix } from './PrefixSuffix.stories'
 export { Max } from './Max.stories'
+export { Overflow } from './Overflow.stories'

packages/ui/src/components/ProgressBar/index.tsx

@@ -131,9 +131,7 @@ export const ProgressBar = ({
             placement="right"
           >
             {prefix}
-            {suffix === '%'
-              ? (100 * Math.max(0, Math.min(max, value))) / max
-              : Math.max(0, Math.min(max, value))}
+            {suffix === '%' ? (100 * value) / max : value}
             {suffix}
           </Text>
         ) : null}
@@ -169,9 +167,7 @@ export const ProgressBar = ({
       <StyledStack direction="row" gap={1}>
         <StyledText as="label" variant="bodySmall" sentiment="neutral">
           {prefix}
-          {suffix === '%'
-            ? (100 * Math.max(0, Math.min(max, value))) / max
-            : Math.max(0, Math.min(max, value))}
+          {suffix === '%' ? (100 * value) / max : value}
           {suffix}
         </StyledText>
       </StyledStack>