@gitlab/ui 112.2.2 → 112.3.0

package/src/components/base/nav/nav.md

@@ -1,6 +1,184 @@
-The navigation component is built with flexbox and provides a strong foundation for building all
-types of navigation components.
+## Overview
 
-## `GlNavItem`
+The base `<gl-nav>` component is built with flexbox and provides a strong foundation for building all
+types of navigation components. It includes some style overrides (for working with lists), some link
+padding for larger hit areas, and basic disabled styling. No active states are included in the base
+nav.
 
-Use `GlNavItem` to add actionable links (or router links) to your nav. `GlNavItem` wraps [`BNavItem`](https://bootstrap-vue.org/docs/components/navbar#b-nav-item).
+`<gl-nav>` supports the `<gl-nav-item>` child component for actionable links (or router-links).
+
+## Link appearance
+
+Two style variations are supported: `tabs` and `pills`, which support `active` state styling. These
+variants are mutually exclusive - use only one style or the other.
+
+### Tab style
+
+Make the nav look like tabs by setting the `tabs` prop.
+
+```html
+<div>
+  <gl-nav tabs>
+    <gl-nav-item active>Active</gl-nav-item>
+    <gl-nav-item>Link</gl-nav-item>
+    <gl-nav-item>Another Link</gl-nav-item>
+    <gl-nav-item disabled>Disabled</gl-nav-item>
+  </gl-nav>
+</div>
+```
+
+### Pill style
+
+Use the pill style by setting the `pills` prop.
+
+```html
+<div>
+  <gl-nav pills>
+    <gl-nav-item active>Active</gl-nav-item>
+    <gl-nav-item>Link</gl-nav-item>
+    <gl-nav-item>Another Link</gl-nav-item>
+    <gl-nav-item disabled>Disabled</gl-nav-item>
+  </gl-nav>
+</div>
+```
+
+### Small
+
+Make the nav smaller by setting the `small` prop.
+
+```html
+<div>
+  <gl-nav small>
+    <gl-nav-item active>Active</gl-nav-item>
+    <gl-nav-item>Link</gl-nav-item>
+    <gl-nav-item>Another Link</gl-nav-item>
+    <gl-nav-item disabled>Disabled</gl-nav-item>
+  </gl-nav>
+</div>
+```
+
+## Fill and justify
+
+Force your `<gl-nav>` content to extend the full available width.
+
+### Fill
+
+To proportionately fill all available space with your `<gl-nav-item>` components, set the `fill`
+prop. Notice that all horizontal space is occupied, but not every nav item has the same width.
+
+```html
+<div>
+  <gl-nav tabs fill>
+    <gl-nav-item active>Active</gl-nav-item>
+    <gl-nav-item>Link</gl-nav-item>
+    <gl-nav-item>Link with a long name </gl-nav-item>
+    <gl-nav-item disabled>Disabled</gl-nav-item>
+  </gl-nav>
+</div>
+```
+
+### Justified
+
+For equal-width elements, set the `justified` prop instead. All horizontal space will be occupied by
+nav links, but unlike `fill` above, every `<gl-nav-item>` will be the same width.
+
+```html
+<div>
+  <gl-nav tabs justified>
+    <gl-nav-item active>Active</gl-nav-item>
+    <gl-nav-item>Link</gl-nav-item>
+    <gl-nav-item>Link with a long name </gl-nav-item>
+    <gl-nav-item disabled>Disabled</gl-nav-item>
+  </gl-nav>
+</div>
+```
+
+## Alignment
+
+To align your `<gl-nav-item>` components, use the `align` prop. Available values are `left`, `center`
+and `right`.
+
+```html
+<div>
+  <gl-nav tabs align="center">
+    <gl-nav-item active>Active</gl-nav-item>
+    <gl-nav-item>Link</gl-nav-item>
+    <gl-nav-item>Link with a long name </gl-nav-item>
+    <gl-nav-item disabled>Disabled</gl-nav-item>
+  </gl-nav>
+</div>
+```
+
+## Tabbed local content support
+
+See the [`<gl-tabs>`](?path=/docs/base-tabs--docs) component for creating tabbable panes of local
+content (not suited for navigation).
+
+## Card integration
+
+Use a `<gl-nav>` in a [`<gl-card>`](?path=/docs/base-card--docs) header, by enabling the
+`card-header` prop on `<gl-nav>` and setting either the `pills` or `tabs` props:
+
+```html
+<div>
+  <gl-card title="Card Title">
+    <template #header>
+      <gl-nav card-header tabs>
+        <gl-nav-item active>Active</gl-nav-item>
+        <gl-nav-item>Inactive</gl-nav-item>
+      </gl-nav>
+    </template>
+
+    <template #default>
+      <p>With supporting text below as a natural lead-in to additional content.</p>
+      <gl-button variant="primary">Go somewhere</gl-button>
+    </template>
+  </gl-card>
+</div>
+```
+
+**Plain style:**
+
+The `card-header` prop is only needed when you are applying `tabs` or `pills` style. Note that
+we do not have special styling for `active` state plain style nav items.
+
+```html
+<div>
+  <gl-card title="Card Title">
+    <template #header>
+      <gl-nav>
+        <gl-nav-item active>Active</gl-nav-item>
+        <gl-nav-item>Inactive</gl-nav-item>
+      </gl-nav>
+    </template>
+
+    <template #default>
+      <p>pWith supporting text below as a natural lead-in to additional content.</p>
+      <gl-button variant="primary">Go somewhere</gl-button>
+    </template>
+  </gl-card>
+</div>
+```
+
+## Accessibility
+
+If you're using `<gl-nav>` to provide a navigation bar, be sure to add a `role="navigation"` to the
+most logical parent container of `<gl-nav>`, or wrap a `<nav>` element around `<gl-nav>`. Do **not**
+add the role to the `<gl-nav>` itself, as this would prevent it from being announced as an actual
+list by assistive technologies.
+
+### Tabbed interface accessibility
+
+Note that navigation bars, even if visually styled as tabs, should **not** be given
+`role="tablist"`, `role="tab"` or `role="tabpanel"` attributes. These are only appropriate for
+[tabbed interfaces](?path=/docs/base-tabs--docs) that do not change the URL or `$route`, as
+described in the [WAI ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel).
+See [`<gl-tabs>`](?path=/docs/base-tabs--docs) for dynamic tabbed interfaces that are compliant with
+WAI ARIA.
+
+## See also
+
+- [tabs](?path=/docs/base-tabs--docs) to create tabbable panes of local content, even via dropdown
+  menus.
+- [Router Link Support reference](?path=/docs/base-link--docs#router-link-support) for information
+  about router-link specific props available on `<gl-nav-item>`

package/src/components/base/nav/nav.vue

@@ -1,17 +1,70 @@
 <script>
-import { BNav } from '../../../vendor/bootstrap-vue/src/components/nav/nav';
-
 export default {
   name: 'GlNav',
-  components: {
-    BNav,
+  props: {
+    /**
+     * Align the nav items in the nav: 'start' (or 'left'), 'center', 'end' (or 'right')
+     */
+    align: { type: String, required: false, default: '' },
+    /**
+     * Set this prop when the nav is placed inside a card header
+     */
+    cardHeader: { type: Boolean, required: false, default: false },
+    /**
+     * Proportionately fills all horizontal space with nav items.
+     * All horizontal space is occupied, but not every nav item has the same width
+     */
+    fill: { type: Boolean, required: false, default: false },
+    /**
+     * Fills all horizontal space with nav items, but unlike 'fill', every nav item will be the same width
+     */
+    justified: { type: Boolean, required: false, default: false },
+    /**
+     * Renders the nav items with the appearance of pill buttons
+     */
+    pills: { type: Boolean, required: false, default: false },
+    /**
+     * Makes the nav smaller
+     */
+    small: { type: Boolean, required: false, default: false },
+    /**
+     * Renders the nav items with the appearance of tabs
+     */
+    tabs: { type: Boolean, required: false, default: false },
+    /**
+     * Specify the HTML tag to render instead of the default tag
+     */
+    tag: { type: String, required: false, default: 'ul' },
+  },
+  computed: {
+    justifyContent() {
+      if (!this.align) return '';
+
+      const alignMapping = {
+        left: 'start',
+        right: 'end',
+      };
+
+      return `justify-content-${alignMapping[this.align] || this.align}`;
+    },
+    classes() {
+      return {
+        'nav-tabs': this.tabs,
+        'nav-pills': this.pills && !this.tabs,
+        'card-header-tabs': this.cardHeader && this.tabs,
+        'card-header-pills': this.cardHeader && this.pills && !this.tabs,
+        'nav-fill': this.fill,
+        'nav-justified': this.justified,
+        [this.justifyContent]: this.align,
+        small: this.small,
+      };
+    },
   },
-  inheritAttrs: false,
 };
 </script>
 
 <template>
-  <b-nav v-bind="$attrs" v-on="$listeners">
+  <component :is="tag" class="nav" :class="classes" v-on="$listeners">
     <slot></slot>
-  </b-nav>
+  </component>
 </template>

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -213,10 +213,11 @@ export default {
         class="gl-search-box-by-click-history"
         icon="history"
         category="tertiary"
-        toggle-text="Toggle history"
+        toggle-text="Toggle search history"
         text-sr-only
         fluid-width
         :disabled="disabled"
+        aria-label="Recent searches history"
       >
         <template #header>
           <div
@@ -231,6 +232,7 @@ export default {
             v-for="(item, idx) in historyItems"
             :key="idx"
             class="gl-search-box-by-click-history-item"
+            :aria-label="`Select recent search: ${item || 'empty search'}`"
             @action="selectHistoryItem(item)"
           >
             <template #list-item>
@@ -239,9 +241,13 @@ export default {
             </template>
           </gl-disclosure-dropdown-item>
         </template>
-        <div v-else class="gl-px-4 gl-py-2 gl-text-sm gl-text-subtle">
+        <gl-disclosure-dropdown-item
+          v-else
+          class="gl-px-4 gl-py-2 gl-text-sm gl-text-subtle"
+          :aria-label="`Select recent search: ${noRecentSearchesText}`"
+        >
           {{ noRecentSearchesText }}
-        </div>
+        </gl-disclosure-dropdown-item>
 
         <template v-if="historyItems.length" #footer>
           <div

package/src/tokens/build/css/tokens.css

@@ -24,11 +24,11 @@
   --gl-color-blue-300: #63a6e9;
   --gl-color-blue-400: #428fdc;
   --gl-color-blue-500: #1f75cb;
-  --gl-color-blue-600: #1068bf;
-  --gl-color-blue-700: #0b5cad;
-  --gl-color-blue-800: #064787;
-  --gl-color-blue-900: #033464;
-  --gl-color-blue-950: #002850;
+  --gl-color-blue-600: #2f68b4;
+  --gl-color-blue-700: #2f5ca0;
+  --gl-color-blue-800: #284779;
+  --gl-color-blue-900: #213454;
+  --gl-color-blue-950: #1d283e;
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #fbfafd;
   --gl-color-neutral-50: #ececef;
@@ -49,44 +49,44 @@
   --gl-color-green-300: #52b87a;
   --gl-color-green-400: #2da160;
   --gl-color-green-500: #108548;
-  --gl-color-green-600: #217645;
-  --gl-color-green-700: #24663b;
-  --gl-color-green-800: #0d532a;
-  --gl-color-green-900: #0a4020;
-  --gl-color-green-950: #072b15;
+  --gl-color-green-600: #2f7549;
+  --gl-color-green-700: #306440;
+  --gl-color-green-800: #225131;
+  --gl-color-green-900: #1e3e28;
+  --gl-color-green-950: #17291c;
   --gl-color-orange-50: #fdf1dd;
   --gl-color-orange-100: #f5d9a8;
   --gl-color-orange-200: #e9be74;
   --gl-color-orange-300: #d99530;
   --gl-color-orange-400: #c17d10;
   --gl-color-orange-500: #ab6100;
-  --gl-color-orange-600: #9e5400;
-  --gl-color-orange-700: #8f4700;
-  --gl-color-orange-800: #703800;
-  --gl-color-orange-900: #5c2900;
-  --gl-color-orange-950: #421f00;
+  --gl-color-orange-600: #995715;
+  --gl-color-orange-700: #894b16;
+  --gl-color-orange-800: #693c14;
+  --gl-color-orange-900: #532e16;
+  --gl-color-orange-950: #382315;
   --gl-color-purple-50: #f4f0ff;
   --gl-color-purple-100: #e1d8f9;
   --gl-color-purple-200: #cbbbf2;
   --gl-color-purple-300: #ac93e6;
   --gl-color-purple-400: #9475db;
   --gl-color-purple-500: #7b58cf;
-  --gl-color-purple-600: #694cc0;
-  --gl-color-purple-700: #5943b6;
-  --gl-color-purple-800: #453894;
-  --gl-color-purple-900: #2f2a6b;
-  --gl-color-purple-950: #232150;
+  --gl-color-purple-600: #6a4fb4;
+  --gl-color-purple-700: #5c47a6;
+  --gl-color-purple-800: #493c83;
+  --gl-color-purple-900: #342d59;
+  --gl-color-purple-950: #27243e;
   --gl-color-red-50: #fcf1ef;
   --gl-color-red-100: #fdd4cd;
   --gl-color-red-200: #fcb5aa;
   --gl-color-red-300: #f6806d;
   --gl-color-red-400: #ec5941;
   --gl-color-red-500: #dd2b0e;
-  --gl-color-red-600: #c91c00;
-  --gl-color-red-700: #ae1800;
-  --gl-color-red-800: #8d1300;
-  --gl-color-red-900: #660e00;
-  --gl-color-red-950: #4d0a00;
+  --gl-color-red-600: #c02f12;
+  --gl-color-red-700: #a32c12;
+  --gl-color-red-800: #812713;
+  --gl-color-red-900: #582014;
+  --gl-color-red-950: #3e1a14;
   --gl-color-data-green-50: #ddfab7;
   --gl-color-data-green-100: #c6ed94;
   --gl-color-data-green-200: #b0d97b;
@@ -413,11 +413,11 @@
   --blue-300: #63a6e9;
   --blue-400: #428fdc;
   --blue-500: #1f75cb;
-  --blue-600: #1068bf;
-  --blue-700: #0b5cad;
-  --blue-800: #064787;
-  --blue-900: #033464;
-  --blue-950: #002850;
+  --blue-600: #2f68b4;
+  --blue-700: #2f5ca0;
+  --blue-800: #284779;
+  --blue-900: #213454;
+  --blue-950: #1d283e;
   --gray-10: #fbfafd;
   --gray-50: #ececef;
   --gray-100: #dcdcde;
@@ -436,44 +436,44 @@
   --green-300: #52b87a;
   --green-400: #2da160;
   --green-500: #108548;
-  --green-600: #217645;
-  --green-700: #24663b;
-  --green-800: #0d532a;
-  --green-900: #0a4020;
-  --green-950: #072b15;
+  --green-600: #2f7549;
+  --green-700: #306440;
+  --green-800: #225131;
+  --green-900: #1e3e28;
+  --green-950: #17291c;
   --orange-50: #fdf1dd;
   --orange-100: #f5d9a8;
   --orange-200: #e9be74;
   --orange-300: #d99530;
   --orange-400: #c17d10;
   --orange-500: #ab6100;
-  --orange-600: #9e5400;
-  --orange-700: #8f4700;
-  --orange-800: #703800;
-  --orange-900: #5c2900;
-  --orange-950: #421f00;
+  --orange-600: #995715;
+  --orange-700: #894b16;
+  --orange-800: #693c14;
+  --orange-900: #532e16;
+  --orange-950: #382315;
   --purple-50: #f4f0ff;
   --purple-100: #e1d8f9;
   --purple-200: #cbbbf2;
   --purple-300: #ac93e6;
   --purple-400: #9475db;
   --purple-500: #7b58cf;
-  --purple-600: #694cc0;
-  --purple-700: #5943b6;
-  --purple-800: #453894;
-  --purple-900: #2f2a6b;
-  --purple-950: #232150;
+  --purple-600: #6a4fb4;
+  --purple-700: #5c47a6;
+  --purple-800: #493c83;
+  --purple-900: #342d59;
+  --purple-950: #27243e;
   --red-50: #fcf1ef;
   --red-100: #fdd4cd;
   --red-200: #fcb5aa;
   --red-300: #f57f6c;
   --red-400: #ec5941;
   --red-500: #dd2b0e;
-  --red-600: #c91c00;
-  --red-700: #ae1800;
-  --red-800: #8d1300;
-  --red-900: #660e00;
-  --red-950: #4d0a00;
+  --red-600: #c02f12;
+  --red-700: #a32c12;
+  --red-800: #812713;
+  --red-900: #582014;
+  --red-950: #3e1a14;
   --brand-charcoal: #171321; /* Use color.brand-charcoal instead. */
   --brand-orange-01: #fca326; /* Use color.brand-orange.01p instead. */
   --brand-orange-02: #fc6d26; /* Use color.brand-orange.02p instead. */

package/src/tokens/build/css/tokens.dark.css

@@ -24,11 +24,11 @@
   --gl-color-blue-300: #63a6e9;
   --gl-color-blue-400: #428fdc;
   --gl-color-blue-500: #1f75cb;
-  --gl-color-blue-600: #1068bf;
-  --gl-color-blue-700: #0b5cad;
-  --gl-color-blue-800: #064787;
-  --gl-color-blue-900: #033464;
-  --gl-color-blue-950: #002850;
+  --gl-color-blue-600: #2f68b4;
+  --gl-color-blue-700: #2f5ca0;
+  --gl-color-blue-800: #284779;
+  --gl-color-blue-900: #213454;
+  --gl-color-blue-950: #1d283e;
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #fbfafd;
   --gl-color-neutral-50: #ececef;
@@ -49,44 +49,44 @@
   --gl-color-green-300: #52b87a;
   --gl-color-green-400: #2da160;
   --gl-color-green-500: #108548;
-  --gl-color-green-600: #217645;
-  --gl-color-green-700: #24663b;
-  --gl-color-green-800: #0d532a;
-  --gl-color-green-900: #0a4020;
-  --gl-color-green-950: #072b15;
+  --gl-color-green-600: #2f7549;
+  --gl-color-green-700: #306440;
+  --gl-color-green-800: #225131;
+  --gl-color-green-900: #1e3e28;
+  --gl-color-green-950: #17291c;
   --gl-color-orange-50: #fdf1dd;
   --gl-color-orange-100: #f5d9a8;
   --gl-color-orange-200: #e9be74;
   --gl-color-orange-300: #d99530;
   --gl-color-orange-400: #c17d10;
   --gl-color-orange-500: #ab6100;
-  --gl-color-orange-600: #9e5400;
-  --gl-color-orange-700: #8f4700;
-  --gl-color-orange-800: #703800;
-  --gl-color-orange-900: #5c2900;
-  --gl-color-orange-950: #421f00;
+  --gl-color-orange-600: #995715;
+  --gl-color-orange-700: #894b16;
+  --gl-color-orange-800: #693c14;
+  --gl-color-orange-900: #532e16;
+  --gl-color-orange-950: #382315;
   --gl-color-purple-50: #f4f0ff;
   --gl-color-purple-100: #e1d8f9;
   --gl-color-purple-200: #cbbbf2;
   --gl-color-purple-300: #ac93e6;
   --gl-color-purple-400: #9475db;
   --gl-color-purple-500: #7b58cf;
-  --gl-color-purple-600: #694cc0;
-  --gl-color-purple-700: #5943b6;
-  --gl-color-purple-800: #453894;
-  --gl-color-purple-900: #2f2a6b;
-  --gl-color-purple-950: #232150;
+  --gl-color-purple-600: #6a4fb4;
+  --gl-color-purple-700: #5c47a6;
+  --gl-color-purple-800: #493c83;
+  --gl-color-purple-900: #342d59;
+  --gl-color-purple-950: #27243e;
   --gl-color-red-50: #fcf1ef;
   --gl-color-red-100: #fdd4cd;
   --gl-color-red-200: #fcb5aa;
   --gl-color-red-300: #f6806d;
   --gl-color-red-400: #ec5941;
   --gl-color-red-500: #dd2b0e;
-  --gl-color-red-600: #c91c00;
-  --gl-color-red-700: #ae1800;
-  --gl-color-red-800: #8d1300;
-  --gl-color-red-900: #660e00;
-  --gl-color-red-950: #4d0a00;
+  --gl-color-red-600: #c02f12;
+  --gl-color-red-700: #a32c12;
+  --gl-color-red-800: #812713;
+  --gl-color-red-900: #582014;
+  --gl-color-red-950: #3e1a14;
   --gl-color-data-green-50: #ddfab7;
   --gl-color-data-green-100: #c6ed94;
   --gl-color-data-green-200: #b0d97b;