@gitlab/duo-ui 0.1.0

package/src/components/base/dropdown/dropdown.md

@@ -0,0 +1,72 @@
+The dropdown component offers a user multiple items or actions to choose from which are initially
+collapsed behind a button.
+
+> **NOTE**: This component has been deprecated in favor of components
+> more suited to the various use cases for dropdowns. Consider using a more
+> appropriate component instead:
+>
+> - For single or multiselect options, use `GlCollapsibleListbox`.
+> - For displaying a list of actions like "Edit user", "Delete user", use `GlDisclosureDropdown`.
+>
+> See [Which component should you use?](https://design.gitlab.com/components/dropdown-overview#which-component-should-you-use)
+> for what to use and when.
+
+### Icon-only dropdown
+
+Icon-only dropdowns must have an accessible name.
+You can provide this with the combination of `text` and `text-sr-only` props.
+
+Optionally, you can use `no-caret` to remove the caret and `category="tertiary"` to remove the border.
+
+```html
+<gl-dropdown
+  icon="ellipsis_v"
+  text="More actions"
+  :text-sr-only="true"
+  category="tertiary"
+  no-caret
+>
+```
+
+### Button Content
+
+There are 3 ways to set the dropdown button's content.
+
+1. Use the `text` attribute. This will display the text with the loading spinner (shown with the
+`loading` attribute), icon (if provided by the `icon` attribute), and dropdown caret:
+
+    ```html
+    <gl-dropdown text="Button text">
+    ```
+
+1. Use the `button-text` template. This allows custom content for the button's text, but keeps the
+loading spinner, icon, and dropdown caret:
+
+    ```html
+    <gl-dropdown>
+      <template #button-text>
+        <!-- Loading spinner shown here -->
+        <!-- Icon shown here -->
+        Custom <strong>Content</strong> with <em>HTML</em> via Slot
+        <gl-truncate position="middle" text="Truncated button text"/>
+        <!-- Dropdown arrow shown here -->
+      </template>
+    </gl-dropdown>
+    ```
+
+1. Use the `button-content` template. This will replace everything in the button with the template:
+
+    ```html
+    <gl-dropdown>
+      <template #button-content>
+        Custom <strong>Content</strong> with <em>HTML</em> via Slot
+      </template>
+    </gl-dropdown>
+    ```
+
+### GlDropdownForm
+
+Unlike `b-dropdown-form`, we do _not_ add any additional padding with the `gl-dropdown-form` component.
+This is to prevent double padding with `gl-dropdown-item` and similar components, so in most cases
+shouldn't be needed. To add padding, either add a padding utility class to your form, or an inner
+element with some padding.

package/src/components/base/dropdown/dropdown.scss

@@ -0,0 +1,210 @@
+.gl-dropdown {
+  .dropdown-menu {
+    @apply gl-border-1 gl-border-dropdown;
+    @apply gl-rounded-base;
+    @apply gl-bg-dropdown;
+    @apply gl-mt-2;
+    @apply gl-mb-2;
+    @apply gl-p-0;
+    @apply gl-shadow-x0-y2-b4-s0;
+    width: $gl-dropdown-width;
+
+    .gl-search-box-by-type {
+      @apply gl-m-3;
+    }
+  }
+
+  .dropdown-menu li {
+    @apply gl-p-0;
+  }
+
+  .gl-dropdown-inner {
+    @apply gl-flex;
+    @apply gl-flex-col;
+    max-height: $gl-max-dropdown-max-height;
+
+    > :first-child {
+      @apply gl-pt-3;
+    }
+
+    > :last-child {
+      @apply gl-pb-3;
+    }
+  }
+
+  .gl-dropdown-contents {
+    @apply gl-grow;
+    overflow-y: auto;
+  }
+
+  .gl-dropdown-header-top {
+    @apply gl-border-1 gl-border-b-solid gl-border-dropdown;
+    @apply gl-flex;
+    @apply gl-text-base;
+    @apply gl-text-strong;
+    @apply gl-font-bold;
+    @apply gl-justify-center;
+    @apply gl-leading-normal;
+    @apply gl-m-0;
+    @apply gl-mb-3;
+    @apply gl-pb-3;
+    @apply gl-px-5;
+  }
+
+  .gl-dropdown-header {
+    @apply gl-border-b-1 gl-border-b-solid gl-border-b-dropdown;
+  }
+
+  .gl-dropdown-footer {
+    @apply gl-border-t-1 gl-border-t-solid gl-border-t-dropdown;
+    @apply gl-py-3;
+  }
+
+  .dropdown-toggle {
+    // Remove bootstrap's dropdown caret
+    &::after {
+      @apply gl-hidden;
+    }
+
+    &.gl-button,
+    &.gl-button.btn-block {
+      @apply gl-pr-3;
+
+      &.btn-sm {
+        @apply gl-pr-2;
+      }
+    }
+
+    &.dropdown-toggle-no-caret,
+    &.dropdown-toggle-no-caret.btn-sm {
+      @apply gl-p-3;
+
+      .dropdown-chevron {
+        display: none;
+      }
+    }
+  }
+
+  .dropdown-toggle-split {
+    &::after {
+      @apply gl-border-0;
+      content: '';
+      @apply gl-block;
+      @apply gl-w-5;
+      @apply gl-h-5;
+      @apply gl-bg-current;
+      @include mask-chevron-down;
+    }
+
+    &.btn-confirm,
+    &.btn-info,
+    &.btn-success,
+    &.btn-danger {
+      margin-left: 1px;
+    }
+
+    &:disabled,
+    &.disabled,
+    &[class*='-secondary'] {
+      margin-left: -1px;
+    }
+
+    @if $feature-button-border {
+      &.gl-button {
+        @apply gl-px-0;
+
+        &.btn-sm {
+          @apply gl-px-0;
+        }
+      }
+    } @else {
+      &.gl-button {
+        @apply gl-px-3;
+
+        &.btn-sm {
+          @apply gl-px-2;
+        }
+      }
+    }
+  }
+
+  .gl-dropdown-toggle {
+    &.btn-block {
+      @apply gl-justify-between;
+    }
+
+    .gl-button-text {
+      @apply gl-inline-flex;
+    }
+  }
+
+  .gl-dropdown-button-text {
+    @apply gl-mr-auto;
+    @apply gl-overflow-hidden;
+    @apply gl-text-ellipsis;
+  }
+
+  // Fix rounded split dropdown button: https://gitlab.com/gitlab-org/gitlab-ui/issues/626
+  &.dropdown.show .dropdown-toggle-split {
+    @apply gl-rounded-tl-none;
+    @apply gl-rounded-bl-none;
+  }
+
+  // The `&.dropdown` is necessary to strengthen the specificity of these selectors
+  &.dropdown {
+    &.btn-sm .gl-icon {
+      @apply gl-mt-0;
+      @apply gl-mb-0;
+
+      &.dropdown-chevron {
+        @apply gl-h-5;
+        @apply gl-w-5;
+      }
+    }
+
+    .gl-button .dropdown-chevron,
+    .gl-button.btn-block .dropdown-chevron,
+    .dropdown-chevron {
+      @apply gl-ml-2;
+      @apply gl-mr-0;
+    }
+  }
+
+  .dropdown-icon {
+    @apply gl-mr-2;
+  }
+
+  .dropdown-icon-text,
+  .dropdown-icon-only {
+    @apply gl-pl-3;
+  }
+
+  .dropdown-icon-only {
+    @if $feature-button-border {
+      &.dropdown-toggle-no-caret {
+        padding: 0 !important;
+      }
+    }
+
+    .dropdown-icon,
+    .gl-button-icon.gl-button-icon {
+      @apply gl-mr-0;
+    }
+
+    &.btn-sm .dropdown-chevron {
+      @apply gl-mx-0;
+    }
+  }
+
+  .split-content-button {
+    @apply gl-px-4;
+  }
+
+  .icon-split-content-button {
+    @apply gl-pl-3;
+
+    .dropdown-icon {
+      @apply gl-mr-0;
+    }
+  }
+}

package/src/components/base/dropdown/dropdown.vue

@@ -0,0 +1,323 @@
+<!-- eslint-disable vue/multi-word-component-names vue/one-component-per-file -->
+<script>
+import Vue from 'vue';
+import merge from 'lodash/merge';
+import { selectAll } from '../../../vendor/bootstrap-vue/src/utils/dom';
+import { BDropdown } from '../../../vendor/bootstrap-vue/src/components/dropdown/dropdown';
+import {
+  buttonCategoryOptions,
+  buttonSizeOptions,
+  dropdownVariantOptions,
+} from '../../../utils/constants';
+import { filterVisible } from '../../../utils/utils';
+import { ButtonMixin } from '../../mixins/button_mixin';
+import GlButton from '../button/button.vue';
+import GlIcon from '../icon/icon.vue';
+import GlLoadingIcon from '../loading_icon/loading_icon.vue';
+import GlDropdownDivider from './dropdown_divider.vue';
+
+const Selector = {
+  ITEM_SELECTOR:
+    '.dropdown-item:not(.disabled):not([disabled]),.form-control:not(.disabled):not([disabled])',
+};
+
+// see https://gitlab.com/gitlab-org/gitlab-ui/merge_requests/130#note_126406721
+const ExtendedBDropdown = Vue.extend(BDropdown, {
+  name: 'ExtendedBDropdown',
+  methods: {
+    getItems() {
+      return filterVisible(selectAll(Selector.ITEM_SELECTOR, this.$refs.menu));
+    },
+  },
+});
+
+export const DefaultPopperOptions = {
+  modifiers: {
+    flip: {
+      flipVariationsByContent: true,
+      padding: 28,
+    },
+  },
+};
+
+export default {
+  name: 'GlDropdown',
+  components: {
+    BDropdown: ExtendedBDropdown,
+    GlButton,
+    GlDropdownDivider,
+    GlIcon,
+    GlLoadingIcon,
+  },
+  mixins: [ButtonMixin],
+  inheritAttrs: false,
+  props: {
+    headerText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    hideHeaderBorder: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    showClearAll: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    clearAllText: {
+      type: String,
+      required: false,
+      default: 'Clear all',
+    },
+    clearAllTextClass: {
+      type: String,
+      required: false,
+      default: 'gl-px-5',
+    },
+    text: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    showHighlightedItemsTitle: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    highlightedItemsTitle: {
+      type: String,
+      required: false,
+      default: 'Selected',
+    },
+    highlightedItemsTitleClass: {
+      type: String,
+      required: false,
+      default: 'gl-px-5',
+    },
+    textSrOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    split: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    category: {
+      type: String,
+      required: false,
+      default: buttonCategoryOptions.primary,
+      validator: (value) => Object.keys(buttonCategoryOptions).includes(value),
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: dropdownVariantOptions.default,
+      validator: (value) => Object.keys(dropdownVariantOptions).includes(value),
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'medium',
+      validator: (value) => Object.keys(buttonSizeOptions).includes(value),
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    block: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    toggleClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: null,
+    },
+    right: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    popperOpts: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    noFlip: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    splitHref: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    renderCaret() {
+      return !this.split;
+    },
+    isIconOnly() {
+      return Boolean(
+        this.icon && (!this.text?.length || this.textSrOnly) && !this.hasSlotContents('button-text')
+      );
+    },
+    isIconWithText() {
+      return Boolean(this.icon && this.text?.length && !this.textSrOnly);
+    },
+    toggleButtonClasses() {
+      return [
+        this.toggleClass,
+        {
+          'gl-button': true,
+          'gl-dropdown-toggle': true,
+          [`btn-${this.variant}-secondary`]:
+            this.category === buttonCategoryOptions.secondary ||
+            (this.category === buttonCategoryOptions.tertiary && this.split),
+          [`btn-${this.variant}-tertiary`]:
+            this.category === buttonCategoryOptions.tertiary && !this.split,
+          'dropdown-icon-only': this.isIconOnly,
+          'dropdown-icon-text': this.isIconWithText,
+        },
+      ];
+    },
+    splitButtonClasses() {
+      return [
+        this.toggleClass,
+        {
+          'gl-button': true,
+          'split-content-button': Boolean(this.text),
+          'icon-split-content-button': Boolean(this.icon),
+          [`btn-${this.variant}-secondary`]:
+            this.category === buttonCategoryOptions.secondary ||
+            this.category === buttonCategoryOptions.tertiary,
+        },
+      ];
+    },
+    buttonText() {
+      return this.split && this.icon ? null : this.text;
+    },
+    hasHighlightedItemsContent() {
+      return this.hasSlotContents('highlighted-items');
+    },
+    hasHighlightedItemsOrClearAll() {
+      return (
+        (this.hasHighlightedItemsContent && this.showHighlightedItemsTitle) || this.showClearAll
+      );
+    },
+    popperOptions() {
+      return merge({}, DefaultPopperOptions, this.popperOpts);
+    },
+  },
+  methods: {
+    hasSlotContents(slotName) {
+      return Boolean(this.$scopedSlots[slotName]?.());
+    },
+    show(...args) {
+      this.$refs.dropdown.show(...args);
+    },
+    hide(...args) {
+      this.$refs.dropdown.hide(...args);
+    },
+  },
+};
+</script>
+<template>
+  <b-dropdown
+    ref="dropdown"
+    class="gl-dropdown"
+    v-bind="$attrs"
+    :split="split"
+    :variant="variant"
+    :size="buttonSize"
+    :toggle-class="[toggleButtonClasses]"
+    :split-class="splitButtonClasses"
+    :block="block"
+    :disabled="disabled || loading"
+    :right="right"
+    :popper-opts="popperOptions"
+    :no-flip="noFlip"
+    :split-href="splitHref"
+    v-on="$listeners"
+  >
+    <div class="gl-dropdown-inner">
+      <div
+        v-if="hasSlotContents('header') || headerText"
+        class="gl-dropdown-header"
+        :class="{ '!gl-border-b-0': hideHeaderBorder }"
+      >
+        <p v-if="headerText" class="gl-dropdown-header-top">
+          {{ headerText }}
+        </p>
+        <slot name="header"></slot>
+      </div>
+
+      <div
+        v-if="hasHighlightedItemsOrClearAll"
+        class="gl-flex gl-flex-row gl-items-center gl-justify-between"
+      >
+        <div
+          v-if="hasHighlightedItemsContent && showHighlightedItemsTitle"
+          class="gl-justify-content-flex-start gl-flex gl-grow"
+          :class="highlightedItemsTitleClass"
+        >
+          <span class="gl-font-bold gl-text-strong" data-testid="highlighted-items-title">{{
+            highlightedItemsTitle
+          }}</span>
+        </div>
+        <div v-if="showClearAll" class="gl-flex gl-grow gl-justify-end" :class="clearAllTextClass">
+          <gl-button
+            size="small"
+            category="tertiary"
+            variant="link"
+            data-testid="clear-all-button"
+            @click="$emit('clear-all', $event)"
+            >{{ clearAllText }}</gl-button
+          >
+        </div>
+      </div>
+      <div class="gl-dropdown-contents">
+        <div
+          v-if="hasHighlightedItemsContent"
+          class="gl-overflow-visible"
+          data-testid="highlighted-items"
+        >
+          <slot name="highlighted-items"></slot>
+          <gl-dropdown-divider />
+        </div>
+        <slot></slot>
+      </div>
+      <div v-if="hasSlotContents('footer')" class="gl-dropdown-footer">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+    <template #button-content>
+      <slot name="button-content">
+        <gl-loading-icon v-if="loading" :class="{ 'gl-mr-2': !isIconOnly }" />
+        <gl-icon v-if="icon && !(isIconOnly && loading)" class="dropdown-icon" :name="icon" />
+        <span class="gl-dropdown-button-text" :class="{ 'gl-sr-only': textSrOnly }">
+          <slot name="button-text">{{ buttonText }}</slot>
+        </span>
+        <gl-icon v-if="renderCaret" class="gl-button-icon dropdown-chevron" name="chevron-down" />
+      </slot>
+    </template>
+  </b-dropdown>
+</template>

package/src/components/base/dropdown/dropdown_divider.scss

@@ -0,0 +1,20 @@
+@mixin gl-tmp-dropdown-divider-style {
+  @apply gl-overflow-hidden;
+  @apply gl-h-0;
+  @apply gl-my-2;
+  @apply gl-mx-0;
+  @apply gl-p-0;
+  @apply gl-border-t-1 gl-border-t-solid gl-border-t-dropdown;
+}
+
+/* Styling when the component is used on its own */
+.gl-dropdown-divider {
+  @include gl-tmp-dropdown-divider-style;
+}
+
+/* Styling to override the vue-bootstrap CSS included in GitLab CSS */
+.gl-dropdown {
+  .gl-dropdown-divider {
+    @include gl-tmp-dropdown-divider-style;
+  }
+}

package/src/components/base/dropdown/dropdown_divider.vue

@@ -0,0 +1,15 @@
+<script>
+import { BDropdownDivider } from '../../../vendor/bootstrap-vue/src/components/dropdown/dropdown-divider';
+
+export default {
+  name: 'GlDropdownDivider',
+  components: {
+    BDropdownDivider,
+  },
+  inheritAttrs: false,
+};
+</script>
+
+<template>
+  <b-dropdown-divider class="gl-dropdown-divider" v-bind="$attrs" v-on="$listeners" />
+</template>

package/src/components/base/dropdown/dropdown_form.vue

@@ -0,0 +1,17 @@
+<script>
+import { BDropdownForm } from '../../../vendor/bootstrap-vue/src/components/dropdown/dropdown-form';
+
+export default {
+  name: 'GlDropdownForm',
+  components: {
+    BDropdownForm,
+  },
+  inheritAttrs: false,
+};
+</script>
+
+<template>
+  <b-dropdown-form v-bind="$attrs" form-class="gl-p-0" v-on="$listeners">
+    <slot></slot>
+  </b-dropdown-form>
+</template>

package/src/components/base/dropdown/dropdown_item.md

@@ -0,0 +1,2 @@
+The dropdown item component is meant to be used for clickable entries inside a dropdown component.
+If you provide the `href` attribute, it renders a link instead of a button.