Visually render the Progress max prop

[masenf]

Thanks for providing radix themes, it's been a joy working with this package. This is my first PR here, so please let me know if I'm missing anything.

Description

When rendering the Progress component, calculate the transform scaleX of the Progress.Indicator using the max prop supplied by the user.

The max prop is documented for the Progress primitive component and is used when determining the aria-valuemax and aria-valuetext attributes for the Progress div.

Testing steps

I'm using this sample app to test the change

import "@radix-ui/themes/styles.css";
import { useState } from "react";
import { Box, Flex, Progress, Slider, Text, Theme } from "@radix-ui/themes";

function App() {
  const [value, setValue] = useState([50]);
  const [max, setMax] = useState([100]);
  return (
    <Theme>
      <div
        style={{
          backgroundColor: "var(--accent-2)",
          minHeight: "100vh",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          fontSize: "calc(10px + 2vmin)",
        }}
      >
        <Flex direction={"column"} gap={"3"} style={{ width: "300px" }}>
          <Progress value={value[0]} max={max[0]} />

          <Flex gap={"2"}>
            <Box flexGrow={"1"}>
              <Text>Value {value[0]}</Text>
              <Slider value={value} onValueChange={setValue} max={300} />
            </Box>
            <Box flexGrow={"1"}>
              <Text>Max {max[0]}</Text>
              <Slider value={max} onValueChange={setMax} max={300} />
            </Box>
          </Flex>
        </Flex>
      </div>
    </Theme>
  );
}

export default App;

Screen.Recording.2024-05-08.at.13.04.30.mov

Relates issues / PRs

None seen.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
themes-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 9, 2024 4:36pm

[vladmoroz]

Thanks for the contribution!

Before merging, could you also add the following entry to changelog.md?

## 3.0.4 (unreleased)

- Support the `max` prop on the `Progress` component

[vladmoroz]

@masenf this was released as part of "@radix-ui/themes": "3.0.4"