From 546f78f1245c3082d72043b6be9e07a4de71420f Mon Sep 17 00:00:00 2001 From: HBS999 Date: Mon, 4 Nov 2024 15:59:07 +0300 Subject: [PATCH] chore: format --- .../docs/core/components/rating-group.mdx | 171 +++++++++--------- 1 file changed, 85 insertions(+), 86 deletions(-) diff --git a/apps/docs/src/routes/docs/core/components/rating-group.mdx b/apps/docs/src/routes/docs/core/components/rating-group.mdx index 20b4b80f..cbb90573 100644 --- a/apps/docs/src/routes/docs/core/components/rating-group.mdx +++ b/apps/docs/src/routes/docs/core/components/rating-group.mdx @@ -3,7 +3,7 @@ import { BasicExample, DefaultValueExample, ControlledExample, - HalfRatingsExample, + HalfRatingsExample, DescriptionExample, ErrorMessageExample, HTMLFormExample, @@ -81,19 +81,19 @@ The rating item consists of: function App() { return ( - Rate Us: - - - {_ => ( - - - - - - )} - - - + Rate Us: + + + {_ => ( + + + + + + )} + + + ); } ``` @@ -107,40 +107,41 @@ The rating item consists of: gap: 8px; } -.rating-group__label { - color: hsl(240 6% 10%); - font-size: 14px; - font-weight: 500; - user-select: none; +.rating-group\_\_label { +color: hsl(240 6% 10%); +font-size: 14px; +font-weight: 500; +user-select: none; } -.rating-group__description { - color: hsl(240 5% 26%); - font-size: 12px; - user-select: none; +.rating-group\_\_description { +color: hsl(240 5% 26%); +font-size: 12px; +user-select: none; } -.rating-group__error-message { - color: hsl(0 72% 51%); - font-size: 12px; - user-select: none; +.rating-group\_\_error-message { +color: hsl(0 72% 51%); +font-size: 12px; +user-select: none; } -.rating-group__control { - display: flex; - gap: 4px; +.rating-group\_\_control { +display: flex; +gap: 4px; } .rating-group-item { - cursor: pointer; - fill: hsl(240 6% 90%); - transition: fill 200ms cubic-bezier(0.2, 0, 0, 1); +cursor: pointer; +fill: hsl(240 6% 90%); +transition: fill 200ms cubic-bezier(0.2, 0, 0, 1); } .rating-group-item[data-highlighted] { - fill: hsl(200 98% 39%); +fill: hsl(200 98% 39%); } -``` + +```` {/* */} @@ -170,7 +171,7 @@ An initial, uncontrolled value can be provided using the `defaultValue` prop. -``` +```` ### Controlled value @@ -255,7 +256,7 @@ The `RatingGroup.Description` component can be used to associate additional help )} - Rate your experience with us. + Rate your experience with us. ``` @@ -293,9 +294,7 @@ function ErrorMessageExample() { )} - - Please select a rating between 1 and 5. - + Please select a rating between 1 and 5. ); } @@ -329,7 +328,7 @@ function HTMLFormExample() { )} - +
@@ -346,26 +345,26 @@ function HTMLFormExample() { `RatingGroup` is equivalent to the `Root` import from `@kobalte/core/Rating-group`. -| Prop | Description | -| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| value | `number`
The current rating value. | -| defaultValue | `number`
The initial value of the rating group when it is first rendered. Use when you do not need to control the state of the rating group.| -| onChange | `(value: number) => void`
Event handler called when the value changes. | -| allowHalf | `boolean`
Whether to allow half ratings. | -| orientation | `'horizontal' \| 'vertical'`
The axis the rating group items should align with. | -| name | `string`
The name of the rating group. Submitted with its owning form as part of a name/value pair. | -| validationState | `'valid' \| 'invalid'`
Whether the rating group should display its "valid" or "invalid" visual styling. | -| required | `boolean`
Whether the user must select an item before the owning form can be submitted. | -| disabled | `boolean`
Whether the rating group is disabled. | -| readOnly | `boolean`
Whether the rating group items can be selected but not changed by the user. | - -| Data attribute | Description | -| :------------- | :------------------------------------------------------------------------------------------- | -| data-valid | Present when the rating group is valid according to the validation rules. | -| data-invalid | Present when the rating group is invalid according to the validation rules. | +| Prop | Description | +| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | +| value | `number`
The current rating value. | +| defaultValue | `number`
The initial value of the rating group when it is first rendered. Use when you do not need to control the state of the rating group. | +| onChange | `(value: number) => void`
Event handler called when the value changes. | +| allowHalf | `boolean`
Whether to allow half ratings. | +| orientation | `'horizontal' \| 'vertical'`
The axis the rating group items should align with. | +| name | `string`
The name of the rating group. Submitted with its owning form as part of a name/value pair. | +| validationState | `'valid' \| 'invalid'`
Whether the rating group should display its "valid" or "invalid" visual styling. | +| required | `boolean`
Whether the user must select an item before the owning form can be submitted. | +| disabled | `boolean`
Whether the rating group is disabled. | +| readOnly | `boolean`
Whether the rating group items can be selected but not changed by the user. | + +| Data attribute | Description | +| :------------- | :--------------------------------------------------------------------------------------------- | +| data-valid | Present when the rating group is valid according to the validation rules. | +| data-invalid | Present when the rating group is invalid according to the validation rules. | | data-required | Present when the user must select a rating group item before the owning form can be submitted. | -| data-disabled | Present when the rating group is disabled. | -| data-readonly | Present when the rating group is read only. | +| data-disabled | Present when the rating group is disabled. | +| data-readonly | Present when the rating group is read only. | `RatingGroup.Label`, `RatingGroup.Description` and `RatingGroup.ErrorMesssage` shares the same data-attributes. @@ -377,28 +376,28 @@ function HTMLFormExample() { ### RatingGroup.ItemControl -| Render Prop | Description | -| :-------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| half | `Accessor`
Whether the rating item is half. -| highlighted | `Accessor`
Whether the rating item is highlighted. | - -| Data attribute | Description | -| :------------- | :-------------------------------------------------------------------------------- | -| data-valid | Present when the parent rating group is valid according to the validation rules. | -| data-invalid | Present when the parent rating group is invalid according to the validation rules. | -| data-required | Present when the parent rating group is required. | -| data-disabled | Present when the parent rating group is disabled. | -| data-readonly | Present when the parent rating group is read only. | -| data-checked | Present when the rating is checked. | -| data-half | Present when the rating is half. | -| data-highlighted | Present when the rating is highlighted. | +| Render Prop | Description | +| :---------- | :---------------------------------------------------------------- | +| half | `Accessor`
Whether the rating item is half. | +| highlighted | `Accessor`
Whether the rating item is highlighted. | + +| Data attribute | Description | +| :--------------- | :--------------------------------------------------------------------------------- | +| data-valid | Present when the parent rating group is valid according to the validation rules. | +| data-invalid | Present when the parent rating group is invalid according to the validation rules. | +| data-required | Present when the parent rating group is required. | +| data-disabled | Present when the parent rating group is disabled. | +| data-readonly | Present when the parent rating group is read only. | +| data-checked | Present when the rating is checked. | +| data-half | Present when the rating is half. | +| data-highlighted | Present when the rating is highlighted. | `RatingGroup.ItemLabel` and `RatingGroup.ItemDescription` share the same data-attributes. ## Rendered elements -| Component | Default rendered element | -| :--------------------------- | :----------------------- | +| Component | Default rendered element | +| :---------------------------- | :----------------------- | | `RatingGroup` | `div` | | `RatingGroup.Control` | `div` | | `RatingGroup.Label` | `span` | @@ -414,12 +413,12 @@ function HTMLFormExample() { ### Keyboard Interactions -| Key | Description | -| :-------------------- | :------------------------------------------------------------------------------------- | -| ArrowDown | Moves focus to the next item, increasing the rating value based on the `allowHalf` property. | -| ArrowRight | Moves focus to the next item, increasing the rating value based on the `allowHalf` property. | -| ArrowUp | Moves focus to the previous item, decreasing the rating value based on the `allowHalf` property. | -| ArrowLeft | Moves focus to the previous item, decreasing the rating value based on the `allowHalf` property. | -| Space | Selects the focused item in the rating group. | -| Home | Sets the value of the rating group to 1. | -| End | Sets the value of the rating group to the maximum value. | +| Key | Description | +| :-------------------- | :----------------------------------------------------------------------------------------------- | +| ArrowDown | Moves focus to the next item, increasing the rating value based on the `allowHalf` property. | +| ArrowRight | Moves focus to the next item, increasing the rating value based on the `allowHalf` property. | +| ArrowUp | Moves focus to the previous item, decreasing the rating value based on the `allowHalf` property. | +| ArrowLeft | Moves focus to the previous item, decreasing the rating value based on the `allowHalf` property. | +| Space | Selects the focused item in the rating group. | +| Home | Sets the value of the rating group to 1. | +| End | Sets the value of the rating group to the maximum value. |