chore(meter, slider): fix spacing of min and max labels (#3488)

twilio-labs · Sep 19, 2023 · 7d155c5 · 7d155c5
1 parent 2da083c
commit 7d155c5
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 3 deletions.
diff --git a/.changeset/famous-paws-marry.md b/.changeset/famous-paws-marry.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/slider': patch
+'@twilio-paste/core': patch
+---
+
+[Slider] Add spacing between min and max range labels, wrap overflow content onto second line, and right-align max range label.
diff --git a/.changeset/forty-carrots-reply.md b/.changeset/forty-carrots-reply.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/meter': patch
+'@twilio-paste/core': patch
+---
+
+[Meter] Add spacing between the min and max labels for readability, right-align the max label, and make overflow min/max labels wrap to second line.
diff --git a/packages/paste-core/components/meter/src/Meter.tsx b/packages/paste-core/components/meter/src/Meter.tsx
@@ -72,8 +72,10 @@ const Meter = React.forwardRef<HTMLMeterElement, MeterProps>(
             display="flex"
             flexDirection="row"
             justifyContent="space-between"
+            columnGap="space20"
             marginTop="space20"
             aria-hidden="true"
+            overflowWrap="anywhere"
             element={`${element}_MIN_MAX_WRAPPER`}
           >
             {minLabel ? (
@@ -84,7 +86,13 @@ const Meter = React.forwardRef<HTMLMeterElement, MeterProps>(
               <span />
             )}
             {maxLabel ? (
-              <Text as="span" color="colorTextWeak" fontWeight="fontWeightNormal" element={`${element}_MAX`}>
+              <Text
+                as="span"
+                color="colorTextWeak"
+                fontWeight="fontWeightNormal"
+                textAlign="end"
+                element={`${element}_MAX`}
+              >
                 {maxLabel}
               </Text>
             ) : (

diff --git a/packages/paste-core/components/meter/stories/index.stories.tsx b/packages/paste-core/components/meter/stories/index.stories.tsx
@@ -135,7 +135,15 @@ export const Wrapped = (): React.ReactElement => {
       <MeterLabel htmlFor={meterId} valueLabel="54,730 is the current value of this Meter">
         Storage space used on this account that belongs to you
       </MeterLabel>
-      <Meter id={meterId} value={54730} minValue={0} maxValue={600000} aria-describedby={helpTextId} />
+      <Meter
+        id={meterId}
+        value={54730}
+        minValue={0}
+        maxValue={600000}
+        aria-describedby={helpTextId}
+        minLabel="000000000000GB"
+        maxLabel="100000000000GB"
+      />
       <HelpText id={helpTextId}>Helpful text</HelpText>
     </Box>
   );

diff --git a/packages/paste-core/components/slider/src/Slider.tsx b/packages/paste-core/components/slider/src/Slider.tsx
@@ -135,16 +135,18 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps>((props, ref)
           element={`${element}_RANGE_LABELS`}
           display="flex"
           justifyContent="space-between"
+          columnGap="space20"
           fontSize="fontSize30"
           lineHeight="lineHeight30"
           fontWeight="fontWeightNormal"
           color="colorTextWeak"
+          overflowWrap="anywhere"
         >
           <Box element={`${element}_RANGE_LABELS_MIN`}>
             <ScreenReaderOnly>{i18nMinRangeLabel}</ScreenReaderOnly>
             {remappedProps.numberFormatter.format(minValue)}
           </Box>
-          <Box element={`${element}_RANGE_LABELS_MAX`}>
+          <Box element={`${element}_RANGE_LABELS_MAX`} textAlign="end">
             <ScreenReaderOnly>{i18nMaxRangeLabel}</ScreenReaderOnly>
             {remappedProps.numberFormatter.format(maxValue)}
           </Box>

diff --git a/packages/paste-core/components/slider/stories/index.stories.tsx b/packages/paste-core/components/slider/stories/index.stories.tsx
@@ -175,6 +175,34 @@ export const HiddenRangeLabels = (): React.ReactNode => {
   );
 };
 
+export const Wrapped = (): React.ReactNode => {
+  const [value, setValue] = React.useState<number>(0.75);
+  const sliderId = useUID();
+  const helpTextId = useUID();
+
+  return (
+    <Form maxWidth="size20">
+      <FormControl>
+        <Label htmlFor={sliderId}>Volume</Label>
+        <Slider
+          id={sliderId}
+          aria-describedby={helpTextId}
+          value={value}
+          minValue={10000000}
+          maxValue={100000000000}
+          step={0.01}
+          onChange={(newValue) => setValue(newValue)}
+          numberFormatter={PercentFormatter}
+        />
+        <HelpText id={helpTextId}>
+          I saw an ad yesterday that said “Radio for sale $1, volume is stuck on full blast”. I said to myself “well, I
+          can’t turn that down.”
+        </HelpText>
+      </FormControl>
+    </Form>
+  );
+};
+
 export const CustomizedSlider = (): React.ReactNode => {
   const activeTheme = useTheme();
   const [value, setValue] = React.useState<number>(32);