feat: add required prop to ColorPicker

[lucasn4s]

This PR adds the required prop to the ColorPicker component.

Key changes:

• Updated ColorPicker.vue to accept the required prop and render the CdsRequiredIndicator asterisk.
• Ensured consistency by adding the label and required indicator to the popover mode (previously only inline had a label).
• Updated src/utils/components-metadata.json and docs/components/forms/color-picker.md to document and demonstrate the new prop in the playground.
• Added a unit test in src/tests/ColorPicker.spec.ts to verify the rendering of the indicator.
• Incremented the package version to 3.154.9.

Fixes #1066

---

PR created automatically by Jules for task 17980275884316675972 started by @lucasn4s

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[greptile-apps]

Greptile Summary

Este PR adiciona a prop required ao componente CdsColorPicker, exibindo um asterisco vermelho (CdsRequiredIndicator) ao lado da label quando ativada. Além disso, o modo popover (anteriormente sem label) agora também renderiza a div de label para ser consistente com o modo inline.

• ✅ A prop required foi corretamente adicionada ao componente com tipo Boolean e padrão false.
• ✅ O CdsRequiredIndicator é renderizado condicionalmente via v-if="required" em ambos os modos (inline e popover).
• ⚠️ A adição da div de label no modo v-else (popover) é uma mudança comportamental: implementações existentes que usavam o modo popover sem passar a prop label passarão a exibir o texto padrão "Label" inesperadamente. Recomenda-se adicionar uma guarda condicional (ex.: v-if="label || required") para evitar renderizar a label quando ela não for necessária.
• ⚠️ O novo teste de unidade cobre apenas o modo popover. Um teste adicional para o modo inline garantiria cobertura completa do novo comportamento.
• ✅ Documentação, metadados e snapshot atualizados corretamente.

Confidence Score: 3/5

• O PR é seguro para mesclar com ressalvas — a adição da label no modo popover é uma mudança comportamental que pode quebrar UIs existentes.
• A implementação da prop required em si está correta e bem integrada. O ponto de atenção é que adicionar a div de label ao modo popover (onde ela não existia antes) é uma breaking change implícita para consumidores que usavam o componente sem a prop label. Isso reduz a confiança para mesclar sem revisão adicional.
• src/components/ColorPicker.vue — verificar se a label no modo popover deve ser condicional para não quebrar implementações existentes.

Important Files Changed

Filename	Overview
src/components/ColorPicker.vue	Adiciona a prop required e o CdsRequiredIndicator em ambos os modos (inline e popover). A adição da label no modo popover é uma mudança comportamental que pode afetar implementações existentes.
src/tests/ColorPicker.spec.ts	Adiciona teste para verificar a renderização do CdsRequiredIndicator, mas cobre apenas o modo popover. O modo inline não é testado para o novo comportamento.
src/tests/snapshots/ColorPicker.spec.ts.snap	Snapshot atualizado corretamente para refletir a adição do comentário <!--v-if--> do CdsRequiredIndicator no modo inline.
docs/components/forms/color-picker.md	Documentação atualizada corretamente: prop required adicionada ao playground de ambos os modos (inline e popover), e label incluída nos args do modo popover.
docs/.docgen/components-metadata.json	Metadados do componente atualizados corretamente com a nova prop required (tipo boolean, padrão false).
package.json	Versão incrementada de 3.154.8 para 3.154.9 (patch bump).

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[CdsColorPicker] --> B{inline?}
    B -- true --> C[Renderiza label div\ncom CdsRequiredIndicator]
    B -- false --> D[Renderiza label div\ncom CdsRequiredIndicator\n⚠️ NOVO COMPORTAMENTO]
    C --> E{required?}
    D --> E
    E -- true --> F[Exibe asterisco\nCdsRequiredIndicator]
    E -- false --> G[Oculta asterisco\nv-if=false]
    C --> H[Renderiza swatches\nem modo inline]
    D --> I[Renderiza CdsPopover\ncom swatches]

Loading

_{Last reviewed commit: 7d318fc}

[greptile-apps]

Teste cobre apenas o modo popover

O novo teste verifica a renderização do CdsRequiredIndicator somente no modo popover (sem inline: true). Como o CdsRequiredIndicator é renderizado em dois blocos distintos do template (modo inline e modo popover), seria importante adicionar um teste que cubra o modo inline também, garantindo que o indicador aparece corretamente em ambos os contextos.

Suggested change

	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);
	});
	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);
	});
	test('renders the required indicator in inline mode when the required prop is true', async () => {
	const wrapper = mount(ColorPicker, {
	props: {
	modelValue: '#000000',
	inline: true,
	required: true,
	swatch: [],
	},
	});
	const requiredIndicator = wrapper.findComponent({ name: 'CdsRequiredIndicator' });
	expect(requiredIndicator.exists()).toBe(true);
	});

[lucasn4s]

@jules verifique este comentário

[google-labs-jules]

O teste foi ajustado para incluir inline: true, garantindo que o indicador de obrigatório seja renderizado corretamente no modo inline. Além disso, adicionei um novo caso de teste para verificar que o indicador NÃO é renderizado no modo popover, conforme o comportamento acordado.