@atlaskit/rating 3.0.7 → 3.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/rating
2
2
 
3
+ ## 3.0.9
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 3.0.8
10
+
11
+ ### Patch Changes
12
+
13
+ - [`5e872bdd351ed`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5e872bdd351ed) -
14
+ Sorted type and interface props to improve Atlaskit docs
15
+
3
16
  ## 3.0.7
4
17
 
5
18
  ### Patch Changes
@@ -1,16 +1,12 @@
1
1
  export interface RatingGroupProps {
2
2
  /**
3
- * Callback that is called everytime the rating changes.
4
- * Use this in conjunction with `value` for [controlled behaviour](https://reactjs.org/docs/forms.html#controlled-components).
5
- */
6
- onChange?: (value?: string) => void;
7
- /**
8
- * Group name for all of the child rating items.
9
- * If you have **multiple ratings on the same page make sure to have a unique name** for each group.
3
+ * Pass in child rating items.
4
+ * This component expects the markup to be defined in a particular way,
5
+ * so if you pass extra wrapping markup expect undefined behaviour.
10
6
 
11
- * Defaults to `"ak--rating-group"`.
7
+ * You can have any amount of child rating items.
12
8
  */
13
- groupName?: string;
9
+ children: JSX.Element | JSX.Element[];
14
10
  /**
15
11
  * Will set the default checked value for a child radio rating item.
16
12
  * Use when wanting to use this in an [uncontrolled way](https://reactjs.org/docs/uncontrolled-components.html).
@@ -19,12 +15,17 @@ export interface RatingGroupProps {
19
15
  */
20
16
  defaultValue?: string;
21
17
  /**
22
- * Value that is used to check a child rating item.
23
- * Use when wanting to use this in a [controlled way](https://reactjs.org/docs/forms.html#controlled-components).
18
+ * Group name for all of the child rating items.
19
+ * If you have **multiple ratings on the same page make sure to have a unique name** for each group.
24
20
 
25
- * Do not use with `defaultValue`.
21
+ * Defaults to `"ak--rating-group"`.
26
22
  */
27
- value?: string;
23
+ groupName?: string;
24
+ /**
25
+ * Callback that is called everytime the rating changes.
26
+ * Use this in conjunction with `value` for [controlled behaviour](https://reactjs.org/docs/forms.html#controlled-components).
27
+ */
28
+ onChange?: (value?: string) => void;
28
29
  /**
29
30
  A `testId` prop is provided for specified elements,
30
31
  which is a unique string that appears as a data attribute `data-testid` in the rendered code,
@@ -37,12 +38,11 @@ export interface RatingGroupProps {
37
38
  */
38
39
  testId?: string;
39
40
  /**
40
- * Pass in child rating items.
41
- * This component expects the markup to be defined in a particular way,
42
- * so if you pass extra wrapping markup expect undefined behaviour.
41
+ * Value that is used to check a child rating item.
42
+ * Use when wanting to use this in a [controlled way](https://reactjs.org/docs/forms.html#controlled-components).
43
43
 
44
- * You can have any amount of child rating items.
44
+ * Do not use with `defaultValue`.
45
45
  */
46
- children: JSX.Element | JSX.Element[];
46
+ value?: string;
47
47
  }
48
48
  export default function RatingGroup({ groupName, onChange, defaultValue, value, testId, children, }: RatingGroupProps): JSX.Element;
@@ -2,6 +2,19 @@ export type RatingRender = (props: {
2
2
  isChecked: boolean;
3
3
  }) => React.ReactNode;
4
4
  export interface RatingProps {
5
+ /**
6
+ * Id that is passed to both the label and the radio button element.
7
+ * This is needed to declare their relationship.
8
+
9
+ * When using this with the `<Rating />` component this is handled for you.
10
+ */
11
+ id?: string;
12
+ /**
13
+ * Sets checked state on the rating item.
14
+
15
+ * When using this with the `<Rating />` component this is handled for you.
16
+ */
17
+ isChecked?: boolean;
5
18
  /**
6
19
  * Label for the rating item.
7
20
  * 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 {
14
27
  */
15
28
  name?: string;
16
29
  /**
17
- * Sets checked state on the rating item.
30
+ * Handler that is called back whenever the radio button element changes its checked state.
31
+ * When checked will be passed the `value` -
32
+ * when unchecked will be passed `undefined`.
18
33
 
19
34
  * When using this with the `<Rating />` component this is handled for you.
20
35
  */
21
- isChecked?: boolean;
36
+ onChange?: (value?: string) => void;
22
37
  /**
23
38
  A `testId` prop is provided for specified elements,
24
39
  which is a unique string that appears as a data attribute `data-testid` in the rendered code,
@@ -40,21 +55,6 @@ export interface RatingProps {
40
55
  * This will be passed back in the `onChange()` handler when checked.
41
56
  */
42
57
  value: string;
43
- /**
44
- * Id that is passed to both the label and the radio button element.
45
- * This is needed to declare their relationship.
46
-
47
- * When using this with the `<Rating />` component this is handled for you.
48
- */
49
- id?: string;
50
- /**
51
- * Handler that is called back whenever the radio button element changes its checked state.
52
- * When checked will be passed the `value` -
53
- * when unchecked will be passed `undefined`.
54
-
55
- * When using this with the `<Rating />` component this is handled for you.
56
- */
57
- onChange?: (value?: string) => void;
58
58
  }
59
59
  export interface InternalRatingProps extends RatingProps {
60
60
  /**
@@ -2,18 +2,18 @@ import React from 'react';
2
2
  import { type RatingProps } from './rating';
3
3
  export interface StarProps extends RatingProps {
4
4
  /**
5
- * Size of the star icon.
6
-
7
- * Defaults to `"large"`.
8
- */
9
- size?: 'small' | 'medium' | 'large' | 'xlarge';
10
- /**
11
5
  * Color of the star icon,
12
6
  * when wanting to customize the color please ensure you use `colors` from `@atlaskit/theme`.
13
7
 
14
8
  * Defaults to `colors.Y200`.
15
9
  */
16
10
  color?: string;
11
+ /**
12
+ * Size of the star icon.
13
+
14
+ * Defaults to `"large"`.
15
+ */
16
+ size?: 'small' | 'medium' | 'large' | 'xlarge';
17
17
  /**
18
18
  * Spacing between the star and the text.
19
19
  *
@@ -1,16 +1,12 @@
1
1
  export interface RatingGroupProps {
2
2
  /**
3
- * Callback that is called everytime the rating changes.
4
- * Use this in conjunction with `value` for [controlled behaviour](https://reactjs.org/docs/forms.html#controlled-components).
5
- */
6
- onChange?: (value?: string) => void;
7
- /**
8
- * Group name for all of the child rating items.
9
- * If you have **multiple ratings on the same page make sure to have a unique name** for each group.
3
+ * Pass in child rating items.
4
+ * This component expects the markup to be defined in a particular way,
5
+ * so if you pass extra wrapping markup expect undefined behaviour.
10
6
 
11
- * Defaults to `"ak--rating-group"`.
7
+ * You can have any amount of child rating items.
12
8
  */
13
- groupName?: string;
9
+ children: JSX.Element | JSX.Element[];
14
10
  /**
15
11
  * Will set the default checked value for a child radio rating item.
16
12
  * Use when wanting to use this in an [uncontrolled way](https://reactjs.org/docs/uncontrolled-components.html).
@@ -19,12 +15,17 @@ export interface RatingGroupProps {
19
15
  */
20
16
  defaultValue?: string;
21
17
  /**
22
- * Value that is used to check a child rating item.
23
- * Use when wanting to use this in a [controlled way](https://reactjs.org/docs/forms.html#controlled-components).
18
+ * Group name for all of the child rating items.
19
+ * If you have **multiple ratings on the same page make sure to have a unique name** for each group.
24
20
 
25
- * Do not use with `defaultValue`.
21
+ * Defaults to `"ak--rating-group"`.
26
22
  */
27
- value?: string;
23
+ groupName?: string;
24
+ /**
25
+ * Callback that is called everytime the rating changes.
26
+ * Use this in conjunction with `value` for [controlled behaviour](https://reactjs.org/docs/forms.html#controlled-components).
27
+ */
28
+ onChange?: (value?: string) => void;
28
29
  /**
29
30
  A `testId` prop is provided for specified elements,
30
31
  which is a unique string that appears as a data attribute `data-testid` in the rendered code,
@@ -37,12 +38,11 @@ export interface RatingGroupProps {
37
38
  */
38
39
  testId?: string;
39
40
  /**
40
- * Pass in child rating items.
41
- * This component expects the markup to be defined in a particular way,
42
- * so if you pass extra wrapping markup expect undefined behaviour.
41
+ * Value that is used to check a child rating item.
42
+ * Use when wanting to use this in a [controlled way](https://reactjs.org/docs/forms.html#controlled-components).
43
43
 
44
- * You can have any amount of child rating items.
44
+ * Do not use with `defaultValue`.
45
45
  */
46
- children: JSX.Element | JSX.Element[];
46
+ value?: string;
47
47
  }
48
48
  export default function RatingGroup({ groupName, onChange, defaultValue, value, testId, children, }: RatingGroupProps): JSX.Element;
@@ -2,6 +2,19 @@ export type RatingRender = (props: {
2
2
  isChecked: boolean;
3
3
  }) => React.ReactNode;
4
4
  export interface RatingProps {
5
+ /**
6
+ * Id that is passed to both the label and the radio button element.
7
+ * This is needed to declare their relationship.
8
+
9
+ * When using this with the `<Rating />` component this is handled for you.
10
+ */
11
+ id?: string;
12
+ /**
13
+ * Sets checked state on the rating item.
14
+
15
+ * When using this with the `<Rating />` component this is handled for you.
16
+ */
17
+ isChecked?: boolean;
5
18
  /**
6
19
  * Label for the rating item.
7
20
  * 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 {
14
27
  */
15
28
  name?: string;
16
29
  /**
17
- * Sets checked state on the rating item.
30
+ * Handler that is called back whenever the radio button element changes its checked state.
31
+ * When checked will be passed the `value` -
32
+ * when unchecked will be passed `undefined`.
18
33
 
19
34
  * When using this with the `<Rating />` component this is handled for you.
20
35
  */
21
- isChecked?: boolean;
36
+ onChange?: (value?: string) => void;
22
37
  /**
23
38
  A `testId` prop is provided for specified elements,
24
39
  which is a unique string that appears as a data attribute `data-testid` in the rendered code,
@@ -40,21 +55,6 @@ export interface RatingProps {
40
55
  * This will be passed back in the `onChange()` handler when checked.
41
56
  */
42
57
  value: string;
43
- /**
44
- * Id that is passed to both the label and the radio button element.
45
- * This is needed to declare their relationship.
46
-
47
- * When using this with the `<Rating />` component this is handled for you.
48
- */
49
- id?: string;
50
- /**
51
- * Handler that is called back whenever the radio button element changes its checked state.
52
- * When checked will be passed the `value` -
53
- * when unchecked will be passed `undefined`.
54
-
55
- * When using this with the `<Rating />` component this is handled for you.
56
- */
57
- onChange?: (value?: string) => void;
58
58
  }
59
59
  export interface InternalRatingProps extends RatingProps {
60
60
  /**
@@ -2,18 +2,18 @@ import React from 'react';
2
2
  import { type RatingProps } from './rating';
3
3
  export interface StarProps extends RatingProps {
4
4
  /**
5
- * Size of the star icon.
6
-
7
- * Defaults to `"large"`.
8
- */
9
- size?: 'small' | 'medium' | 'large' | 'xlarge';
10
- /**
11
5
  * Color of the star icon,
12
6
  * when wanting to customize the color please ensure you use `colors` from `@atlaskit/theme`.
13
7
 
14
8
  * Defaults to `colors.Y200`.
15
9
  */
16
10
  color?: string;
11
+ /**
12
+ * Size of the star icon.
13
+
14
+ * Defaults to `"large"`.
15
+ */
16
+ size?: 'small' | 'medium' | 'large' | 'xlarge';
17
17
  /**
18
18
  * Spacing between the star and the text.
19
19
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/rating",
3
- "version": "3.0.7",
3
+ "version": "3.0.9",
4
4
  "description": "An accessible rating component that can be heavily customized.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -31,10 +31,10 @@
31
31
  }
32
32
  },
33
33
  "dependencies": {
34
- "@atlaskit/icon": "^28.0.0",
34
+ "@atlaskit/icon": "^28.1.0",
35
35
  "@atlaskit/motion": "^5.3.0",
36
- "@atlaskit/theme": "^19.0.0",
37
- "@atlaskit/tokens": "^6.0.0",
36
+ "@atlaskit/theme": "^20.0.0",
37
+ "@atlaskit/tokens": "^6.1.0",
38
38
  "@atlaskit/tooltip": "^20.4.0",
39
39
  "@atlaskit/visually-hidden": "^3.0.0",
40
40
  "@babel/runtime": "^7.0.0",
@@ -45,7 +45,6 @@
45
45
  "react-dom": "^18.2.0"
46
46
  },
47
47
  "devDependencies": {
48
- "@atlaskit/visual-regression": "workspace:^",
49
48
  "@testing-library/react": "^13.4.0"
50
49
  },
51
50
  "techstack": {
@@ -62,8 +61,5 @@
62
61
  ]
63
62
  }
64
63
  },
65
- "homepage": "https://atlaskit.atlassian.com/packages/design-system/rating",
66
- "af:exports": {
67
- ".": "./src/index.tsx"
68
- }
64
+ "homepage": "https://atlaskit.atlassian.com/packages/design-system/rating"
69
65
  }