Fix RAC progressbar and meter overflow (#5706)

* Fix RAC progressbar and meter overflow

Author: snowystinger

packages/react-aria-components/package.json

@@ -44,6 +44,7 @@
     "@react-aria/toolbar": "3.0.0-beta.1",
     "@react-aria/utils": "^3.23.0",
     "@react-stately/table": "^3.11.4",
+    "@react-stately/utils": "^3.9.0",
     "@react-types/form": "^3.7.1",
     "@react-types/grid": "^3.2.3",
     "@react-types/shared": "^3.22.0",

packages/react-aria-components/src/Meter.tsx

@@ -11,6 +11,7 @@
  */
 
 import {AriaMeterProps, useMeter} from 'react-aria';
+import {clamp} from '@react-stately/utils';
 import {ContextValue, forwardRefType, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {LabelContext} from './Label';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
@@ -38,6 +39,7 @@ function Meter(props: MeterProps, ref: ForwardedRef<HTMLDivElement>) {
     minValue = 0,
     maxValue = 100
   } = props;
+  value = clamp(value, minValue, maxValue);
 
   let [labelRef, label] = useSlot();
   let {

packages/react-aria-components/src/ProgressBar.tsx

@@ -11,6 +11,7 @@
  */
 
 import {AriaProgressBarProps, useProgressBar} from 'react-aria';
+import {clamp} from '@react-stately/utils';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {LabelContext} from './Label';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
@@ -44,6 +45,7 @@ function ProgressBar(props: ProgressBarProps, ref: ForwardedRef<HTMLDivElement>)
     maxValue = 100,
     isIndeterminate = false
   } = props;
+  value = clamp(value, minValue, maxValue);
 
   let [labelRef, label] = useSlot();
   let {

packages/react-aria-components/stories/Meter.stories.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Label, Meter} from 'react-aria-components';
+import React from 'react';
+
+export default {
+  title: 'React Aria Components',
+  component: Meter,
+  args: {
+    value: 50
+  },
+  argTypes: {
+    value: {control: 'number'},
+    minValue: {control: 'number'},
+    maxValue: {control: 'number'}
+  }
+};
+
+export const MeterExample = (args) => {
+  return (
+    <Meter {...args}>
+      {({percentage, valueText}) => (
+        <>
+          <Label>Storage space</Label>
+          <span className="value">{valueText}</span>
+          <div className="bar">
+            <div className="fill" style={{width: percentage + '%'}} />
+          </div>
+        </>
+      )}
+    </Meter>
+  );
+};

packages/react-aria-components/stories/ProgressBar.stories.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Label, ProgressBar} from 'react-aria-components';
+import React from 'react';
+
+export default {
+  title: 'React Aria Components',
+  component: ProgressBar,
+  args: {
+    value: 50
+  },
+  argTypes: {
+    value: {control: 'number'},
+    minValue: {control: 'number'},
+    maxValue: {control: 'number'}
+  }
+};
+
+export const ProgressBarExample = (args) => {
+  return (
+    <ProgressBar {...args}>
+      {({percentage, valueText}) => (
+        <>
+          <Label>Storage space</Label>
+          <span className="value">{valueText}</span>
+          <div className="bar">
+            <div className="fill" style={{width: percentage + '%'}} />
+          </div>
+        </>
+      )}
+    </ProgressBar>
+  );
+};

packages/react-aria-components/stories/styles.css

@@ -357,3 +357,33 @@
     opacity: 0.4;
   }
 }
+
+:global(.react-aria-Meter),
+:global(.react-aria-ProgressBar) {
+  --fill-color: forestgreen;
+
+  display: grid;
+  grid-template-areas: "label value"
+                       "bar bar";
+  grid-template-columns: 1fr auto;
+  gap: 4px;
+  width: 250px;
+  color: var(--text-color);
+
+  :global(.value) {
+    grid-area: value;
+  }
+
+  :global(.bar) {
+    grid-area: bar;
+    box-shadow: inset 0px 0px 0px 1px var(--spectrum-global-color-gray-400);
+    height: 10px;
+    border-radius: 5px;
+    overflow: hidden;
+  }
+
+  :global(.fill) {
+    background: var(--fill-color);
+    height: 100%;
+  }
+}