Revert segmenting

mui · Dec 6, 2024 · 8342540 · 8342540
1 parent 94bc991
commit 8342540
Show file tree

Hide file tree

Showing 8 changed files with 8 additions and 165 deletions.
diff --git a/docs/data/api/meter-root.json b/docs/data/api/meter-root.json
@@ -13,11 +13,8 @@
       "type": { "name": "func" },
       "signature": { "type": "function(value: number) => string", "describedArgs": ["value"] }
     },
-    "high": { "type": { "name": "number" }, "default": "100" },
-    "low": { "type": { "name": "number" }, "default": "0" },
     "max": { "type": { "name": "number" }, "default": "100" },
     "min": { "type": { "name": "number" }, "default": "0" },
-    "optimum": { "type": { "name": "number" } },
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "MeterRoot",

diff --git a/docs/data/components/meter/meter.mdx b/docs/data/components/meter/meter.mdx
@@ -49,7 +49,7 @@ The `value` prop represents the (percentage) value of the Meter component.
 </Meter.Root>
 ```
 
-## Min/max and high/low
+## Min/max
 
 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`.
 
@@ -61,29 +61,6 @@ The `min` and `max` props can be used to establish the lower and upper bound of
 </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
 
 Place the component inside any HTML element or component with the HTML dir attribute to change the direction that the `Indicator` fills towards for right-to-left languages:

diff --git a/docs/data/translations/api-docs/meter-root/meter-root.json b/docs/data/translations/api-docs/meter-root/meter-root.json
@@ -17,19 +17,10 @@
     },
     "getAriaValueText": {
       "description": "Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the meter indicator.",
-      "typeDescriptions": { "value": "The component&#39;s value to format" }
-    },
-    "high": {
-      "description": "Sets the lower boundary of the high end of the numeric range represented by the component. If unspecified, or greater than <code>max</code>, it will fall back to <code>max</code>."
-    },
-    "low": {
-      "description": "Sets the upper boundary of the low end of the numeric range represented by the component. If unspecified, or less than <code>min</code>, it will fall back to <code>min</code>."
+      "typeDescriptions": { "value": "The component&#39;s numerical value." }
     },
     "max": { "description": "The maximum value" },
     "min": { "description": "The minimum value" },
-    "optimum": {
-      "description": "Indicates the optimal point in the numeric range represented by the component."
-    },
     "render": { "description": "A function to customize rendering of the component." },
     "value": { "description": "The current value." }
   },

diff --git a/docs/reference/generated/meter-root.json b/docs/reference/generated/meter-root.json
@@ -31,16 +31,6 @@
       "type": "function(value: number) => string",
       "description": "Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the meter indicator."
     },
-    "high": {
-      "type": "number",
-      "default": "100",
-      "description": "Sets the lower boundary of the high end of the numeric range represented by the component.\nIf unspecified, or greater than `max`, it will fall back to `max`."
-    },
-    "low": {
-      "type": "number",
-      "default": "0",
-      "description": "Sets the upper boundary of the low end of the numeric range represented by the component.\nIf unspecified, or less than `min`, it will fall back to `min`."
-    },
     "max": {
       "type": "number",
       "default": "100",
@@ -51,10 +41,6 @@
       "default": "0",
       "description": "The minimum value"
     },
-    "optimum": {
-      "type": "number",
-      "description": "Indicates the optimal point in the numeric range represented by the component."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "A function to customize rendering of the component."

diff --git a/docs/src/app/experiments/meter.tsx b/docs/src/app/experiments/meter.tsx
@@ -9,19 +9,13 @@ interface Range {
   value: number;
   min: number;
   max: number;
-  high: number;
-  low: number;
-  optimum: number;
 }
 
 export default function MeterIntroduction() {
   const [range, setRange] = React.useState<Range>({
     value: 55,
     min: 0,
     max: 100,
-    high: 70,
-    low: 20,
-    optimum: 80,
   });
 
   function setValue(name: string, value: number | null) {
@@ -43,17 +37,14 @@ export default function MeterIntroduction() {
             value={range.value}
             min={range.min}
             max={range.max}
-            high={range.high}
-            low={range.low}
-            optimum={range.optimum}
           >
             <Meter.Track className={classes.track}>
               <Meter.Indicator className={classes.indicator} />
             </Meter.Track>
           </Meter.Root>
         </div>
         <div className={classes.controls}>
-          {['value', 'min', 'max', 'high', 'low', 'optimum'].map((v) => {
+          {['value', 'min', 'max'].map((v) => {
             return (
               <Input
                 key={v}
@@ -68,19 +59,13 @@ export default function MeterIntroduction() {
       </div>
 
       <div dir="rtl">
-        <pre>
-          This is the same meter as above but wrapped in a div with the `dir="rtl"`
-          attribute so it fills from right-to-left
-        </pre>
+        <pre>RTL:</pre>
         <Meter.Root
           className={classes.meter}
           aria-label="Battery Life"
           value={range.value}
           min={range.min}
           max={range.max}
-          high={range.high}
-          low={range.low}
-          optimum={range.optimum}
         >
           <Meter.Track className={classes.track}>
             <Meter.Indicator className={classes.indicator} />

diff --git a/packages/react/src/meter/root/MeterRoot.tsx b/packages/react/src/meter/root/MeterRoot.tsx
@@ -33,9 +33,6 @@ const MeterRoot = React.forwardRef(function MeterRoot(
     getAriaValueText: getAriaValueTextProp,
     max = 100,
     min = 0,
-    low,
-    high,
-    optimum,
     value,
     render,
     className,
@@ -50,20 +47,15 @@ const MeterRoot = React.forwardRef(function MeterRoot(
     getAriaValueText: getAriaValueTextProp ?? NOOP,
     max,
     min,
-    low: low ?? min,
-    high: high ?? max,
-    optimum: optimum ?? NaN,
     value,
   });
 
   const state: MeterRoot.State = React.useMemo(
     () => ({
       max,
       min,
-      segment: meter.segment,
-      isOptimal: meter.isOptimal,
     }),
-    [max, min, meter.segment, meter.isOptimal],
+    [max, min],
   );
 
   const contextValue: MeterRootContext = React.useMemo(
@@ -93,8 +85,6 @@ namespace MeterRoot {
   export type State = {
     max: number;
     min: number;
-    segment: useMeterRoot.Segment;
-    isOptimal: boolean;
   };
 
   export interface Props
@@ -142,22 +132,10 @@ MeterRoot.propTypes /* remove-proptypes */ = {
   getAriaLabel: PropTypes.func,
   /**
    * Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the meter indicator.
-   * @param {number} value The component's value to format
+   * @param {number} value The component's numerical value.
    * @returns {string}
    */
   getAriaValueText: PropTypes.func,
-  /**
-   * Sets the lower boundary of the high end of the numeric range represented by the component.
-   * If unspecified, or greater than `max`, it will fall back to `max`.
-   * @default 100
-   */
-  high: PropTypes.number,
-  /**
-   * Sets the upper boundary of the low end of the numeric range represented by the component.
-   * If unspecified, or less than `min`, it will fall back to `min`.
-   * @default 0
-   */
-  low: PropTypes.number,
   /**
    * The maximum value
    * @default 100
@@ -168,10 +146,6 @@ MeterRoot.propTypes /* remove-proptypes */ = {
    * @default 0
    */
   min: PropTypes.number,
-  /**
-   * Indicates the optimal point in the numeric range represented by the component.
-   */
-  optimum: PropTypes.number,
   /**
    * A function to customize rendering of the component.
    */

diff --git a/packages/react/src/meter/root/styleHooks.ts b/packages/react/src/meter/root/styleHooks.ts
@@ -4,13 +4,4 @@ import type { MeterRoot } from './MeterRoot';
 export const meterStyleHookMapping: CustomStyleHookMapping<MeterRoot.State> = {
   max: () => null,
   min: () => null,
-  isOptimal: (value: boolean) => {
-    if (value) {
-      return {
-        'data-optimum': '',
-      };
-    }
-
-    return null;
-  },
 };
diff --git a/packages/react/src/meter/root/useMeterRoot.ts b/packages/react/src/meter/root/useMeterRoot.ts
@@ -12,39 +12,11 @@ function useMeterRoot(parameters: useMeterRoot.Parameters): useMeterRoot.ReturnV
     getAriaValueText,
     max,
     min,
-    high: highParam,
-    low: lowParam,
-    optimum,
     value,
   } = parameters;
 
   const percentageValue = valueToPercent(value, min, max);
 
-  const high = Number.isNaN(highParam) ? max : highParam;
-  const low = Number.isNaN(lowParam) ? min : lowParam;
-
-  let segment: useMeterRoot.Segment | undefined;
-
-  if (value <= low) {
-    segment = 'low';
-  } else if (value >= high) {
-    segment = 'high';
-  } else {
-    segment = 'medium';
-  }
-
-  // 'low' is preferred if `min <= optimum <= low`
-  // 'high' is preferred if `high <= optimum <= max`
-  let isOptimal = false;
-
-  if (!Number.isNaN(optimum)) {
-    if (min <= optimum && optimum <= low) {
-      isOptimal = segment === 'low';
-    } else if (high <= optimum && optimum <= max) {
-      isOptimal = segment === 'high';
-    }
-  }
-
   const getRootProps: useMeterRoot.ReturnValue['getRootProps'] = React.useCallback(
     (externalProps = {}) =>
       mergeReactProps<'div'>(externalProps, {
@@ -64,8 +36,8 @@ function useMeterRoot(parameters: useMeterRoot.Parameters): useMeterRoot.ReturnV
       getAriaValueText,
       max,
       min,
-      value,
       percentageValue,
+      value,
     ],
   );
 
@@ -75,14 +47,10 @@ function useMeterRoot(parameters: useMeterRoot.Parameters): useMeterRoot.ReturnV
     min,
     value,
     percentageValue,
-    segment,
-    isOptimal,
   };
 }
 
 namespace useMeterRoot {
-  export type Segment = 'low' | 'medium' | 'high';
-
   export interface Parameters {
     /**
      * The label for the Indicator component.
@@ -104,22 +72,10 @@ namespace useMeterRoot {
     getAriaLabel: (value: number) => string;
     /**
      * Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the meter indicator.
-     * @param {number} value The component's value to format
+     * @param {number} value The component's numerical value.
      * @returns {string}
      */
     getAriaValueText: (value: number) => string;
-    /**
-     * Sets the lower boundary of the high end of the numeric range represented by the component.
-     * If unspecified, or greater than `max`, it will fall back to `max`.
-     * @default 100
-     */
-    high: number;
-    /**
-     * Sets the upper boundary of the low end of the numeric range represented by the component.
-     * If unspecified, or less than `min`, it will fall back to `min`.
-     * @default 0
-     */
-    low: number;
     /**
      * The maximum value
      * @default 100
@@ -130,10 +86,6 @@ namespace useMeterRoot {
      * @default 0
      */
     min: number;
-    /**
-     * Indicates the optimal point in the numeric range represented by the component.
-     */
-    optimum: number;
     /**
      * The current value.
      */
@@ -160,16 +112,6 @@ namespace useMeterRoot {
      * Value represented as a percentage of the range between `min` and `max`.
      */
     percentageValue: number;
-    /**
-     * Which segment the value falls in, where the segment boundaries are defined
-     * by the `min`, `max`, `high`, `low`, and `optimum` props.
-     */
-    segment: Segment;
-    /**
-     * Whether the value is in the preferred end - higher or lower values - of
-     * the numeric range represented by the component.
-     */
-    isOptimal: boolean;
   }
 }