adding custom width support to meter and progressbar

packages/@adobe/spectrum-css-temp/components/barloader/index.css

@@ -18,15 +18,27 @@ governing permissions and limitations under the License.
   flex-flow: row wrap;
   justify-content: space-between;
   align-items: center;
-  width: var(--spectrum-barloader-large-width);
+  min-inline-size: var(--spectrum-global-dimension-static-size-600);
+  inline-size: var(--spectrum-barloader-large-width);
   vertical-align: top;
   isolation: isolate;
+
+  &.spectrum-BarLoader--indeterminate {
+    max-inline-size: var(--spectrum-barloader-large-width);
+  }
+
+  &.spectrum-BarLoader--indeterminate.spectrum-BarLoader--sideLabel {
+    .spectrum-BarLoader-track {
+      max-inline-size: var(--spectrum-barloader-large-width);
+    }
+  }
 }
 
 .spectrum-BarLoader-track {
   /* Visually apply border radius to child elements */
   overflow: hidden;
-  width: var(--spectrum-barloader-large-width);
+  min-inline-size: var(--spectrum-global-dimension-static-size-600);
+  inline-size: 100%;
   height: var(--spectrum-barloader-large-height);
   border-radius: var(--spectrum-barloader-large-border-radius);
   z-index: 1; /* to fix a weird webkit bug with rounded corners and masking */
@@ -61,7 +73,11 @@ governing permissions and limitations under the License.
   display: inline-flex;
   flex-flow: row;
   justify-content: space-between;
-  inline-size: auto;
+  min-inline-size: fit-content;
+
+  .spectrum-BarLoader-track {
+    inline-size: inherit;
+  }
 
   .spectrum-BarLoader-label {
     margin-inline-end: var(--spectrum-barloader-large-label-gap-x);
@@ -76,7 +92,7 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-BarLoader--small {
-  min-width: var(--spectrum-barloader-small-width);
+  min-inline-size: var(--spectrum-global-dimension-static-size-600);
 
   .spectrum-BarLoader-fill {
     height: var(--spectrum-barloader-small-height);
@@ -88,7 +104,7 @@ governing permissions and limitations under the License.
   }
 }
 .spectrum-BarLoader--indeterminate .spectrum-BarLoader-fill {
-  width: var(--spectrum-barloader-large-indeterminate-fill-width);
+  inline-size: var(--spectrum-barloader-large-indeterminate-fill-width);
   position: relative;
   animation-timing-function: var(--spectrum-barloader-large-indeterminate-animation-ease);
   will-change: transform;

packages/@react-spectrum/meter/stories/Meter.stories.tsx

@@ -116,6 +116,38 @@ storiesOf('Meter', module)
       return render({variant: 'warning', value});
     }
   )
+  .add(
+    'parent width 100%',
+    () => (
+      <span style={{width: '100%'}}>
+        {render({value: 32})}
+      </span>
+    )
+  )
+  .add(
+    'parent width 100px',
+    () => (
+      <span style={{width: '100px'}}>
+        {render({value: 32})}
+      </span>
+    )
+  )
+  .add(
+    'width: 300px',
+    () => render({value: 32, width: '300px'})
+  )
+  .add(
+    'width: 300px, labelPosition: side',
+    () => render({value: 32, width: '300px', labelPosition: 'side'})
+  )
+  .add(
+    'width: 30px',
+    () => render({value: 32, width: '30px'})
+  )
+  .add(
+    'width: 30px, labelPosition: side',
+    () => render({value: 32, width: '30px', labelPosition: 'side'})
+  )
   .add(
     'Using raw values for minValue, maxValue, and value',
     () => render({

packages/@react-spectrum/progress/stories/ProgressBar.stories.tsx

@@ -108,6 +108,20 @@ storiesOf('Progress/ProgressBar', module)
       return render({value, labelPosition: 'top'});
     }
   )
+  .add(
+    'long label',
+    () => {
+      const value = number('Value', 32, sliderOptions);
+      return render({value, label: 'Super long progress bar label. Sample label copy. Loading...'});
+    }
+  )
+  .add(
+    'long label, labelPosition: side',
+    () => {
+      const value = number('Value', 32, sliderOptions);
+      return render({value, labelPosition: 'side', label: 'Super long progress bar label. Sample label copy. Loading...'});
+    }
+  )
   .add(
     'isIndeterminate: true',
     () => {
@@ -130,6 +144,59 @@ storiesOf('Progress/ProgressBar', module)
       );
     }
   )
+  .add(
+    'parent width 100%',
+    () => (
+      <span style={{width: '100%'}}>
+        {render()}
+      </span>
+    )
+  )
+  .add(
+    'parent width 100px',
+    () => (
+      <span style={{width: '100px'}}>
+        {render()}
+      </span>
+    )
+  )
+  .add(
+    'width: 300px',
+    () => render({width: '300px', value: 100})
+  )
+  .add(
+    'width: 300px, isIndeterminate: true',
+    () => render({width: '300px', isIndeterminate: true})
+  )
+  .add(
+    'width: 300px, labelPosition: side',
+    () => render({width: '300px', labelPosition: 'side'})
+  )
+  .add(
+    'width: 300px, labelPosition: side, isIndeterminate: true',
+    () => render({width: '300px', labelPosition: 'side', isIndeterminate: true})
+  )
+  .add(
+    'width: 30px',
+    () => render({width: '30px'})
+  )
+  .add(
+    'width: 30px, size: S',
+    () => render({width: '30px', size: 'S'})
+  )
+  .add(
+    'width: 30px, labelPosition: side, long label',
+    () => render({width: '30px', labelPosition: 'side', label: 'Super long progress bar label. Sample label copy. Loading...'})
+  )
+  .add(
+    'width: 30px, labelPosition: side, isIndeterminate: true, long label, button on right',
+    () => (
+      <>
+        {render({width: '30px', labelPosition: 'side', isIndeterminate: true, label: 'Super long progress bar label. Sample label copy. Loading...'})}
+        <button>Confirm</button>
+      </>
+    )
+  )
   .add(
     'Using raw values for minValue, maxValue, and value',
     () => render({
@@ -151,7 +218,5 @@ storiesOf('Progress/ProgressBar', module)
   );
 
 function render(props: any = {}) {
-  return (
-    <ProgressBar label="Loading…" {...props} />
-  );
+  return (<ProgressBar label="Loading…" {...props} />);
 }