From 7d318fcf47453a3e91d959b544c0f1971cd9a7f0 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Tue, 10 Mar 2026 17:24:00 +0000 Subject: [PATCH 1/4] feat(ColorPicker): add required prop and visual indicator - Implement 'required' prop in ColorPicker component. - Display CdsRequiredIndicator when 'required' is true. - Add label and required indicator to popover mode for consistency. - Update documentation and components metadata. - Add unit test for the required indicator. - Bump version to 3.154.9. Co-authored-by: lucasn4s <17988272+lucasn4s@users.noreply.github.com> --- docs/.docgen/components-metadata.json | 11 +++++++++++ docs/components/forms/color-picker.md | 3 +++ package-lock.json | 4 ++-- package.json | 2 +- src/components/ColorPicker.vue | 17 ++++++++++++++++- src/tests/ColorPicker.spec.ts | 12 ++++++++++++ .../__snapshots__/ColorPicker.spec.ts.snap | 4 +++- 7 files changed, 48 insertions(+), 5 deletions(-) diff --git a/docs/.docgen/components-metadata.json b/docs/.docgen/components-metadata.json index fea216793..5ef1b1c20 100644 --- a/docs/.docgen/components-metadata.json +++ b/docs/.docgen/components-metadata.json @@ -2867,6 +2867,17 @@ "value": "'Label'" } }, + { + "name": "required", + "description": "Exibe asterisco de obrigatório (obs.: não faz a validação)", + "type": { + "name": "boolean" + }, + "defaultValue": { + "func": false, + "value": "false" + } + }, { "name": "inline", "description": "Quando true passa a mostrar as opções de cores fora do popover.", diff --git a/docs/components/forms/color-picker.md b/docs/components/forms/color-picker.md index 7050e0ba7..b5c5ee4c9 100644 --- a/docs/components/forms/color-picker.md +++ b/docs/components/forms/color-picker.md @@ -168,14 +168,17 @@ const argsInline = ref({ label: "Cor", modelValue: '#2AC092', state: 'default', + required: false, errorMessage: 'Campo obrigatório', }); const argsWithPopover = ref({ swatch: swatchWithPopover, popoverHeight: 190, + label: "Cor", modelValue: '#2AC092', state: 'default', + required: false, errorMessage: 'Campo obrigatório', }); diff --git a/package-lock.json b/package-lock.json index cff882a09..1090de214 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@sysvale/cuida", - "version": "3.154.8", + "version": "3.154.9", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@sysvale/cuida", - "version": "3.154.8", + "version": "3.154.9", "dependencies": { "@popperjs/core": "^2.11.6", "@sysvale/cuida-icons": "^1.18.0", diff --git a/package.json b/package.json index 20077d378..2dce9b8c3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sysvale/cuida", - "version": "3.154.8", + "version": "3.154.9", "description": "A design system built by Sysvale, using storybook and Vue components", "repository": { "type": "git", diff --git a/src/components/ColorPicker.vue b/src/components/ColorPicker.vue index 5987301fa..1f92d5a85 100644 --- a/src/components/ColorPicker.vue +++ b/src/components/ColorPicker.vue @@ -2,6 +2,7 @@
{{ label }} +
+
+ {{ label }} + +
+
-
+
import CdsPopover from './Popover.vue'; import CdsIcon from './Icon.vue'; +import CdsRequiredIndicator from './RequiredIndicator.vue'; import sassColorVariables from '../assets/sass/tokens/colors.module.scss'; import ContrastChecker from '../utils/methods/contrastChecker'; import paleteBuilder from '../utils/methods/paleteBuilder.js'; @@ -92,6 +99,7 @@ export default { components: { CdsPopover, CdsIcon, + CdsRequiredIndicator, }, props: { @@ -110,6 +118,13 @@ export default { default: 'Label', }, /** + * Exibe asterisco de obrigatório (obs.: não faz a validação) + */ + required: { + type: Boolean, + default: false, + }, + /** * Quando true passa a mostrar as opções de cores fora do popover. */ inline: { diff --git a/src/tests/ColorPicker.spec.ts b/src/tests/ColorPicker.spec.ts index 35a888a91..6b71d60a2 100644 --- a/src/tests/ColorPicker.spec.ts +++ b/src/tests/ColorPicker.spec.ts @@ -15,4 +15,16 @@ describe('ColorPicker', () => { expect(wrapper.html()).toMatchSnapshot(); }); + + test('renders the required indicator when the required prop is true', async () => { + const wrapper = mount(ColorPicker, { + props: { + modelValue: '#000000', + required: true, + }, + }); + + const requiredIndicator = wrapper.findComponent({ name: 'CdsRequiredIndicator' }); + expect(requiredIndicator.exists()).toBe(true); + }); }); diff --git a/src/tests/__snapshots__/ColorPicker.spec.ts.snap b/src/tests/__snapshots__/ColorPicker.spec.ts.snap index 7815b7439..c2fa300af 100644 --- a/src/tests/__snapshots__/ColorPicker.spec.ts.snap +++ b/src/tests/__snapshots__/ColorPicker.spec.ts.snap @@ -2,7 +2,9 @@ exports[`ColorPicker > renders correctly 1`] = ` "
-
Label
+
Label + +
From a63d564eeb0309ef13d6e096083566a67a10493d Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Tue, 10 Mar 2026 17:53:25 +0000 Subject: [PATCH 2/4] feat(ColorPicker): add required prop and visual indicator - Implement 'required' prop in ColorPicker component. - Display CdsRequiredIndicator when 'required' is true (inline mode only). - Update documentation and components metadata. - Add unit test for the required indicator. - Remove unnecessary label from popover mode based on PR feedback. - Bump version to 3.154.9. Co-authored-by: lucasn4s <17988272+lucasn4s@users.noreply.github.com> --- docs/components/forms/color-picker.md | 1 - src/components/ColorPicker.vue | 5 ----- src/tests/ColorPicker.spec.ts | 1 + 3 files changed, 1 insertion(+), 6 deletions(-) diff --git a/docs/components/forms/color-picker.md b/docs/components/forms/color-picker.md index b5c5ee4c9..a3b646d78 100644 --- a/docs/components/forms/color-picker.md +++ b/docs/components/forms/color-picker.md @@ -175,7 +175,6 @@ const argsInline = ref({ const argsWithPopover = ref({ swatch: swatchWithPopover, popoverHeight: 190, - label: "Cor", modelValue: '#2AC092', state: 'default', required: false, diff --git a/src/components/ColorPicker.vue b/src/components/ColorPicker.vue index 1f92d5a85..a4b0b94ae 100644 --- a/src/components/ColorPicker.vue +++ b/src/components/ColorPicker.vue @@ -32,11 +32,6 @@
-
- {{ label }} - -
-
{ props: { modelValue: '#000000', required: true, + inline: true, }, }); From 676bc2185cb10e760d65e73bcc7fd02585d5ff5a Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Tue, 10 Mar 2026 18:35:07 +0000 Subject: [PATCH 3/4] feat(ColorPicker): add required prop and visual indicator - Implement 'required' prop in ColorPicker component. - Display CdsRequiredIndicator when 'required' is true (inline mode only). - Update documentation and components metadata. - Add unit tests for the required indicator (positive and negative cases). - Bump version to 3.154.9. Co-authored-by: lucasn4s <17988272+lucasn4s@users.noreply.github.com> --- src/tests/ColorPicker.spec.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/tests/ColorPicker.spec.ts b/src/tests/ColorPicker.spec.ts index ae9309fd0..ce6e3f1d5 100644 --- a/src/tests/ColorPicker.spec.ts +++ b/src/tests/ColorPicker.spec.ts @@ -28,4 +28,17 @@ describe('ColorPicker', () => { const requiredIndicator = wrapper.findComponent({ name: 'CdsRequiredIndicator' }); expect(requiredIndicator.exists()).toBe(true); }); + + test('does not render the required indicator in popover mode even if the required prop is true', async () => { + const wrapper = mount(ColorPicker, { + props: { + modelValue: '#000000', + required: true, + inline: false, + }, + }); + + const requiredIndicator = wrapper.findComponent({ name: 'CdsRequiredIndicator' }); + expect(requiredIndicator.exists()).toBe(false); + }); }); From 958e91e478a2aee2e167259f53bdc54be32b078d Mon Sep 17 00:00:00 2001 From: Ezequias Antunes <56970805+ezequias21@users.noreply.github.com> Date: Thu, 12 Mar 2026 09:19:40 -0300 Subject: [PATCH 4/4] Apply suggestion from @ezequias21 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2dce9b8c3..8235d0a6c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sysvale/cuida", - "version": "3.154.9", + "version": "3.154.10", "description": "A design system built by Sysvale, using storybook and Vue components", "repository": { "type": "git",