Update docs

mj12albert · Oct 28, 2024 · a5d1221 · a5d1221
1 parent 7bff577
commit a5d1221
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 47 deletions.
diff --git a/docs/data/components/meter/MeterIntroduction.js b/docs/data/components/meter/MeterIntroduction.js
@@ -8,28 +8,22 @@ export default function MeterIntroduction() {
     <div className={classes.demo}>
       <Meter.Root className={classes.meter} value={60} aria-label="Battery Life">
         <Meter.Track className={classes.track}>
-          <BoltIcon className={classes.icon} />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            className={classes.icon}
+          >
+            <path
+              d="M10.67 21c-.35 0-.62-.31-.57-.66L11 14H7.5c-.88 0-.33-.75-.31-.78 1.26-2.23 3.15-5.53 5.65-9.93.1-.18.3-.29.5-.29.35 0 .62.31.57.66l-.9 6.34h3.51c.4 0 .62.19.4.66-3.29 5.74-5.2 9.09-5.75 10.05-.1.18-.29.29-.5.29z"
+              fill="currentColor"
+            />
+          </svg>
           <Meter.Indicator className={classes.indicator} />
         </Meter.Track>
       </Meter.Root>
     </div>
   );
 }
-
-function BoltIcon(props) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path
-        d="M10.67 21c-.35 0-.62-.31-.57-.66L11 14H7.5c-.88 0-.33-.75-.31-.78 1.26-2.23 3.15-5.53 5.65-9.93.1-.18.3-.29.5-.29.35 0 .62.31.57.66l-.9 6.34h3.51c.4 0 .62.19.4.66-3.29 5.74-5.2 9.09-5.75 10.05-.1.18-.29.29-.5.29z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/docs/data/components/meter/MeterIntroduction.tsx b/docs/data/components/meter/MeterIntroduction.tsx
@@ -8,28 +8,22 @@ export default function MeterIntroduction() {
     <div className={classes.demo}>
       <Meter.Root className={classes.meter} value={60} aria-label="Battery Life">
         <Meter.Track className={classes.track}>
-          <BoltIcon className={classes.icon} />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            className={classes.icon}
+          >
+            <path
+              d="M10.67 21c-.35 0-.62-.31-.57-.66L11 14H7.5c-.88 0-.33-.75-.31-.78 1.26-2.23 3.15-5.53 5.65-9.93.1-.18.3-.29.5-.29.35 0 .62.31.57.66l-.9 6.34h3.51c.4 0 .62.19.4.66-3.29 5.74-5.2 9.09-5.75 10.05-.1.18-.29.29-.5.29z"
+              fill="currentColor"
+            />
+          </svg>
           <Meter.Indicator className={classes.indicator} />
         </Meter.Track>
       </Meter.Root>
     </div>
   );
 }
-
-function BoltIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path
-        d="M10.67 21c-.35 0-.62-.31-.57-.66L11 14H7.5c-.88 0-.33-.75-.31-.78 1.26-2.23 3.15-5.53 5.65-9.93.1-.18.3-.29.5-.29.35 0 .62.31.57.66l-.9 6.34h3.51c.4 0 .62.19.4.66-3.29 5.74-5.2 9.09-5.75 10.05-.1.18-.29.29-.5.29z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/docs/data/components/meter/MeterIntroduction.tsx.preview b/docs/data/components/meter/MeterIntroduction.tsx.preview
diff --git a/docs/data/components/meter/meter.mdx b/docs/data/components/meter/meter.mdx
@@ -21,7 +21,7 @@ packageName: '@base_ui/react'
 
 <InstallationInstructions componentName="Meter" />
 
-### Anatomy
+## Anatomy
 
 Meter
 
@@ -36,3 +36,68 @@ Meter
   </Meter.Track>
 </Meter.Root>
 ```
+
+## Value
+
+The `value` prop represents the (percentage) value of the Meter component.
+
+```tsx
+<Meter.Root value={myValue}>
+  <Meter.Track>
+    <Meter.Indicator />
+  </Meter.Track>
+</Meter.Root>
+```
+
+## Min/max and high/low
+
+The `min` and `max` props can be used to establish the lower and upper bound of the range. The default minimum and maximum values are `0` and `100`.
+
+```tsx
+<Meter.Root min={0} max={10}>
+  <Meter.Track>
+    <Meter.Indicator />
+  </Meter.Track>
+</Meter.Root>
+```
+
+The `high` and `low` props can be used together with `min` and `max` to divide the range into 3 segments: `'low'`, `'medium'`, and `'high'`.
+A `[data-segment='low' | 'medium' | 'high']` attribute is set depending on which segment the value lands on.
+
+```tsx
+<Meter.Root min={0} max={100} low={20} high={80}>
+  <Meter.Track>
+    <Meter.Indicator />
+  </Meter.Track>
+</Meter.Root>
+```
+
+## Optimum value
+
+The optimum prop defines whether the low, medium, or high segment of the range is "preferable". For example, for "battery health" higher is better, but for "CPU temperature" lower may be better. A `[data-optimum]` attribute is set when the value is in the "preferable" segment.
+
+```tsx
+<Meter.Root min={0} max={100} low={20} high={75} optimum={80}>
+  <Meter.Track>
+    <Meter.Indicator />
+  </Meter.Track>
+</Meter.Root>
+```
+
+## RTL
+
+Set the `direction` prop to `'rtl'` to change the direction that the `Indicator` fills towards for right-to-left languages:
+
+```jsx
+<Meter.Root direction="rtl">{/* Subcomponents */}</Meter.Root>
+```
+
+## Overriding default components
+
+Use the `render` prop to override the rendered element for all subcomponents:
+
+```jsx
+<Meter.Indicator render={<MyCustomIndicator />} />
+// or
+<Meter.Indicator render={(props) => <MyCustomIndicator {...props} />} />
+```
diff --git a/docs/data/components/meter/styles.module.css b/docs/data/components/meter/styles.module.css
@@ -16,8 +16,8 @@
 
 .track {
   position: relative;
-  width: 38px;
-  height: 16px;
+  width: 48px;
+  height: 26px;
   border-radius: 5px;
   border: 3px solid currentColor;
   padding: 2px;