Skip to content

Add validator for SegmentedControlButtonGroup options prop

Rene Padillo requested to merge gitlab-community/gitlab:add-validator-for-segmented-control-btn-group-prop into master

What does this MR do and why?

This adds a type validation for the options prop of SegmentedControlButtonGroup component which was introduced in this MR(discussion).

Currently supported option prop type validation:

  • Validate option item if not an object
  • value - Should be a string, number, or boolean
  • disabled - Should be a boolean or undefined

Issue: #360183

Screenshots or screen recordings

image

If one of option prop type is invalid, it shows a console error

How to set up and validate locally

  1. Import vue_shared/components/segmented_control_button_group.vue component to a page
  2. Render the segmented-control-button-group component inside <template> and pass an invalid options value, some examples:
    • [{ disabled: true }]
    • [{ value: 1, disabled: "false" }]
  3. Open Inspect element tool and check the Console, it should emit a Vue warning message.

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 Rene Padillo

Merge request reports