From 81dc5cafb398bc472bb80a0588b71da1eb64eeda Mon Sep 17 00:00:00 2001 From: Artur Santiago Date: Wed, 22 Jan 2025 22:28:28 -0300 Subject: [PATCH 01/10] feat: adjust color for actionable rating --- .../components/molecules/Rating/styles.scss | 49 ++++++++++++------- 1 file changed, 30 insertions(+), 19 deletions(-) diff --git a/packages/ui/src/components/molecules/Rating/styles.scss b/packages/ui/src/components/molecules/Rating/styles.scss index 0c48653082..cc486b8fb5 100644 --- a/packages/ui/src/components/molecules/Rating/styles.scss +++ b/packages/ui/src/components/molecules/Rating/styles.scss @@ -4,22 +4,23 @@ // -------------------------------------------------------- // Default properties - --fs-rating-gap : var(--fs-spacing-0); - --fs-rating-color : var(--fs-color-text); + --fs-rating-gap: var(--fs-spacing-0); + --fs-rating-color: var(--fs-color-text); // Icon - --fs-rating-icon-width : var(--fs-spacing-3); - --fs-rating-icon-height : var(--fs-rating-icon-width); + --fs-rating-icon-width: var(--fs-spacing-3); + --fs-rating-icon-height: var(--fs-rating-icon-width); // Actionable - --fs-rating-actionable-gap : 0; - --fs-rating-actionable-icon-width : var(--fs-rating-icon-width); - --fs-rating-actionable-icon-height : var(--fs-rating-actionable-icon-width); + --fs-rating-actionable-gap: 0; + --fs-rating-actionable-icon-width: var(--fs-rating-icon-width); + --fs-rating-actionable-icon-height: var(--fs-rating-actionable-icon-width); + --fs-rating-actionable-color: var(--fs-color-neutral-4); + --fs-rating-actionable-color-selected: var(--fs-color-main-2); // -------------------------------------------------------- // Structural Styles // -------------------------------------------------------- - display: flex; [data-fs-icon] { @@ -30,9 +31,11 @@ [data-fs-rating-button] { color: unset; - &[data-fs-button-variant=tertiary]:hover, - &[data-fs-button-variant=tertiary]:focus, - &[data-fs-button-variant=tertiary]:active { color: unset; } + &[data-fs-button-variant='tertiary']:hover, + &[data-fs-button-variant='tertiary']:focus, + &[data-fs-button-variant='tertiary']:active { + color: unset; + } } [data-fs-rating-icon-wrapper] { @@ -42,34 +45,42 @@ overflow: hidden; } - svg[data-fs-rating-icon-outline] { - fill: none; + svg[data-fs-rating-icon-outline] { + fill: none; } - [data-fs-rating-item] { position: relative; } + [data-fs-rating-item] { + position: relative; + } // -------------------------------------------------------- // Variants Styles // -------------------------------------------------------- - [data-fs-rating-item="empty"] svg[data-fs-icon] { + [data-fs-rating-item='empty'] svg[data-fs-icon] { fill: none; } - [data-fs-rating-item="partial"] [data-fs-rating-icon-wrapper] { + [data-fs-rating-item='partial'] [data-fs-rating-icon-wrapper] { width: calc(var(--fs-rating-icon-width) / 2); } - &:not([data-fs-rating-actionable="true"]) { + &:not([data-fs-rating-actionable='true']) { column-gap: var(--fs-rating-gap); } - &[data-fs-rating-actionable="true"] { + &[data-fs-rating-actionable='true'] { column-gap: var(--fs-rating-actionable-gap); + + [data-fs-rating-item='full'] svg[data-fs-icon] { + color: var(--fs-rating-actionable-color-selected); + fill: var(--fs-rating-actionable-color-selected); + } + [data-fs-icon] { + color: var(--fs-rating-actionable-color); width: var(--fs-rating-actionable-icon-width); height: var(--fs-rating-actionable-icon-height); } } - } From a400c126dccfe3fd902776c41932f5c8c8e4cf75 Mon Sep 17 00:00:00 2001 From: Artur Santiago Date: Wed, 22 Jan 2025 23:19:06 -0300 Subject: [PATCH 02/10] feat: add disable rating styles --- packages/components/src/molecules/Rating/Rating.tsx | 6 ++++++ packages/ui/src/components/molecules/Rating/styles.scss | 7 +++++++ 2 files changed, 13 insertions(+) diff --git a/packages/components/src/molecules/Rating/Rating.tsx b/packages/components/src/molecules/Rating/Rating.tsx index d818afbfa0..359a20c525 100644 --- a/packages/components/src/molecules/Rating/Rating.tsx +++ b/packages/components/src/molecules/Rating/Rating.tsx @@ -30,6 +30,10 @@ export interface RatingProps * Function to be triggered when Rating option change. This should only be used if you and an actionable rating list. */ onChange?: (value: number) => void + /** + * Specifies that the actionable rating should be disabled. + */ + disabled?: boolean } export interface RatingItemProps { @@ -45,6 +49,7 @@ const Rating = forwardRef(function Rating( value = 0, icon, onChange, + disabled, ...otherProps }, ref @@ -94,6 +99,7 @@ const Rating = forwardRef(function Rating( }} onMouseEnter={() => setHover(tempIndex)} onMouseLeave={() => setHover(value)} + disabled={disabled} /> ) : ( <> diff --git a/packages/ui/src/components/molecules/Rating/styles.scss b/packages/ui/src/components/molecules/Rating/styles.scss index cc486b8fb5..d83ef1438b 100644 --- a/packages/ui/src/components/molecules/Rating/styles.scss +++ b/packages/ui/src/components/molecules/Rating/styles.scss @@ -30,6 +30,13 @@ } [data-fs-rating-button] { + &[disabled] { + [data-fs-button-wrapper] { + background: transparent !important; + opacity: 0.5; + } + } + color: unset; &[data-fs-button-variant='tertiary']:hover, &[data-fs-button-variant='tertiary']:focus, From fae817528841627fc20704e80b229f431e5c8c76 Mon Sep 17 00:00:00 2001 From: Artur Santiago Date: Wed, 22 Jan 2025 23:21:30 -0300 Subject: [PATCH 03/10] feat: create RatingField component --- packages/components/src/index.ts | 2 + .../src/molecules/RatingField/RatingField.tsx | 71 +++++++++++++++++++ .../src/molecules/RatingField/index.ts | 2 + .../molecules/RatingField/styles.scss | 44 ++++++++++++ 4 files changed, 119 insertions(+) create mode 100644 packages/components/src/molecules/RatingField/RatingField.tsx create mode 100644 packages/components/src/molecules/RatingField/index.ts create mode 100644 packages/ui/src/components/molecules/RatingField/styles.scss diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 3dde605808..fcae5e5602 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -142,6 +142,8 @@ export { default as RadioGroup, RadioOption } from './molecules/RadioGroup' export type { RadioGroupProps, RadioOptionProps } from './molecules/RadioGroup' export { default as Rating } from './molecules/Rating' export type { RatingProps } from './molecules/Rating' +export { default as RatingField } from './molecules/RatingField' +export type { RatingFieldProps } from './molecules/RatingField' export { default as RegionBar } from './molecules/RegionBar' export type { RegionBarProps } from './molecules/RegionBar' diff --git a/packages/components/src/molecules/RatingField/RatingField.tsx b/packages/components/src/molecules/RatingField/RatingField.tsx new file mode 100644 index 0000000000..6ff40d9a6f --- /dev/null +++ b/packages/components/src/molecules/RatingField/RatingField.tsx @@ -0,0 +1,71 @@ +import React from 'react' +import type { MutableRefObject } from 'react' +import { Label, Rating, RatingProps } from '../..' + +interface DefaultProps { + /** + * ID to find this component in testing tools (e.g.: cypress, testing library, and jest). + */ + testId?: string + /** + * ID to identify input and corresponding label. + */ + id: string + /** + * The text displayed to identify the input rating. + */ + label: string + /** + * The error message displayed when an error occurs. + */ + error?: string + /** + * Component's ref. + */ + ratingRef?: MutableRefObject +} + +export type RatingFieldProps = DefaultProps & RatingProps + +const RatingField = ({ + id, + label, + error, + disabled, + length = 5, + value = 0, + onChange, + ratingRef, + testId = 'fs-rating-field', + ...otherProps +}: RatingFieldProps) => { + const shouldDisplayError = !disabled && error && error !== '' + + return ( +
+ + + {shouldDisplayError && ( + {error} + )} +
+ ) +} + +export default RatingField diff --git a/packages/components/src/molecules/RatingField/index.ts b/packages/components/src/molecules/RatingField/index.ts new file mode 100644 index 0000000000..06749f3abe --- /dev/null +++ b/packages/components/src/molecules/RatingField/index.ts @@ -0,0 +1,2 @@ +export { default } from './RatingField' +export type { RatingFieldProps } from './RatingField' diff --git a/packages/ui/src/components/molecules/RatingField/styles.scss b/packages/ui/src/components/molecules/RatingField/styles.scss new file mode 100644 index 0000000000..a0d4299c68 --- /dev/null +++ b/packages/ui/src/components/molecules/RatingField/styles.scss @@ -0,0 +1,44 @@ +[data-fs-rating-field] { + // -------------------------------------------------------- + // Design Tokens for RatingField + // -------------------------------------------------------- + + // Label + --fs-rating-field-label-color: var(--fs-color-text-light); + --fs-rating-field-label-size: var(--fs-text-size-2); + --fs-rating-field-label-line-height: var(--fs-text-size-4); + + // Error + --fs-rating-field-error-message-size: var(--fs-text-size-legend); + --fs-rating-field-error-message-line-height: 1.1; + --fs-rating-field-error-message-color: var(--fs-color-danger-text); + + // -------------------------------------------------------- + // Structural Styles + // -------------------------------------------------------- + display: flex; + flex-direction: column; + + [data-fs-rating-field-label] { + font-size: var(--fs-rating-field-label-size); + line-height: var(--fs-rating-field-label-line-height); + color: var(--fs-rating-field-label-color); + } + + [data-fs-rating-field-error-message] { + font-size: var(--fs-rating-field-error-message-size); + line-height: var(--fs-rating-field-error-message-line-height); + color: var(--fs-rating-field-error-message-color); + } + + // -------------------------------------------------------- + // Variants Styles + // -------------------------------------------------------- + &[data-fs-rating-field-error='true'] { + [data-fs-rating] { + [data-fs-rating-item='empty'] svg { + color: var(--fs-rating-field-error-message-color); + } + } + } +} From 76a6a232f417f2cee63831cabffb189032d7e449 Mon Sep 17 00:00:00 2001 From: Artur Santiago Date: Tue, 28 Jan 2025 09:15:51 -0300 Subject: [PATCH 04/10] feat: change rating component colors --- packages/ui/src/components/molecules/Rating/styles.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/components/molecules/Rating/styles.scss b/packages/ui/src/components/molecules/Rating/styles.scss index d83ef1438b..32e4f4c628 100644 --- a/packages/ui/src/components/molecules/Rating/styles.scss +++ b/packages/ui/src/components/molecules/Rating/styles.scss @@ -5,7 +5,8 @@ // Default properties --fs-rating-gap: var(--fs-spacing-0); - --fs-rating-color: var(--fs-color-text); + --fs-rating-color: var(--fs-color-main-2); + --fs-rating-color-empty: var(--fs-color-neutral-4); // Icon --fs-rating-icon-width: var(--fs-spacing-3); @@ -15,8 +16,8 @@ --fs-rating-actionable-gap: 0; --fs-rating-actionable-icon-width: var(--fs-rating-icon-width); --fs-rating-actionable-icon-height: var(--fs-rating-actionable-icon-width); - --fs-rating-actionable-color: var(--fs-color-neutral-4); - --fs-rating-actionable-color-selected: var(--fs-color-main-2); + --fs-rating-actionable-color: var(--fs-rating-color-empty); + --fs-rating-actionable-color-selected: var(--fs-rating-color); // -------------------------------------------------------- // Structural Styles @@ -58,6 +59,7 @@ [data-fs-rating-item] { position: relative; + fill: var(--fs-rating-color); } // -------------------------------------------------------- @@ -65,6 +67,7 @@ // -------------------------------------------------------- [data-fs-rating-item='empty'] svg[data-fs-icon] { + color: var(--fs-rating-color-empty); fill: none; } From fee26d86b9b774c9108dabf3942f04fed4c6a8aa Mon Sep 17 00:00:00 2001 From: Artur Santiago Date: Tue, 4 Feb 2025 17:09:05 -0300 Subject: [PATCH 05/10] feat(RatingField): use data attribute instead of svg tag --- .../src/components/molecules/RatingField/styles.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/components/molecules/RatingField/styles.scss b/packages/ui/src/components/molecules/RatingField/styles.scss index a0d4299c68..9cbb811976 100644 --- a/packages/ui/src/components/molecules/RatingField/styles.scss +++ b/packages/ui/src/components/molecules/RatingField/styles.scss @@ -1,6 +1,6 @@ [data-fs-rating-field] { // -------------------------------------------------------- - // Design Tokens for RatingField + // Design Tokens for Rating Field // -------------------------------------------------------- // Label @@ -34,11 +34,9 @@ // -------------------------------------------------------- // Variants Styles // -------------------------------------------------------- - &[data-fs-rating-field-error='true'] { - [data-fs-rating] { - [data-fs-rating-item='empty'] svg { - color: var(--fs-rating-field-error-message-color); - } + &[data-fs-rating-field-error="true"] { + [data-fs-rating-item="empty"] [data-fs-icon] { + color: var(--fs-rating-field-error-message-color); } } } From 7ba8bf95201153f9e1f57aa12c97b5869b1b9c1e Mon Sep 17 00:00:00 2001 From: Artur Santiago Date: Tue, 4 Feb 2025 17:10:11 -0300 Subject: [PATCH 06/10] styles: biome fix --- packages/components/src/molecules/RatingField/RatingField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/molecules/RatingField/RatingField.tsx b/packages/components/src/molecules/RatingField/RatingField.tsx index 6ff40d9a6f..0d2e5a8ed5 100644 --- a/packages/components/src/molecules/RatingField/RatingField.tsx +++ b/packages/components/src/molecules/RatingField/RatingField.tsx @@ -1,6 +1,6 @@ import React from 'react' import type { MutableRefObject } from 'react' -import { Label, Rating, RatingProps } from '../..' +import { Label, Rating, type RatingProps } from '../..' interface DefaultProps { /** From a36142925042f550310fad23bd894df63b439a8c Mon Sep 17 00:00:00 2001 From: Artur Santiago Date: Thu, 6 Feb 2025 16:02:12 -0300 Subject: [PATCH 07/10] fix: add styles to ui styles import list --- packages/ui/src/styles/components.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui/src/styles/components.scss b/packages/ui/src/styles/components.scss index e5be295692..431a094e8b 100644 --- a/packages/ui/src/styles/components.scss +++ b/packages/ui/src/styles/components.scss @@ -41,6 +41,7 @@ @import "../components/molecules/QuantitySelector/styles"; @import "../components/molecules/RadioField/styles"; @import "../components/molecules/Rating/styles"; +@import "../components/molecules/RatingField/styles"; @import "../components/molecules/RegionBar/styles"; @import "../components/molecules/SearchAutoComplete/styles"; @import "../components/molecules/SearchDropdown/styles"; From 9d611249d483f439a50bfa2e2248904c502f57b1 Mon Sep 17 00:00:00 2001 From: Fanny Chien Date: Thu, 6 Feb 2025 19:56:33 -0300 Subject: [PATCH 08/10] fix: indentation from merge --- .../components/molecules/Rating/styles.scss | 31 +++++++++---------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/packages/ui/src/components/molecules/Rating/styles.scss b/packages/ui/src/components/molecules/Rating/styles.scss index 10eb18a02e..c1934efcce 100644 --- a/packages/ui/src/components/molecules/Rating/styles.scss +++ b/packages/ui/src/components/molecules/Rating/styles.scss @@ -31,23 +31,20 @@ color: var(--fs-rating-color); } - [data-fs-rating-button] { - color: unset; - - &[disabled] [data-fs-button-wrapper] { - background-color: transparent; - - &:hover { - background-color: transparent; - } - } - - &[data-fs-button-variant="tertiary"]:hover, - &[data-fs-button-variant="tertiary"]:focus, - &[data-fs-button-variant="tertiary"]:active { - color: unset; - } - } + [data-fs-rating-button] { + color: unset; + &[disabled] [data-fs-button-wrapper] { + background-color: transparent; + &:hover { + background-color: transparent; + } + } + &[data-fs-button-variant="tertiary"]:hover, + &[data-fs-button-variant="tertiary"]:focus, + &[data-fs-button-variant="tertiary"]:active { + color: unset; + } + } [data-fs-rating-icon-wrapper] { position: absolute; From 7dd77f3575022c10298f10e8547258e525c183e0 Mon Sep 17 00:00:00 2001 From: Artur Santiago Date: Mon, 10 Feb 2025 14:37:56 -0300 Subject: [PATCH 09/10] fix(Rating): adjusting size of icon button for a actionable rating --- .../src/components/molecules/Rating/styles.scss | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/ui/src/components/molecules/Rating/styles.scss b/packages/ui/src/components/molecules/Rating/styles.scss index c1934efcce..709699eb9b 100644 --- a/packages/ui/src/components/molecules/Rating/styles.scss +++ b/packages/ui/src/components/molecules/Rating/styles.scss @@ -18,11 +18,12 @@ --fs-rating-actionable-icon-height : var(--fs-rating-actionable-icon-width); --fs-rating-actionable-icon-color : var(--fs-rating-color-empty); --fs-rating-actionable-icon-color-selected : var(--fs-rating-color); + --fs-rating-button-min-height : var(--fs-spacing-5); // -------------------------------------------------------- // Structural Styles // -------------------------------------------------------- - + display: flex; [data-fs-icon] { @@ -32,13 +33,18 @@ } [data-fs-rating-button] { + --fs-button-small-min-height: var(--fs-rating-button-min-height); + color: unset; + &[disabled] [data-fs-button-wrapper] { background-color: transparent; + &:hover { background-color: transparent; } } + &[data-fs-button-variant="tertiary"]:hover, &[data-fs-button-variant="tertiary"]:focus, &[data-fs-button-variant="tertiary"]:active { @@ -71,15 +77,15 @@ fill: none; } - [data-fs-rating-item='partial'] [data-fs-rating-icon-wrapper] { + [data-fs-rating-item="partial"] [data-fs-rating-icon-wrapper] { width: calc(var(--fs-rating-icon-width) / 2); } - &:not([data-fs-rating-actionable='true']) { + &:not([data-fs-rating-actionable="true"]) { column-gap: var(--fs-rating-gap); } - &[data-fs-rating-actionable='true'] { + &[data-fs-rating-actionable="true"] { column-gap: var(--fs-rating-actionable-gap); [data-fs-rating-item="full"] svg[data-fs-icon] { @@ -88,9 +94,9 @@ } [data-fs-icon] { - color: var(--fs-rating-actionable-color); width: var(--fs-rating-actionable-icon-width); height: var(--fs-rating-actionable-icon-height); + color: var(--fs-rating-actionable-color); color: var(--fs-rating-actionable-icon-color); } } From 7b5292281348de61ea76e6fc41252368550cbbe0 Mon Sep 17 00:00:00 2001 From: Artur Santiago Date: Mon, 10 Feb 2025 14:38:47 -0300 Subject: [PATCH 10/10] feat(RatingField): add spacing between input and text --- .../components/molecules/RatingField/styles.scss | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/components/molecules/RatingField/styles.scss b/packages/ui/src/components/molecules/RatingField/styles.scss index 9cbb811976..6daa6cccff 100644 --- a/packages/ui/src/components/molecules/RatingField/styles.scss +++ b/packages/ui/src/components/molecules/RatingField/styles.scss @@ -4,14 +4,14 @@ // -------------------------------------------------------- // Label - --fs-rating-field-label-color: var(--fs-color-text-light); - --fs-rating-field-label-size: var(--fs-text-size-2); - --fs-rating-field-label-line-height: var(--fs-text-size-4); + --fs-rating-field-label-color : var(--fs-color-text-light); + --fs-rating-field-label-size : var(--fs-text-size-2); + --fs-rating-field-label-line-height : var(--fs-text-size-4); // Error - --fs-rating-field-error-message-size: var(--fs-text-size-legend); - --fs-rating-field-error-message-line-height: 1.1; - --fs-rating-field-error-message-color: var(--fs-color-danger-text); + --fs-rating-field-error-message-size : var(--fs-text-size-legend); + --fs-rating-field-error-message-line-height : 1.1; + --fs-rating-field-error-message-color : var(--fs-color-danger-text); // -------------------------------------------------------- // Structural Styles @@ -20,12 +20,14 @@ flex-direction: column; [data-fs-rating-field-label] { + margin-bottom: var(--fs-spacing-0); font-size: var(--fs-rating-field-label-size); line-height: var(--fs-rating-field-label-line-height); color: var(--fs-rating-field-label-color); } [data-fs-rating-field-error-message] { + margin-top: var(--fs-spacing-0); font-size: var(--fs-rating-field-error-message-size); line-height: var(--fs-rating-field-error-message-line-height); color: var(--fs-rating-field-error-message-color);