From 5f51307057ddd8b13335b97b4da3634ca1eb149a Mon Sep 17 00:00:00 2001 From: Shubhdeep Chhabra Date: Sun, 20 Oct 2024 15:46:34 +0530 Subject: [PATCH] fixed re-exports of Meter in Progress --- packages/core/src/meter/meter-root.tsx | 28 ++++++++++----- packages/core/src/progress/progress-fill.tsx | 21 +++++++----- packages/core/src/progress/progress-label.tsx | 17 +++++----- packages/core/src/progress/progress-root.tsx | 34 +++++++++---------- packages/core/src/progress/progress-track.tsx | 17 +++++----- .../src/progress/progress-value-label.tsx | 23 +++++++------ 6 files changed, 79 insertions(+), 61 deletions(-) diff --git a/packages/core/src/meter/meter-root.tsx b/packages/core/src/meter/meter-root.tsx index b06a2f25..8b64d7d8 100644 --- a/packages/core/src/meter/meter-root.tsx +++ b/packages/core/src/meter/meter-root.tsx @@ -62,12 +62,7 @@ export interface MeterRootOptions { export interface MeterRootCommonProps { id: string; -} - -export interface MeterRootRenderProps - extends MeterRootCommonProps, - MeterDataSet { - role: "meter"; + role: string; "aria-valuenow": number | undefined; "aria-valuemin": number; "aria-valuemax": number; @@ -75,6 +70,10 @@ export interface MeterRootRenderProps "aria-labelledby": string | undefined; } +export interface MeterRootRenderProps + extends MeterRootCommonProps, + MeterDataSet {} + export type MeterRootProps< T extends ValidComponent | HTMLElement = HTMLElement, > = MeterRootOptions & Partial>>; @@ -93,6 +92,8 @@ export function MeterRoot( value: 0, minValue: 0, maxValue: 100, + role: "meter", + indeterminate: false, }, props as MeterRootProps, ); @@ -102,6 +103,13 @@ export function MeterRoot( "minValue", "maxValue", "getValueLabel", + "role", + "aria-valuetext", + "aria-labelledby", + "aria-valuemax", + "aria-valuemin", + "aria-valuenow", + "indeterminate", ]); const [labelId, setLabelId] = createSignal(); @@ -117,6 +125,9 @@ export function MeterRoot( }; const valueLabel = () => { + if (local.indeterminate) { + return undefined; + } if (local.getValueLabel) { return local.getValueLabel({ value: value(), @@ -150,12 +161,13 @@ export function MeterRoot( as="div" - role="meter" - aria-valuenow={value()} + role={local.role || "meter"} + aria-valuenow={local.indeterminate ? undefined : value()} aria-valuemin={local.minValue} aria-valuemax={local.maxValue} aria-valuetext={valueLabel()} aria-labelledby={labelId()} + {...dataset()} {...others} /> diff --git a/packages/core/src/progress/progress-fill.tsx b/packages/core/src/progress/progress-fill.tsx index b7e0da98..a7be4a2b 100644 --- a/packages/core/src/progress/progress-fill.tsx +++ b/packages/core/src/progress/progress-fill.tsx @@ -1,14 +1,18 @@ -import { type JSX, type ValidComponent, splitProps } from "solid-js"; +import { + type Component, + type ValidComponent, + splitProps, +} from "solid-js"; import { combineStyle } from "@solid-primitives/props"; -import type { - MeterFillCommonProps, - MeterFillOptions, - MeterFillRenderProps, +import { + Meter, + type MeterFillCommonProps, + type MeterFillOptions, + type MeterFillRenderProps, } from "../meter"; import { type ElementOf, - Polymorphic, type PolymorphicProps, } from "../polymorphic"; import { type ProgressDataSet, useProgressContext } from "./progress-context"; @@ -39,8 +43,9 @@ export function ProgressFill( const [local, others] = splitProps(props as ProgressFillProps, ["style"]); return ( - - as="div" + > + > style={combineStyle( { "--kb-progress-fill-width": context.progressFillWidth(), diff --git a/packages/core/src/progress/progress-label.tsx b/packages/core/src/progress/progress-label.tsx index 11ced295..22ed6925 100644 --- a/packages/core/src/progress/progress-label.tsx +++ b/packages/core/src/progress/progress-label.tsx @@ -1,19 +1,20 @@ import { mergeDefaultProps } from "@kobalte/utils"; import { + type Component, type ValidComponent, createEffect, onCleanup, splitProps, } from "solid-js"; -import type { - MeterLabelCommonProps, - MeterLabelOptions, - MeterLabelRenderProps, +import { + Meter, + type MeterLabelCommonProps, + type MeterLabelOptions, + type MeterLabelRenderProps, } from "../meter"; import { type ElementOf, - Polymorphic, type PolymorphicProps, } from "../polymorphic"; import { type ProgressDataSet, useProgressContext } from "./progress-context"; @@ -46,14 +47,14 @@ export function ProgressLabel( }, props as ProgressLabelProps, ); - const [local, others] = splitProps(mergedProps, ["id"]); createEffect(() => onCleanup(context.registerLabelId(local.id))); return ( - - as="span" + > + > id={local.id} {...context.dataset()} {...others} diff --git a/packages/core/src/progress/progress-root.tsx b/packages/core/src/progress/progress-root.tsx index 127e7994..dabae833 100644 --- a/packages/core/src/progress/progress-root.tsx +++ b/packages/core/src/progress/progress-root.tsx @@ -9,6 +9,7 @@ import { clamp, createGenerateId, mergeDefaultProps } from "@kobalte/utils"; import { type Accessor, + type Component, type ValidComponent, createMemo, createSignal, @@ -17,14 +18,14 @@ import { } from "solid-js"; import { createNumberFormatter } from "../i18n"; -import type { - MeterRootCommonProps, - MeterRootOptions, - MeterRootRenderProps, +import { + Meter, + type MeterRootCommonProps, + type MeterRootOptions, + type MeterRootRenderProps, } from "../meter"; import { type ElementOf, - Polymorphic, type PolymorphicProps, } from "../polymorphic"; import { createRegisterId } from "../primitives"; @@ -34,7 +35,8 @@ import { type ProgressDataSet, } from "./progress-context"; -export interface ProgressRootOptions extends MeterRootOptions { +export interface ProgressRootOptions + extends Omit { /** Whether the progress is in an indeterminate state. */ indeterminate?: boolean; } @@ -43,12 +45,11 @@ export interface ProgressRootCommonProps extends MeterRootCommonProps {} export interface ProgressRootRenderProps - extends ProgressRootCommonProps, - ProgressDataSet, - Omit { + extends Omit, + ProgressRootCommonProps, + ProgressDataSet { role: "progressbar"; } - export type ProgressRootProps< T extends ValidComponent | HTMLElement = HTMLElement, > = ProgressRootOptions & Partial>>; @@ -139,16 +140,13 @@ export function ProgressRoot( return ( - - as="div" + > + > role="progressbar" - aria-valuenow={local.indeterminate ? undefined : value()} - aria-valuemin={local.minValue} - aria-valuemax={local.maxValue} - aria-valuetext={valueLabel()} - aria-labelledby={labelId()} + indeterminate={local.indeterminate || false} {...dataset()} - {...others} + {...mergedProps} /> ); diff --git a/packages/core/src/progress/progress-track.tsx b/packages/core/src/progress/progress-track.tsx index 21e9bce1..bc3b2f6a 100644 --- a/packages/core/src/progress/progress-track.tsx +++ b/packages/core/src/progress/progress-track.tsx @@ -1,12 +1,12 @@ -import type { ValidComponent } from "solid-js"; -import type { - MeterTrackCommonProps, - MeterTrackOptions, - MeterTrackRenderProps, +import type { Component, ValidComponent } from "solid-js"; +import { + Meter, + type MeterTrackCommonProps, + type MeterTrackOptions, + type MeterTrackRenderProps, } from "../meter"; import { type ElementOf, - Polymorphic, type PolymorphicProps, } from "../polymorphic"; import { type ProgressDataSet, useProgressContext } from "./progress-context"; @@ -35,8 +35,9 @@ export function ProgressTrack( const context = useProgressContext(); return ( - - as="div" + > + > {...context.dataset()} {...(props as ProgressTrackProps)} /> diff --git a/packages/core/src/progress/progress-value-label.tsx b/packages/core/src/progress/progress-value-label.tsx index 1304086b..e4b43613 100644 --- a/packages/core/src/progress/progress-value-label.tsx +++ b/packages/core/src/progress/progress-value-label.tsx @@ -1,13 +1,13 @@ -import type { JSX, ValidComponent } from "solid-js"; +import type { Component, ValidComponent } from "solid-js"; -import type { - MeterValueLabelCommonProps, - MeterValueLabelOptions, - MeterValueLabelRenderProps, +import { + Meter, + type MeterValueLabelCommonProps, + type MeterValueLabelOptions, + type MeterValueLabelRenderProps, } from "../meter"; import { type ElementOf, - Polymorphic, type PolymorphicProps, } from "../polymorphic"; import { type ProgressDataSet, useProgressContext } from "./progress-context"; @@ -37,12 +37,13 @@ export function ProgressValueLabel( const context = useProgressContext(); return ( - - as="div" + + > + > {...context.dataset()} {...(props as ProgressValueLabelProps)} - > - {context.valueLabel()} - + /> ); }