@atlaskit/rating 3.0.7 → 3.0.8

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/rating
 
+## 3.0.8
+
+### Patch Changes
+
+- [`5e872bdd351ed`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5e872bdd351ed) -
+  Sorted type and interface props to improve Atlaskit docs
+
 ## 3.0.7
 
 ### Patch Changes

package/dist/types/components/rating-group.d.ts

@@ -1,16 +1,12 @@
 export interface RatingGroupProps {
     /**
-     * Callback that is called everytime the rating changes.
-     * Use this in conjunction with `value` for [controlled behaviour](https://reactjs.org/docs/forms.html#controlled-components).
-     */
-    onChange?: (value?: string) => void;
-    /**
-   * Group name for all of the child rating items.
-   * If you have **multiple ratings on the same page make sure to have a unique name** for each group.
+   * Pass in child rating items.
+   * This component expects the markup to be defined in a particular way,
+   * so if you pass extra wrapping markup expect undefined behaviour.
 
-   * Defaults to `"ak--rating-group"`.
+   * You can have any amount of child rating items.
    */
-    groupName?: string;
+    children: JSX.Element | JSX.Element[];
     /**
    * Will set the default checked value for a child radio rating item.
    * Use when wanting to use this in an [uncontrolled way](https://reactjs.org/docs/uncontrolled-components.html).
@@ -19,12 +15,17 @@ export interface RatingGroupProps {
    */
     defaultValue?: string;
     /**
-   * Value that is used to check a child rating item.
-   * Use when wanting to use this in a [controlled way](https://reactjs.org/docs/forms.html#controlled-components).
+   * Group name for all of the child rating items.
+   * If you have **multiple ratings on the same page make sure to have a unique name** for each group.
 
-   * Do not use with `defaultValue`.
+   * Defaults to `"ak--rating-group"`.
    */
-    value?: string;
+    groupName?: string;
+    /**
+     * Callback that is called everytime the rating changes.
+     * Use this in conjunction with `value` for [controlled behaviour](https://reactjs.org/docs/forms.html#controlled-components).
+     */
+    onChange?: (value?: string) => void;
     /**
    A `testId` prop is provided for specified elements,
    which is a unique string that appears as a data attribute `data-testid` in the rendered code,
@@ -37,12 +38,11 @@ export interface RatingGroupProps {
    */
     testId?: string;
     /**
-   * Pass in child rating items.
-   * This component expects the markup to be defined in a particular way,
-   * so if you pass extra wrapping markup expect undefined behaviour.
+   * Value that is used to check a child rating item.
+   * Use when wanting to use this in a [controlled way](https://reactjs.org/docs/forms.html#controlled-components).
 
-   * You can have any amount of child rating items.
+   * Do not use with `defaultValue`.
    */
-    children: JSX.Element | JSX.Element[];
+    value?: string;
 }
 export default function RatingGroup({ groupName, onChange, defaultValue, value, testId, children, }: RatingGroupProps): JSX.Element;

package/dist/types/components/rating.d.ts

@@ -2,6 +2,19 @@ export type RatingRender = (props: {
     isChecked: boolean;
 }) => React.ReactNode;
 export interface RatingProps {
+    /**
+   * Id that is passed to both the label and the radio button element.
+   * This is needed to declare their relationship.
+
+   * When using this with the `<Rating />` component this is handled for you.
+   */
+    id?: string;
+    /**
+   * Sets checked state on the rating item.
+
+   * When using this with the `<Rating />` component this is handled for you.
+   */
+    isChecked?: boolean;
     /**
      * Label for the rating item.
      * This will be read by screen readers as well as used in the tooltip when hovering over the item.
@@ -14,11 +27,13 @@ export interface RatingProps {
    */
     name?: string;
     /**
-   * Sets checked state on the rating item.
+   * Handler that is called back whenever the radio button element changes its checked state.
+   * When checked will be passed the `value` -
+   * when unchecked will be passed `undefined`.
 
    * When using this with the `<Rating />` component this is handled for you.
    */
-    isChecked?: boolean;
+    onChange?: (value?: string) => void;
     /**
    A `testId` prop is provided for specified elements,
    which is a unique string that appears as a data attribute `data-testid` in the rendered code,
@@ -40,21 +55,6 @@ export interface RatingProps {
      * This will be passed back in the `onChange()` handler when checked.
      */
     value: string;
-    /**
-   * Id that is passed to both the label and the radio button element.
-   * This is needed to declare their relationship.
-
-   * When using this with the `<Rating />` component this is handled for you.
-   */
-    id?: string;
-    /**
-   * Handler that is called back whenever the radio button element changes its checked state.
-   * When checked will be passed the `value` -
-   * when unchecked will be passed `undefined`.
-
-   * When using this with the `<Rating />` component this is handled for you.
-   */
-    onChange?: (value?: string) => void;
 }
 export interface InternalRatingProps extends RatingProps {
     /**

package/dist/types/components/star.d.ts

@@ -2,18 +2,18 @@ import React from 'react';
 import { type RatingProps } from './rating';
 export interface StarProps extends RatingProps {
     /**
-   * Size of the star icon.
-
-   * Defaults to `"large"`.
-   */
-    size?: 'small' | 'medium' | 'large' | 'xlarge';
-    /**
    * Color of the star icon,
    * when wanting to customize the color please ensure you use `colors` from `@atlaskit/theme`.
 
    * Defaults to `colors.Y200`.
    */
     color?: string;
+    /**
+   * Size of the star icon.
+
+   * Defaults to `"large"`.
+   */
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
     /**
      * Spacing between the star and the text.
      *

package/dist/types-ts4.5/components/rating-group.d.ts

@@ -1,16 +1,12 @@
 export interface RatingGroupProps {
     /**
-     * Callback that is called everytime the rating changes.
-     * Use this in conjunction with `value` for [controlled behaviour](https://reactjs.org/docs/forms.html#controlled-components).
-     */
-    onChange?: (value?: string) => void;
-    /**
-   * Group name for all of the child rating items.
-   * If you have **multiple ratings on the same page make sure to have a unique name** for each group.
+   * Pass in child rating items.
+   * This component expects the markup to be defined in a particular way,
+   * so if you pass extra wrapping markup expect undefined behaviour.
 
-   * Defaults to `"ak--rating-group"`.
+   * You can have any amount of child rating items.
    */
-    groupName?: string;
+    children: JSX.Element | JSX.Element[];
     /**
    * Will set the default checked value for a child radio rating item.
    * Use when wanting to use this in an [uncontrolled way](https://reactjs.org/docs/uncontrolled-components.html).
@@ -19,12 +15,17 @@ export interface RatingGroupProps {
    */
     defaultValue?: string;
     /**
-   * Value that is used to check a child rating item.
-   * Use when wanting to use this in a [controlled way](https://reactjs.org/docs/forms.html#controlled-components).
+   * Group name for all of the child rating items.
+   * If you have **multiple ratings on the same page make sure to have a unique name** for each group.
 
-   * Do not use with `defaultValue`.
+   * Defaults to `"ak--rating-group"`.
    */
-    value?: string;
+    groupName?: string;
+    /**
+     * Callback that is called everytime the rating changes.
+     * Use this in conjunction with `value` for [controlled behaviour](https://reactjs.org/docs/forms.html#controlled-components).
+     */
+    onChange?: (value?: string) => void;
     /**
    A `testId` prop is provided for specified elements,
    which is a unique string that appears as a data attribute `data-testid` in the rendered code,
@@ -37,12 +38,11 @@ export interface RatingGroupProps {
    */
     testId?: string;
     /**
-   * Pass in child rating items.
-   * This component expects the markup to be defined in a particular way,
-   * so if you pass extra wrapping markup expect undefined behaviour.
+   * Value that is used to check a child rating item.
+   * Use when wanting to use this in a [controlled way](https://reactjs.org/docs/forms.html#controlled-components).
 
-   * You can have any amount of child rating items.
+   * Do not use with `defaultValue`.
    */
-    children: JSX.Element | JSX.Element[];
+    value?: string;
 }
 export default function RatingGroup({ groupName, onChange, defaultValue, value, testId, children, }: RatingGroupProps): JSX.Element;

package/dist/types-ts4.5/components/rating.d.ts

@@ -2,6 +2,19 @@ export type RatingRender = (props: {
     isChecked: boolean;
 }) => React.ReactNode;
 export interface RatingProps {
+    /**
+   * Id that is passed to both the label and the radio button element.
+   * This is needed to declare their relationship.
+
+   * When using this with the `<Rating />` component this is handled for you.
+   */
+    id?: string;
+    /**
+   * Sets checked state on the rating item.
+
+   * When using this with the `<Rating />` component this is handled for you.
+   */
+    isChecked?: boolean;
     /**
      * Label for the rating item.
      * This will be read by screen readers as well as used in the tooltip when hovering over the item.
@@ -14,11 +27,13 @@ export interface RatingProps {
    */
     name?: string;
     /**
-   * Sets checked state on the rating item.
+   * Handler that is called back whenever the radio button element changes its checked state.
+   * When checked will be passed the `value` -
+   * when unchecked will be passed `undefined`.
 
    * When using this with the `<Rating />` component this is handled for you.
    */
-    isChecked?: boolean;
+    onChange?: (value?: string) => void;
     /**
    A `testId` prop is provided for specified elements,
    which is a unique string that appears as a data attribute `data-testid` in the rendered code,
@@ -40,21 +55,6 @@ export interface RatingProps {
      * This will be passed back in the `onChange()` handler when checked.
      */
     value: string;
-    /**
-   * Id that is passed to both the label and the radio button element.
-   * This is needed to declare their relationship.
-
-   * When using this with the `<Rating />` component this is handled for you.
-   */
-    id?: string;
-    /**
-   * Handler that is called back whenever the radio button element changes its checked state.
-   * When checked will be passed the `value` -
-   * when unchecked will be passed `undefined`.
-
-   * When using this with the `<Rating />` component this is handled for you.
-   */
-    onChange?: (value?: string) => void;
 }
 export interface InternalRatingProps extends RatingProps {
     /**

package/dist/types-ts4.5/components/star.d.ts

@@ -2,18 +2,18 @@ import React from 'react';
 import { type RatingProps } from './rating';
 export interface StarProps extends RatingProps {
     /**
-   * Size of the star icon.
-
-   * Defaults to `"large"`.
-   */
-    size?: 'small' | 'medium' | 'large' | 'xlarge';
-    /**
    * Color of the star icon,
    * when wanting to customize the color please ensure you use `colors` from `@atlaskit/theme`.
 
    * Defaults to `colors.Y200`.
    */
     color?: string;
+    /**
+   * Size of the star icon.
+
+   * Defaults to `"large"`.
+   */
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
     /**
      * Spacing between the star and the text.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/rating",
-	"version": "3.0.7",
+	"version": "3.0.8",
 	"description": "An accessible rating component that can be heavily customized.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -45,7 +45,6 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@atlaskit/visual-regression": "workspace:^",
 		"@testing-library/react": "^13.4.0"
 	},
 	"techstack": {