@gitlab/duo-ui 0.1.0

package/src/components/base/new_dropdowns/disclosure/mock_data.js

@@ -0,0 +1,201 @@
+export const mockItems = [
+  {
+    text: 'Mark as draft',
+    href: 'https://gitlab.com',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow',
+      'data-method': 'put',
+    },
+  },
+  {
+    text: 'Create new',
+    href: 'https://gitlab.com/gitlab-org/gitlab/-/merge_requests/new',
+    extraAttrs: {
+      rel: 'nofollow',
+      target: '_blank',
+    },
+  },
+  {
+    text: 'Edit merge request',
+    to: '/edit',
+    extraAttrs: {
+      'data-uuid': '1234',
+    },
+  },
+  {
+    text: 'Close merge request',
+    action: () => {
+      // eslint-disable-next-line no-console
+      console.log('CLOSED');
+    },
+    extraAttrs: {
+      class: '!gl-text-red-500',
+      rel: 'nofollow',
+      'data-method': 'put',
+    },
+  },
+];
+
+export const mockButtons = [
+  {
+    text: 'Checks',
+  },
+  {
+    text: 'Projects',
+  },
+  {
+    text: 'Standards',
+  },
+];
+
+export const mockItemsCustomItem = [
+  {
+    text: 'Assigned to you',
+    href: 'https://gitlab.com/dashboard/merge_requests?assignee_username=root',
+    count: '2',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow',
+    },
+  },
+  {
+    text: 'Review requests from you',
+    href: 'https://gitlab.com/dashboard/merge_requests?reviewer_username=root',
+    count: 0,
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow',
+    },
+  },
+  {
+    text: 'I am only visible on mobile!',
+    action: () => {
+      // eslint-disable-next-line no-console
+      console.log('clicked!');
+    },
+    wrapperClass: 'sm:!gl-hidden',
+  },
+];
+
+export const mockGroupsCustomItem = [
+  {
+    name: 'Merge requests',
+    items: [
+      {
+        text: 'Assigned to you',
+        href: 'https://gitlab.com/dashboard/merge_requests?assignee_username=root',
+        count: 1,
+      },
+      {
+        text: 'Review requests from you',
+        href: 'https://gitlab.com/dashboard/merge_requests?reviewer_username=root',
+        count: 4,
+      },
+    ],
+  },
+];
+
+export const mockGroups = [
+  {
+    name: 'This project',
+    items: [
+      {
+        text: 'New issue',
+        href: 'https://gitlab.com/gitlab-org/gitlab/-/issues/new',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+      {
+        text: 'New merge request',
+        href: 'https://gitlab.com/gitlab-org/gitlab/-/merge_requests/new',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+      {
+        text: 'New snippet',
+        href: 'https://gitlab.com/gitlab-org/gitlab/-/snippets/new',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+    ],
+  },
+  {
+    name: 'GitLab',
+    items: [
+      {
+        text: 'New project',
+        href: 'https://gitlab.com/projects/new',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+      {
+        text: 'New group',
+        href: 'https://gitlab.com/groups/new',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+      {
+        text: 'New snippet',
+        href: 'https://gitlab.com/snippets/new',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+    ],
+  },
+];
+
+export const mockProfileGroups = [
+  {
+    items: [
+      {
+        text: 'Set status',
+        href: 'https://gitlab.com',
+        icon: 'status_success',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+      {
+        text: 'Edit profile',
+        href: '#',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+      {
+        text: 'Preferences',
+        href: '#',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+    ],
+  },
+  {
+    items: [
+      {
+        text: 'Sign out',
+        action: () => {
+          // eslint-disable-next-line no-alert
+          window.confirm('Are you sure?');
+        },
+      },
+    ],
+  },
+];

package/src/components/base/new_dropdowns/disclosure/utils.js

@@ -0,0 +1,70 @@
+import Vue from 'vue';
+import isFunction from 'lodash/isFunction';
+import isString from 'lodash/isString';
+import { DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
+
+const itemValidator = (item) => item?.text?.length > 0 && !Array.isArray(item?.items);
+
+const isItem = (item) => Boolean(item) && itemValidator(item);
+
+const isGroup = (group) =>
+  Boolean(group) &&
+  Array.isArray(group.items) &&
+  Boolean(group.items.length) &&
+  // eslint-disable-next-line unicorn/no-array-callback-reference
+  group.items.every(isItem);
+
+// eslint-disable-next-line unicorn/no-array-callback-reference
+const itemsValidator = (items) => items.every(isItem) || items.every(isGroup);
+
+const isListItem = (tag) =>
+  ['gl-disclosure-dropdown-group', 'gl-disclosure-dropdown-item', 'li'].includes(tag);
+
+const isValidSlotTagVue2 = (vNode) =>
+  Boolean(vNode) && isListItem(vNode.componentOptions?.tag || vNode.tag);
+
+const isValidSlotTagVue3 = (vNode) => {
+  return (
+    [DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME].includes(vNode.type?.name) ||
+    vNode.type === 'li'
+  );
+};
+
+const hasOnlyListItemsVue2 = (defaultSlot) => {
+  const nodes = defaultSlot();
+
+  if (!Array.isArray(nodes)) {
+    return false;
+  }
+
+  const tags = nodes.filter((vNode) => vNode.tag);
+
+  return tags.length && tags.every((tag) => isValidSlotTagVue2(tag));
+};
+
+const hasOnlyListItemsVue3 = (defaultSlot) => {
+  const nodes = defaultSlot();
+  const fragment = nodes.find((node) => Array.isArray(node.children) && node.children.length);
+  const targetNodes = fragment ? fragment.children : nodes;
+
+  return (
+    targetNodes
+      // Remove empty text vNodes
+      .filter((vNode) => !isString(vNode.text) || vNode.text.trim().length > 0)
+      .every((vNode) => isValidSlotTagVue3(vNode))
+  );
+};
+
+const hasOnlyListItems = (defaultSlot) => {
+  if (!isFunction(defaultSlot)) {
+    return false;
+  }
+
+  if (Vue.version.startsWith('3')) {
+    return hasOnlyListItemsVue3(defaultSlot);
+  }
+
+  return hasOnlyListItemsVue2(defaultSlot);
+};
+
+export { itemsValidator, isItem, isGroup, hasOnlyListItems };

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

@@ -0,0 +1,243 @@
+.gl-new-dropdown {
+  @apply gl-inline-flex;
+  @apply gl-align-middle;
+
+  .gl-new-dropdown-custom-toggle {
+    *:first-child {
+      @apply gl-cursor-pointer;
+
+      &:focus {
+        @apply gl-focus;
+      }
+    }
+  }
+
+  .gl-new-dropdown-panel {
+    @apply gl-hidden;
+    @apply gl-bg-dropdown;
+    @apply gl-border-1 gl-border-solid gl-border-dropdown;
+    @apply gl-rounded-lg;
+    @apply gl-shadow-md;
+    top: 0;
+    left: 0;
+    min-width: $gl-new-dropdown-min-width;
+    max-width: $gl-new-dropdown-max-width;
+    z-index: 1000;
+  }
+
+  .gl-new-dropdown-inner {
+    @apply gl-flex;
+    @apply gl-flex-col;
+    max-height: $gl-max-dropdown-max-height;
+  }
+
+  .gl-new-dropdown-contents {
+    position: relative;
+    @apply gl-grow;
+    @apply gl-overflow-y-auto;
+    @apply gl-pl-0;
+    @apply gl-mb-0;
+    @apply gl-py-2;
+    @apply gl-list-none;
+
+    &:focus-visible {
+      @apply gl-focus;
+    }
+
+    ul {
+      @apply gl-list-none;
+    }
+  }
+
+  .gl-new-dropdown-toggle {
+    // optically align the caret
+    &.gl-button:not(.gl-new-dropdown-toggle-no-caret, .btn-icon) {
+      @apply gl-pr-3;
+
+      &.btn-sm {
+        @apply gl-pr-2;
+      }
+    }
+
+    &.gl-new-dropdown-toggle-no-caret .gl-new-dropdown-chevron {
+      @apply gl-hidden;
+    }
+  }
+
+  .gl-new-dropdown-toggle {
+    .gl-button-text {
+      @apply gl-inline-flex;
+
+      &:has(.gl-sr-only) {
+        width: auto;
+      }
+    }
+  }
+
+  .gl-new-dropdown-button-text {
+    @apply gl-mr-auto;
+    @apply gl-overflow-hidden;
+    @apply gl-text-ellipsis;
+  }
+
+  &.btn-sm .gl-icon {
+    @apply gl-my-0;
+
+    &.gl-new-dropdown-chevron {
+      @apply gl-h-5;
+      @apply gl-w-5;
+    }
+  }
+
+  .gl-button:not(.gl-new-dropdown-caret-only) .gl-button-icon.gl-new-dropdown-chevron {
+    @apply gl-ml-2;
+    @apply gl-mr-0;
+  }
+
+  .gl-new-dropdown-icon-only {
+    // optically align the caret
+    &.gl-button:not(.gl-new-dropdown-toggle-no-caret) {
+      @apply gl-pr-2;
+      @apply gl-pl-3;
+
+      &.btn-sm {
+        @apply gl-pr-0;
+      }
+    }
+
+    .gl-button-icon.gl-button-icon {
+      @apply gl-mr-0;
+
+      &.gl-button-loading-indicator {
+        @apply gl-mr-2;
+      }
+    }
+
+    &.btn-sm .gl-new-dropdown-chevron {
+      @apply gl-mx-0;
+    }
+  }
+
+  .gl-new-dropdown-caret-only {
+    // optically center the caret
+    @apply gl-pl-2;
+
+    &.btn-sm {
+      @apply gl-pl-0;
+    }
+  }
+
+  $dropdown-content-padding: 0.25rem;
+
+  // Scrim overlay related styles (the shadow that appears above and below the content) indicating that the content is scrollable
+  .gl-new-dropdown-contents-with-scrim-overlay {
+    padding: 0;
+  }
+
+  .gl-new-dropdown-contents {
+    .top-scrim-wrapper,
+    .bottom-scrim-wrapper {
+      height: $dropdown-content-padding;
+      opacity: 0;
+      position: sticky;
+      z-index: 1;
+      display: block;
+      overflow: visible;
+      left: 1px;
+      right: 1px;
+      pointer-events: none;
+      transition: opacity 0.1s;
+    }
+
+    .top-scrim-wrapper {
+      top: 0;
+
+      .top-scrim {
+        left: 0;
+        right: 0;
+
+        &.top-scrim-light {
+          height: 2.25rem;
+          border-radius: 0.375rem 0.375rem 0 0;
+          background: linear-gradient(180deg, var(--gl-dropdown-background-color) 0%, var(--gl-color-alpha-0));
+        }
+
+        &.top-scrim-dark {
+          height: 0.25rem;
+          background: linear-gradient(180deg, var(--gl-shadow-color-default) 0%, var(--gl-color-alpha-0) 100%);
+        }
+      }
+    }
+
+    .bottom-scrim-wrapper {
+      bottom: 0;
+      height: $dropdown-content-padding;
+
+      .bottom-scrim {
+        height: 0;
+        position: relative;
+        top: calc(-2.25rem + #{$dropdown-content-padding});
+        border-radius: 0 0 0.375rem 0.375rem;
+        background: linear-gradient(180deg, var(--gl-color-alpha-0) 0%, var(--gl-dropdown-background-color));
+      }
+    }
+
+    &.top-scrim-visible .top-scrim-wrapper,
+    &.bottom-scrim-visible .bottom-scrim-wrapper {
+      opacity: 1;
+    }
+
+    &.bottom-scrim-visible .bottom-scrim {
+      height: 2.25rem;
+    }
+  }
+}
+
+.btn-group {
+  .gl-new-dropdown:not(:last-child) {
+    .gl-new-dropdown-toggle {
+      @apply gl-rounded-tr-none;
+      @apply gl-rounded-br-none;
+    }
+  }
+
+  .gl-new-dropdown:not(:first-child) {
+    .gl-new-dropdown-toggle {
+      @apply gl-rounded-tl-none;
+      @apply gl-rounded-bl-none;
+
+      // Prevent double borders when buttons are next to each other
+      margin-left: -1px;
+    }
+  }
+
+  // The dropdown toggle of a "split" is by design supposed to be the last
+  // child of a button group, so only apply styles for that.
+  .gl-new-dropdown:last-child {
+    .gl-new-dropdown-caret-only {
+      &.btn-confirm,
+      &.btn-danger {
+        margin-left: 1px;
+      }
+
+      &:disabled,
+      &.disabled,
+      &[class*='-secondary'] {
+        margin-left: -1px;
+      }
+    }
+  }
+
+  .gl-new-dropdown:hover {
+    .gl-new-dropdown-toggle {
+      @apply gl-z-1;
+    }
+  }
+
+  .gl-new-dropdown {
+    .gl-new-dropdown-toggle:focus,
+    .gl-new-dropdown-toggle:active {
+      @apply gl-z-1;
+    }
+  }
+}

package/src/components/base/new_dropdowns/dropdown_item.scss

@@ -0,0 +1,134 @@
+.gl-new-dropdown-item {
+  @apply gl-cursor-pointer;
+  @apply gl-px-2;
+  @apply gl-my-1;
+
+  /* when there is a scrim `li` items inside the list, the first and last real items
+  do not match the selector `:first-child` and `:last-child`,
+  that's why we have to target them with a different selector */
+  &:first-child,
+  .gl-new-dropdown-contents-with-scrim-overlay > &:nth-child(3):not(:last-child) {
+    @apply gl-mt-0;
+  }
+
+  &:last-child,
+  .gl-new-dropdown-contents-with-scrim-overlay > &:nth-last-child(3):not(:first-child) {
+    @apply gl-mb-0;
+  }
+
+  &:hover {
+    .gl-new-dropdown-item-content {
+      color: var(--gl-dropdown-option-text-color-hover);
+      background-color: var(--gl-dropdown-option-background-color-unselected-hover);
+    }
+  }
+
+  &:focus {
+    .gl-new-dropdown-item-content {
+      color: var(--gl-dropdown-option-text-color-focus);
+      background-color: var(--gl-dropdown-option-background-color-unselected-focus);
+    }
+  }
+
+  &:active,
+  &:focus:active {
+    .gl-new-dropdown-item-content {
+      color: var(--gl-dropdown-option-text-color-active);
+      background-color: var(--gl-dropdown-option-background-color-unselected-active);
+    }
+  }
+
+  &[aria-selected="true"] {
+    .gl-new-dropdown-item-content {
+      background-color: var(--gl-dropdown-option-background-color-selected-default);
+    }
+
+    &:hover {
+      .gl-new-dropdown-item-content {
+        background-color: var(--gl-dropdown-option-background-color-selected-hover);
+      }
+
+      .gl-new-dropdown-item-check-icon {
+        color: var(--gl-dropdown-option-indicator-color-selected-hover);
+      }
+    }
+
+    &:focus {
+      .gl-new-dropdown-item-content {
+        background-color: var(--gl-dropdown-option-background-color-selected-focus);
+      }
+
+      .gl-new-dropdown-item-check-icon {
+        color: var(--gl-dropdown-option-indicator-color-selected-focus);
+      }
+    }
+
+    &:active,
+    &:focus:active {
+      .gl-new-dropdown-item-content {
+        background-color: var(--gl-dropdown-option-background-color-selected-active);
+      }
+
+      .gl-new-dropdown-item-check-icon {
+        color: var(--gl-dropdown-option-indicator-color-selected-active);
+      }
+    }
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:active,
+  &:focus,
+  &:focus:active {
+    .gl-new-dropdown-item-content {
+      @include gl-focus($inset: true);
+    }
+  }
+
+  &:focus {
+    .gl-new-dropdown-item-content {
+      z-index: 1;
+    }
+  }
+
+  .gl-new-dropdown-item-content {
+    @apply gl-rounded-base;
+    @apply gl-border-0;
+    @apply gl-w-full;
+    background-color: var(--gl-dropdown-option-background-color-unselected-default);
+    @apply gl-items-center;
+    @apply gl-flex;
+    @apply gl-text-base;
+    @apply gl-font-normal;
+    @apply gl-leading-normal;
+    @apply gl-px-3;
+    @apply gl-py-0;
+    position: relative;
+    @apply gl-no-underline;
+    color: var(--gl-dropdown-option-text-color-default);
+    @apply gl-text-left;
+    @apply gl-whitespace-normal;
+    @include gl-prefers-reduced-motion-transition;
+    transition: background-color $gl-transition-duration-fast $gl-easing-out-cubic,
+                box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
+
+    .gl-new-dropdown-item-check-icon {
+      @apply gl-shrink-0;
+      @apply gl-mr-3;
+      color: var(--gl-dropdown-option-indicator-color-selected-default);
+    }
+
+    .gl-new-dropdown-item-icon {
+      @apply gl-shrink-0;
+      @apply gl-mr-3;
+    }
+
+    .gl-new-dropdown-item-text-wrapper {
+      @apply gl-min-w-0;
+      @apply gl-grow;
+      @apply gl-py-3;
+    }
+  }
+}