Skip to content

Color picker: allow to pass custom color suggestions

Jonas Wälter requested to merge siemens/gitlab:color-picker-custom-suggested-colors into master

What does this MR do and why?

There's a Color picker GitLab UI component: https://design.gitlab.com/components/color-picker. Using the component, you can set a HEX value or you can select one of the predefined "suggested colors". However, these "suggested colors" are hard-coded.

This MR allows to pass custom "suggested colors" using the suggestedColors property.

Note: This MR blocks !78281 (merged).

🛠 with ❤ at Siemens

/cc @bufferoverflow

Screenshots

Default suggested colors Custom suggested colors
ColorPicker_default ColorPicker_custom

How to set up and validate locally

The ColorPicker component is used in ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/shared_form.vue.

  1. Open ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/shared_form.vue
  2. Pass custom suggested colors: <color-picker ... :suggestedColors="{ '#ff0000': 'Red', '#808080': 'Gray' }"/>

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Jonas Wälter

Merge request reports