@gitlab/ui 113.6.0 → 114.0.0

package/package.json

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

package/src/components/base/button/button.md

@@ -7,13 +7,11 @@ button variant.
 
 A button link is a link that is styled to look like a button, semantically speaking it's a `<a>` tag
 with the necessary classes added to make it look like a button, it shares the same functionality as
-[`<gl-link>`]
+[<gl-link>](?path=/docs/base-link--docs)
 
 > Note: Setting a `target` attribute without a `href` attribute, will not create any side effects.
 > Without the presence of a `href` attribute, this component will render a `<button>`.
 
-[`<gl-link>`]: ./?path=/story/base-link--default-link
-
 ## Icon-only button
 
 Icon-only buttons must have an accessible name.
@@ -23,6 +21,66 @@ You can provide one with the `aria-label` attribute, which is read out by screen
 <gl-button icon="close" aria-label="Close" />
 ```
 
+## Type
+
+You can specify the button's type by setting the prop `type` to `button`, `submit` or `reset`.
+The default type is `button`.
+
+Note the `type` prop has no effect when either `href` or `to` props are set.
+
+## Sizing
+
+Specify `small` or `medium` via the `size` prop. Defaults to `medium`.
+
+```html
+<gl-button size="small">Small Button</gl-button>
+<gl-button>Default Button (medium)</gl-button>
+<gl-button size="medium">Medium Button</gl-button>
+```
+
+## Categories
+
+Use the `category` prop to set the button category to `primary`, `secondary`, or `tertiary`.
+Defaults to `primary`.
+
+## Variants
+
+Use the `variant` prop to set the button variant to `default`, `confirm`, `danger`, `dashed`, or `link`.
+Defaults to `default`.
+
+## Block level buttons
+
+Create block level buttons, those that span the full width of a parent, by setting the `block`
+prop.
+
+```html
+<gl-button block>Block Level Button</gl-button>
+```
+
+## Disabled state
+
+Set the `disabled` prop to disable button default functionality. `disabled` also works with buttons
+rendered as `<a>` elements and `<router-link>` (i.e. with the `href` or `to` prop set).
+
+```html
+<gl-button disabled>Disabled</gl-button>
+```
+
+## Router link support
+
+Refer to the [Router support](?path=/docs/base-link--docs#router-links) reference docs for
+the various supported `<router-link>` related props.
+
+## Accessibility
+
+When the `href` prop is set to `'#'`, `<gl-button>` will render a link (`<a>`) element with attribute
+`role="button"` set and appropriate keydown listeners (<kbd>Enter</kbd> and <kbd>Space</kbd>) so
+that the link acts like a native HTML `<button>` for screen reader and keyboard-only users. When
+disabled, the `aria-disabled="true"` attribute will be set on the `<a>` element.
+
+When the `href` is set to any other value (or the `to` prop is used), `role="button"` will not be
+added, nor will the keyboard event listeners be enabled.
+
 ## Label button
 
 A label button renders a non-interactive `span` styled as a button. This can be especially useful

package/src/components/base/button/button.vue

@@ -1,79 +1,219 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { BButton } from '../../../vendor/bootstrap-vue/src/components/button/button';
+import GlLink from '../link/link.vue';
 import {
   buttonCategoryOptions,
   buttonVariantOptions,
   buttonSizeOptions,
+  linkVariantUnstyled,
 } from '../../../utils/constants';
-import { logWarning } from '../../../utils/utils';
+import { logWarning, stopEvent } from '../../../utils/utils';
 import { isSlotEmpty } from '../../../utils/is_slot_empty';
 import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
+import { isEvent } from '../../../vendor/bootstrap-vue/src/utils/inspect';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
+import { ENTER, SPACE } from '../new_dropdowns/constants';
 
 export default {
   name: 'GlButton',
   components: {
-    BButton,
     GlIcon,
     GlLoadingIcon,
   },
   mixins: [SafeLinkMixin],
   props: {
+    /**
+     * Set the category of the button.
+     */
     category: {
       type: String,
       required: false,
       default: buttonCategoryOptions.primary,
       validator: (value) => Object.keys(buttonCategoryOptions).includes(value),
     },
+    /**
+     * Set the variant of the button.
+     */
     variant: {
       type: String,
       required: false,
       default: buttonVariantOptions.default,
       validator: (value) => Object.keys(buttonVariantOptions).includes(value),
     },
+    /**
+     * Specify the size of the button. Options are `small` and `medium`.
+     */
     size: {
       type: String,
       required: false,
       default: 'medium',
       validator: (value) => Object.keys(buttonSizeOptions).includes(value),
     },
+    /**
+     * Style the button as selected.
+     */
     selected: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Specify an icon to render in the button.
+     */
     icon: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Render a non-interactive label button, a `span` styled as a button.
+     */
     label: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Set the loading state of the button.
+     */
     loading: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * CSS classes to add to the button text.
+     */
     buttonTextClasses: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Renders a 100% width button (expands to the width of its parent container).
+     */
     block: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Specify the HTML tag to render instead of the default tag.
+     */
+    tag: {
+      type: String,
+      required: false,
+      default: 'button',
+    },
+    /**
+     * The value to set the button's `type` attribute to. Can be one of `button`, `submit`, or `reset`.
+     */
+    type: {
+      type: String,
+      required: false,
+      default: 'button',
+      validator: (value) => ['button', 'submit', 'reset'].includes(value),
+    },
+    /**
+     * Disables the component's functionality and places it in a disabled state.
+     */
     disabled: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Denotes the target URL of the link for standard links.
+     */
+    href: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * Skips sanitization of href if true. This should be used sparingly.
+     * Consult security team before setting to true.
+     */
+    isUnsafeLink: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Sets the 'rel' attribute on the rendered link.
+     */
+    rel: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * Sets the 'target' attribute on the rendered link.
+     */
+    target: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * Places the component in the active state with active styling
+     */
+    active: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * <router-link> prop: Denotes the target route of the link.
+     * When clicked, the value of the to prop will be passed to `router.push()` internally,
+     * so the value can be either a string or a Location descriptor object.
+     */
+    to: {
+      type: [Object, String],
+      required: false,
+      default: undefined,
+    },
+    /**
+     * <router-link> prop: Configure the active CSS class applied when the link is active.
+     */
+    activeClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * <router-link> prop: Configure the active CSS class applied when the link is active with exact match.
+     */
+    exactActiveClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * <router-link> prop: Setting the replace prop will call `router.replace()` instead of `router.push()`
+     * when clicked, so the navigation will not leave a history record.
+     */
+    replace: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * <nuxt-link> prop: To improve the responsiveness of your Nuxt.js applications, when the link will be displayed within the viewport,
+     * Nuxt.js will automatically prefetch the code splitted page. Setting `prefetch` to `true` or `false` will overwrite the default value of `router.prefetchLinks`
+     */
+    prefetch: {
+      type: Boolean,
+      required: false,
+      // Must be `null` to fall back to the value defined in the
+      // `nuxt.config.js` configuration file for `router.prefetchLinks`
+      // We convert `null` to `undefined`, so that Nuxt.js will use the
+      // compiled default
+      // Vue treats `undefined` as default of `false` for Boolean props,
+      // so we must set it as `null` here to be a true tri-state prop
+      default: null,
+    },
   },
   computed: {
     hasIcon() {
@@ -86,7 +226,7 @@ export default {
       return this.disabled || this.loading;
     },
     buttonClasses() {
-      const classes = ['gl-button'];
+      const classes = ['btn', 'gl-button', `btn-${this.variant}`, `btn-${this.buttonSize}`];
 
       if (this.category !== buttonCategoryOptions.primary) {
         classes.push(`btn-${this.variant}-${this.category}`);
@@ -96,10 +236,12 @@ export default {
         'btn-icon': this.hasIconOnly,
         'button-ellipsis-horizontal': this.hasIconOnly && this.icon === 'ellipsis_h',
         selected: this.selected,
+        'btn-block': this.displayBlock,
+        disabled: this.disabled,
       });
 
       if (this.label) {
-        classes.push('btn', 'btn-label', `btn-${this.buttonSize}`);
+        classes.push('btn', 'btn-label');
       }
 
       return classes;
@@ -110,6 +252,83 @@ export default {
     displayBlock() {
       return !this.label && this.block;
     },
+    isLink() {
+      return this.href || this.to;
+    },
+    isHashLink() {
+      return this.isLink && this.href === '#';
+    },
+    isButton() {
+      return this.componentIs === 'button';
+    },
+    isNonStandardTag() {
+      if (this.label) {
+        return false;
+      }
+
+      return !this.isLink && !this.isButton;
+    },
+    tabindex() {
+      // When disabled remove links and non-standard tags from tab order
+      if (this.disabled) {
+        return this.isLink || this.isNonStandardTag ? '-1' : this.$attrs.tabindex;
+      }
+
+      // Add hash links and non-standard tags to tab order
+      return this.isNonStandardTag || this.isHashLink ? '0' : this.$attrs.tabindex;
+    },
+    computedPropsAndAttributes() {
+      const base = {
+        // Type only used for "real" buttons
+        type: this.isButton ? this.type : null,
+        // Disabled only set on "real" buttons
+        disabled: this.isButton ? this.isButtonDisabled : null,
+        // We add a role of button when the tag is not a link or button or when link has `href` of `#`
+        role: this.isNonStandardTag || this.isHashLink ? 'button' : this.$attrs?.role,
+        // We set the `aria-disabled` state for non-standard tags
+        ...(this.isNonStandardTag ? { 'aria-disabled': String(this.disabled) } : {}),
+        tabindex: this.tabindex,
+      };
+
+      if (this.isLink) {
+        return {
+          ...this.$attrs,
+          ...base,
+          variant: linkVariantUnstyled,
+          disabled: this.disabled,
+          href: this.href,
+          isUnsafeLink: this.isUnsafeLink,
+          rel: this.rel,
+          target: this.target,
+          active: this.active,
+          to: this.to,
+          activeClass: this.activeClass,
+          exactActiveClass: this.exactActiveClass,
+          replace: this.replace,
+          prefetch: this.prefetch,
+        };
+      }
+
+      return { ...this.$attrs, ...base };
+    },
+    computedListeners() {
+      return {
+        click: this.onClick,
+        keydown: this.onKeydown,
+        ...this.$listeners,
+      };
+    },
+    componentIs() {
+      if (this.label) {
+        return 'span';
+      }
+
+      if (this.isLink) {
+        return GlLink;
+      }
+
+      return this.tag;
+    },
   },
   mounted() {
     // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
@@ -120,20 +339,36 @@ export default {
       );
     }
   },
+  methods: {
+    onKeydown(event) {
+      // Skip if disabled
+      // Add SPACE keydown handler for link has `href` of `#`
+      // Add ENTER handler for non-standard tags
+      if (!this.disabled && (this.isNonStandardTag || this.isHashLink)) {
+        const { code } = event;
+
+        if (code === SPACE || (code === ENTER && this.isNonStandardTag)) {
+          const target = event.currentTarget || event.target;
+          stopEvent(event, { propagation: false });
+          target.click();
+        }
+      }
+    },
+    onClick(event) {
+      if (this.disabled && isEvent(event)) {
+        stopEvent(event);
+      }
+    },
+  },
 };
 </script>
 <template>
   <component
-    :is="label ? 'span' : 'b-button'"
-    v-bind="$attrs"
+    :is="componentIs"
+    v-bind="computedPropsAndAttributes"
     v-safe-link:[safeLinkConfig]
-    :block="displayBlock"
-    :target="target"
-    :variant="variant"
-    :size="buttonSize"
-    :disabled="isButtonDisabled"
     :class="buttonClasses"
-    v-on="$listeners"
+    v-on="computedListeners"
   >
     <gl-loading-icon v-if="loading" inline class="gl-button-icon gl-button-loading-indicator" />
     <gl-icon v-if="hasIcon && !(hasIconOnly && loading)" class="gl-button-icon" :name="icon" />

package/src/scss/typography.scss

@@ -20,6 +20,16 @@ caption {
   @apply gl-text-subtle;
 }
 
+kbd {
+  @apply gl-inline-block gl-text-default gl-bg-subtle gl-border gl-border-b-strong gl-leading-1;
+  font-size: 87.5%;
+  padding: 3px 5px;
+  vertical-align: unset;
+  border-image: none;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 var(--gl-border-color-strong);
+}
+
 .table {
   @apply gl-w-full gl-mb-3 gl-text-default gl-bg-transparent;
 

package/src/vendor/bootstrap/scss/_code.scss

@@ -10,23 +10,6 @@ code {
   }
 }
 
-// User input typically entered via keyboard
-kbd {
-  padding: $kbd-padding-y $kbd-padding-x;
-  @include font-size($kbd-font-size);
-  color: $kbd-color;
-  background-color: $kbd-bg;
-  @include border-radius($border-radius-sm);
-  @include box-shadow($kbd-box-shadow);
-
-  kbd {
-    padding: 0;
-    @include font-size(100%);
-    font-weight: $nested-kbd-font-weight;
-    @include box-shadow(none);
-  }
-}
-
 // Blocks of code
 pre {
   display: block;

package/src/vendor/bootstrap/scss/_variables.scss

@@ -339,7 +339,6 @@ $mark-padding:                .2em !default;
 
 $dt-font-weight:              $font-weight-bold !default;
 
-$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;
 $nested-kbd-font-weight:      $font-weight-bold !default;
 
 $list-inline-padding:         .5rem !default;
@@ -1129,12 +1128,6 @@ $close-text-shadow:                 0 1px 0 $white !default;
 $code-font-size:                    87.5% !default;
 $code-color:                        $pink !default;
 
-$kbd-padding-y:                     .2rem !default;
-$kbd-padding-x:                     .4rem !default;
-$kbd-font-size:                     $code-font-size !default;
-$kbd-color:                         $white !default;
-$kbd-bg:                            $gray-900 !default;
-
 $pre-color:                         $gray-900 !default;
 $pre-scrollable-max-height:         340px !default;