@gitlab/ui 101.4.0 → 101.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "101.4.0",
+  "version": "101.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/segmented_control/segmented_control.md

@@ -1 +1,26 @@
-Button group of equal options where only one can be selected and active.
+A customizable button group that displays a set of equal options, where only one
+option can be active at a time. This component includes the ability to disable
+specific options and dynamically modify button content using slots.
+
+## Features
+
+- Displays a group of selectable buttons.
+- Allows only one active selection at a time.
+- Supports content customization through the button-content slot.
+- Options can be disabled individually.
+
+## Props Validation
+
+The `options` prop is validated against a specific structure to ensure consistent
+data. Each option must include:
+
+- `value`: A `string`, `number`, or `boolean` to identify the option.
+- `disabled`: A `boolean` (or `undefined`) indicating whether the option is disabled.
+
+Optionally it can include:
+
+- `text`: A `string` which gets displayed in the slot content.
+
+## Notes
+
+- Ensure each value is unique within the options array for consistent behavior.

package/src/components/base/segmented_control/segmented_control.vue

@@ -1,77 +1,55 @@
 <script>
-import { BFormRadioGroup } from '../../../vendor/bootstrap-vue/src/components/form-radio/form-radio-group';
+import GlButtonGroup from '../button_group/button_group.vue';
+import GlButton from '../button/button.vue';
 
-const genericErrorMessage = 'Segmented button should always have valid option selected';
+const validateOptionsProp = (options) => {
+  const requiredOptionPropType = {
+    value: ['string', 'number', 'boolean'],
+    disabled: ['boolean', 'undefined'],
+  };
+  const optionProps = Object.keys(requiredOptionPropType);
+
+  return options.every((option) => {
+    if (!option) {
+      return false;
+    }
+    return optionProps.every((name) => requiredOptionPropType[name].includes(typeof option[name]));
+  });
+};
 
 export default {
   name: 'GlSegmentedControl',
   components: {
-    BFormRadioGroup,
-  },
-  inheritAttrs: false,
-  model: {
-    prop: 'checked',
-    event: 'input',
+    GlButtonGroup,
+    GlButton,
   },
   props: {
-    checked: {
-      required: true,
-      validator: () => true,
-    },
     options: {
       type: Array,
       required: true,
+      validator: validateOptionsProp,
     },
-  },
-  computed: {
-    enabledOptions() {
-      return this.options.filter((option) => !option.disabled);
-    },
-  },
-  watch: {
-    checked: {
-      handler(newValue, oldValue) {
-        this.checkValue(newValue, oldValue);
-      },
-    },
-    options: {
-      handler() {
-        this.checkValue(this.checked);
-      },
-    },
-  },
-  created() {
-    this.checkValue(this.checked);
-  },
-  methods: {
-    checkValue(newValue, oldValue = null) {
-      if (!this.isValidValue(newValue)) {
-        // eslint-disable-next-line no-console
-        console.warn(genericErrorMessage);
-        if (this.enabledOptions.length) {
-          const suggestion =
-            oldValue && this.isValidValue(oldValue) ? oldValue : this.enabledOptions[0].value;
-          /**
-           * Emitted when the selection changes
-           * @event input
-           * @argument checked The selected option
-           */
-          this.$emit('input', suggestion);
-        }
-      }
-    },
-    isValidValue(val) {
-      return this.enabledOptions.some(({ value }) => value === val);
+    value: {
+      type: [String, Number, Boolean],
+      required: true,
     },
   },
 };
 </script>
+
 <template>
-  <b-form-radio-group
-    buttons
-    button-variant="gl-segmented-button gl-button"
-    class="gl-segmented-control"
-    v-bind="{ ...$attrs, options, checked }"
-    v-on="$listeners"
-  />
+  <gl-button-group>
+    <gl-button
+      v-for="option in options"
+      :key="option.value"
+      :disabled="!!option.disabled"
+      :selected="value === option.value"
+      v-bind="option.props"
+      @click="$emit('input', option.value)"
+    >
+      <slot name="button-content" v-bind="option">
+        {{ option.text }}
+      </slot>
+    </gl-button>
+  </gl-button-group>
 </template>

package/src/scss/components.scss

@@ -61,7 +61,6 @@
 @import '../components/base/progress_bar/progress_bar';
 @import '../components/base/search_box_by_type/search_box_by_type';
 @import '../components/base/search_box_by_click/search_box_by_click';
-@import '../components/base/segmented_control/segmented_control';
 @import '../components/base/skeleton_loader/skeleton_loader';
 @import '../components/base/tabs/tabs/tabs';
 @import '../components/base/toast/toast';

package/src/components/base/segmented_control/segmented_control.scss

@@ -1,189 +0,0 @@
-/*
- * Segmented-control-specific utilities
- */
-
-@mixin gl-btn-gl-segmented-button-first {
-  box-shadow:
-    inset 0 #{$gl-border-size-1} 0 0 $gray-200,
-    inset 0 -#{$gl-border-size-1} 0 0 $gray-200,
-    inset #{$gl-border-size-1} 0 0 0 $gray-200;
-}
-
-@mixin gl-btn-gl-segmented-button-last {
-  box-shadow:
-    inset 0 #{$gl-border-size-1} 0 0 $gray-200,
-    inset 0 -#{$gl-border-size-1} 0 0 $gray-200,
-    inset -#{$gl-border-size-1} 0 0 0 $gray-200;
-}
-
-@mixin gl-btn-gl-segmented-button-focus($color) {
-  box-shadow:
-    $focus-ring,
-    inset 0 0 0 $gl-border-size-2 $color;
-}
-
-.btn-group.gl-segmented-control {
-  .btn:not(:first-child),
-  .btn:not(:last-child) {
-    &.active,
-    &.focus,
-    &:hover:not(.disabled) {
-      @apply gl-rounded-base;
-    }
-  }
-}
-
-@if $feature-button-border {
-  .gl-segmented-control {
-    label:not(.disabled) {
-      @apply gl-cursor-pointer;
-    }
-
-    .btn-gl-segmented-button {
-      @apply gl-text-base;
-      @apply gl-leading-normal;
-      @apply gl-text-gray-900;
-      @apply gl-fill-current;
-      @apply gl-bg-gray-10;
-      border-color: $gray-200;
-
-      &:not(:first-child) {
-        border-left-color: transparent;
-      }
-
-      &:not(:last-child) {
-        border-right-color: transparent;
-      }
-
-      &:hover {
-        border-color: $gray-400;
-        @apply gl-bg-gray-50;
-      }
-
-      &.focus {
-        @apply gl-z-1;
-        border-color: $gray-400;
-        @apply gl-focus;
-        @apply gl-bg-gray-50;
-      }
-
-      &.active {
-        @apply gl-z-2;
-        border-color: $gray-400;
-        box-shadow: inset 0 0 0 $gl-border-size-1 $gray-400;
-        @apply gl-bg-white;
-
-        &:hover {
-          box-shadow: inset 0 0 0 $gl-border-size-1 $gray-400;
-          @apply gl-bg-gray-50;
-        }
-
-        &.focus,
-        &.focus:hover {
-          border-color: $gray-400;
-          @apply gl-focus;
-          @apply gl-bg-gray-50;
-        }
-      }
-
-      &:focus-within {
-        @apply gl-focus;
-      }
-
-      &.disabled,
-      &[disabled],
-      &.disabled:hover,
-      &[disabled]:hover {
-        @apply gl-text-gray-400;
-        border-color: $gray-200;
-        @apply gl-z-0;
-        @apply gl-cursor-not-allowed;
-
-        &:first-child {
-          border-right-color: transparent;
-        }
-
-        &:last-child {
-          border-left-color: transparent;
-        }
-      }
-    }
-  }
-} @else {
-  .gl-segmented-control {
-    label:not(.disabled) {
-      @apply gl-cursor-pointer;
-    }
-
-    .btn-gl-segmented-button {
-      @apply gl-text-base;
-      @apply gl-leading-normal;
-      @apply gl-text-gray-900;
-      @apply gl-fill-current;
-      @apply gl-bg-gray-10;
-      box-shadow:
-        inset 0 #{$gl-border-size-1} 0 0 $gray-200,
-        inset 0 -#{$gl-border-size-1} 0 0 $gray-200;
-
-      &:first-child {
-        @include gl-btn-gl-segmented-button-first;
-      }
-
-      &:last-child {
-        @include gl-btn-gl-segmented-button-last;
-      }
-
-      &:hover {
-        box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400;
-        @apply gl-bg-gray-50;
-      }
-
-      &.focus {
-        @apply gl-z-1;
-        @include gl-btn-gl-segmented-button-focus($gray-400);
-        @apply gl-bg-gray-50;
-      }
-
-      &.active {
-        @apply gl-z-2;
-        box-shadow: inset 0 0 0 $gl-border-size-2 $gray-300;
-        @apply gl-bg-white;
-
-        &:hover {
-          box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400;
-          @apply gl-bg-gray-50;
-        }
-
-        &.focus,
-        &.focus:hover {
-          @include gl-btn-gl-segmented-button-focus($gray-400);
-          @apply gl-bg-gray-50;
-        }
-      }
-
-      &:focus-within {
-        @apply gl-focus;
-      }
-
-      &.disabled,
-      &[disabled],
-      &.disabled:hover,
-      &[disabled]:hover {
-        @apply gl-text-gray-400;
-        box-shadow:
-          inset 0 #{$gl-border-size-1} 0 0 $gray-200,
-          inset 0 -#{$gl-border-size-1} 0 0 $gray-200;
-        @apply gl-z-0;
-        @apply gl-cursor-not-allowed;
-
-        &:first-child {
-          @include gl-btn-gl-segmented-button-first;
-        }
-
-        &:last-child {
-          @include gl-btn-gl-segmented-button-last;
-        }
-      }
-    }
-  }
-}