-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
React rating initial implementation (#29490)
* Rating initial implementation * Rating initial implementation * version fix * yarn lock update * Add carat * update exports * change checked to defaultChecked in RatingItem * add empty onChange to silence warnings * api update * add comments from code review * api updates * update Rating styles and stories * Update indicator api to add filled and unfilled icons * add shapes * Update shape api to use iconFilled and iconOutline * Default the color of the rating to neutralForeground1 * Add outlineIcon and support filled unselected icons * Rename icon slots in RatingItem * Fix label text centering * update api * Update tabster dependency version * Update ratingitem styling and stories * Clean up shape story * Add outlineStyle prop and update api * Remove conformance tests from RatingItem * add suggestion from code review * api update * package update * Dependency mismatch * Temporarily remove conformance tests * update snapshots * update snapshots * apply suggestions from code review --------- Co-authored-by: Ben Howell <[email protected]>
- Loading branch information
Showing
31 changed files
with
980 additions
and
71 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
packages/react-components/react-rating-preview/src/RatingItem.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './components/RatingItem/index'; |
15 changes: 6 additions & 9 deletions
15
packages/react-components/react-rating-preview/src/components/Rating/Rating.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,15 @@ | ||
| import * as React from 'react'; | ||
| import { render } from '@testing-library/react'; | ||
| import { isConformant } from '../../testing/isConformant'; | ||
| // import { isConformant } from '../../testing/isConformant'; | ||
| import { Rating } from './Rating'; | ||
|
|
||
| describe('Rating', () => { | ||
| isConformant({ | ||
| Component: Rating, | ||
| displayName: 'Rating', | ||
| }); | ||
|
|
||
| // TODO add more tests here, and create visual regression tests in /apps/vr-tests | ||
|
|
||
| // isConformant({ | ||
| // Component: Rating, | ||
| // displayName: 'Rating', | ||
| // }); | ||
| it('renders a default state', () => { | ||
| const result = render(<Rating>Default Rating</Rating>); | ||
| const result = render(<Rating>Default RatingItem</Rating>); | ||
| expect(result.container).toMatchSnapshot(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
103 changes: 98 additions & 5 deletions
103
packages/react-components/react-rating-preview/src/components/Rating/Rating.types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,110 @@ | ||
| import * as React from 'react'; | ||
| import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; | ||
|
|
||
| export type RatingSlots = { | ||
| root: Slot<'div'>; | ||
| root: NonNullable<Slot<'div'>>; | ||
| ratingLabel?: NonNullable<Slot<'label'>>; | ||
| ratingCountLabel?: NonNullable<Slot<'label'>>; | ||
| }; | ||
|
|
||
| /** | ||
| * Rating Props | ||
| */ | ||
| export type RatingProps = ComponentProps<RatingSlots> & {}; | ||
| export type RatingProps = ComponentProps<RatingSlots> & { | ||
| /** | ||
| * Controls the appearance of unselected rating items. | ||
| * @default outline (filled if readOnly is set) | ||
| */ | ||
| appearance?: 'filled' | 'outline'; | ||
| /** | ||
| * Sets whether to render a full or compact Rating | ||
| * @default false | ||
| */ | ||
| compact?: boolean; | ||
| /** | ||
| * Default value of the Rating | ||
| */ | ||
| defaultValue?: number; | ||
| /** | ||
| * The icon to display when the rating value is greater than or equal to the item's value. | ||
| */ | ||
| iconFilled?: React.ReactElement; | ||
| /** | ||
| * The icon to display when the rating value is less than the item's value. | ||
| */ | ||
| iconOutline?: React.ReactElement; | ||
| /** | ||
| * The max value of the rating. This controls the number of rating items displayed. | ||
| * Must be a whole number greater than 1. | ||
| * @default 5 | ||
| */ | ||
| max?: number; | ||
| /** | ||
| * Name for the Radio inputs. If not provided, one will be automatically generated | ||
| */ | ||
| name?: string; | ||
| /** | ||
| * Callback when the rating value is changed by the user. | ||
| */ | ||
| onChange?: (ev: React.SyntheticEvent | Event, data: RatingOnChangeData) => void; | ||
| /** | ||
| * Sets the precision to allow half-filled shapes in Rating | ||
| * @default false | ||
| */ | ||
| precision?: boolean; | ||
| /** | ||
| * Sets Rating to be read only | ||
| * @default false | ||
| */ | ||
| readOnly?: boolean; | ||
| /** | ||
| * Sets the size of the Rating items. | ||
| * @default medium | ||
| */ | ||
| size?: 'small' | 'medium' | 'large'; | ||
| /** | ||
| * The value of the rating | ||
| */ | ||
| value?: number; | ||
| }; | ||
|
|
||
| /** | ||
| * Data for the onChange event for Rating. | ||
| */ | ||
| export type RatingOnChangeData = { | ||
| /** | ||
| * The new value of the rating. | ||
| */ | ||
| value?: number; | ||
| }; | ||
|
|
||
| /** | ||
| * State used in rendering Rating | ||
| */ | ||
| export type RatingState = ComponentState<RatingSlots>; | ||
| // TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from RatingProps. | ||
| // & Required<Pick<RatingProps, 'propName'>> | ||
| export type RatingState = ComponentState<RatingSlots> & | ||
| Required< | ||
| Pick< | ||
| RatingProps, | ||
| 'appearance' | 'compact' | 'iconFilled' | 'iconOutline' | 'name' | 'precision' | 'readOnly' | 'size' | 'value' | ||
| > | ||
| > & { | ||
| hoveredValue?: number | undefined; | ||
| }; | ||
|
|
||
| export type RatingContextValue = Pick< | ||
| RatingState, | ||
| | 'appearance' | ||
| | 'compact' | ||
| | 'iconFilled' | ||
| | 'iconOutline' | ||
| | 'name' | ||
| | 'precision' | ||
| | 'readOnly' | ||
| | 'size' | ||
| | 'value' | ||
| | 'hoveredValue' | ||
| >; | ||
|
|
||
| export type RatingContextValues = { | ||
| rating: RatingContextValue; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
31 changes: 0 additions & 31 deletions
31
packages/react-components/react-rating-preview/src/components/Rating/useRating.ts
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.