@gitlab/ui 38.1.0 → 38.3.0

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -1,8 +1,9 @@
 <script>
+import { cloneDeep } from 'lodash';
 import { COMMA } from '../../../utils/constants';
 import GlToken from '../token/token.vue';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
-import { TERM_TOKEN_TYPE } from './filtered_search_utils';
+import { createTerm } from './filtered_search_utils';
 
 const SEGMENT_TITLE = 'TYPE';
 const SEGMENT_OPERATOR = 'OPERATOR';
@@ -68,6 +69,7 @@ export default {
   data() {
     return {
       activeSegment: null,
+      tokenValue: cloneDeep(this.value),
     };
   },
 
@@ -77,7 +79,7 @@ export default {
     },
 
     hasDataOrDataSegmentIsCurrentlyActive() {
-      return this.value.data !== '' || this.isSegmentActive(SEGMENT_DATA);
+      return this.tokenValue.data !== '' || this.isSegmentActive(SEGMENT_DATA);
     },
 
     availableTokensWithSelf() {
@@ -88,7 +90,7 @@ export default {
     },
 
     operatorDescription() {
-      const operator = this.operators.find((op) => op.value === this.value.operator);
+      const operator = this.operators.find((op) => op.value === this.tokenValue.operator);
       return this.showFriendlyText ? operator?.description : operator?.value;
     },
   },
@@ -98,7 +100,7 @@ export default {
     SEGMENT_OPERATOR,
   },
   watch: {
-    value: {
+    tokenValue: {
       deep: true,
       handler(newValue) {
         /**
@@ -111,14 +113,24 @@ export default {
       },
     },
 
+    value: {
+      handler(newValue, oldValue) {
+        if (newValue?.data === oldValue?.data && newValue?.operator === oldValue?.operator) {
+          return;
+        }
+
+        this.tokenValue = cloneDeep(newValue);
+      },
+    },
+
     active: {
       immediate: true,
       handler(newValue) {
         if (newValue) {
           if (!this.activeSegment) {
-            this.activateSegment(this.value.data !== '' ? SEGMENT_DATA : SEGMENT_OPERATOR);
+            this.activateSegment(this.tokenValue.data !== '' ? SEGMENT_DATA : SEGMENT_OPERATOR);
           }
-        } else if (this.value.data === '') {
+        } else if (this.tokenValue.data === '') {
           this.activeSegment = null;
           /**
            * Emitted when token is about to be destroyed.
@@ -132,13 +144,13 @@ export default {
   },
 
   created() {
-    if (!('operator' in this.value)) {
+    if (!('operator' in this.tokenValue)) {
       if (this.operators.length === 1) {
         const operator = this.operators[0].value;
-        this.$emit('input', { ...this.value, operator });
+        this.$emit('input', { ...this.tokenValue, operator });
         this.activeSegment = SEGMENT_DATA;
       } else {
-        this.$emit('input', { ...this.value, operator: '' });
+        this.$emit('input', { ...this.tokenValue, operator: '' });
       }
     }
   },
@@ -166,12 +178,12 @@ export default {
     },
 
     replaceWithTermIfEmpty() {
-      if (this.value.operator === '' && this.value.data === '') {
+      if (this.tokenValue.operator === '' && this.tokenValue.data === '') {
         /**
          * Emitted when this token is converted to another type
          * @property {object} token Replacement token configuration
          */
-        this.$emit('replace', { type: TERM_TOKEN_TYPE, value: { data: this.config.title } });
+        this.$emit('replace', createTerm(this.config.title));
       }
     },
 
@@ -195,7 +207,7 @@ export default {
           this.config.dataType && this.config.dataType === newTokenConfig.dataType;
         this.$emit('replace', {
           type: newTokenConfig.type,
-          value: isCompatible ? this.value : { data: '' },
+          value: isCompatible ? this.tokenValue : { data: '' },
         });
       }
     },
@@ -212,7 +224,7 @@ export default {
         key.length === 1 &&
         !this.operators.find(({ value }) => value.startsWith(potentialValue))
       ) {
-        if (this.value.data === '') {
+        if (this.tokenValue.data === '') {
           applySuggestion(suggestedValue);
         } else {
           evt.preventDefault();
@@ -222,14 +234,14 @@ export default {
 
     activateDataSegment() {
       if (this.config.multiSelect) {
-        this.$emit('input', { ...this.value, data: '' });
+        this.$emit('input', { ...this.tokenValue, data: '' });
       }
       this.activateSegment(this.$options.segments.SEGMENT_DATA);
     },
 
     handleComplete() {
       if (this.config.multiSelect) {
-        this.$emit('input', { ...this.value, data: this.multiSelectValues.join(COMMA) });
+        this.$emit('input', { ...this.tokenValue, data: this.multiSelectValues.join(COMMA) });
       }
       /**
        * Emitted when the token entry has been completed.
@@ -242,6 +254,7 @@ export default {
     destroyByClose(event) {
       if (event.target.closest(TOKEN_CLOSE_SELECTOR)) {
         event.preventDefault();
+        event.stopPropagation();
         this.$emit('destroy');
       }
     },
@@ -275,10 +288,9 @@ export default {
         >
       </template>
     </gl-filtered-search-token-segment>
-    <!-- eslint-disable vue/no-mutating-props -->
     <gl-filtered-search-token-segment
       key="operator-segment"
-      v-model="value.operator"
+      v-model="tokenValue.operator"
       :active="isSegmentActive($options.segments.SEGMENT_OPERATOR)"
       :options="operators"
       :custom-input-keydown-handler="handleOperatorKeydown"
@@ -288,7 +300,6 @@ export default {
       @complete="activateSegment($options.segments.SEGMENT_DATA)"
       @deactivate="$emit('deactivate')"
     >
-      <!-- eslint-enable vue/no-mutating-props -->
       <template #view>
         <gl-token
           class="gl-filtered-search-token-operator"
@@ -307,7 +318,6 @@ export default {
         </div>
       </template>
     </gl-filtered-search-token-segment>
-    <!-- eslint-disable vue/no-mutating-props -->
     <!--
       Emitted when a suggestion has been selected.
       @event select
@@ -321,7 +331,7 @@ export default {
     <gl-filtered-search-token-segment
       v-if="hasDataOrDataSegmentIsCurrentlyActive"
       key="data-segment"
-      v-model="value.data"
+      v-model="tokenValue.data"
       :active="isSegmentActive($options.segments.SEGMENT_DATA)"
       :multi-select="config.multiSelect"
       :options="config.options"
@@ -334,7 +344,6 @@ export default {
       @deactivate="$emit('deactivate')"
       @split="$emit('split', $event)"
     >
-      <!-- eslint-enable vue/no-mutating-props -->
       <template #suggestions>
         <!-- @slot The suggestions (implemented with GlFilteredSearchSuggestion). -->
         <slot name="suggestions"></slot>

package/src/components/base/filtered_search/filtered_search_utils.js

@@ -39,7 +39,42 @@ export function needDenormalization(tokens) {
 
   assertValidTokens(tokens);
 
-  return tokens.some((t) => typeof t === 'string');
+  return tokens.some((t) => typeof t === 'string' || !t.id);
+}
+
+let tokenIdCounter = 0;
+const getTokenId = () => {
+  const tokenId = `token-${tokenIdCounter}`;
+  tokenIdCounter += 1;
+  return tokenId;
+};
+/**
+ * Ensure the given token has an `id` property, which `GlFilteredSearch` relies
+ * on as a unique key for the token.
+ *
+ * If the given token does not have an `id`, it returns a shallow copy of the
+ * token with an `id`. Otherwise, it returns the given token.
+ *
+ * @param {object} token The token to check.
+ * @returns {object} A token with an `id`.
+ */
+export function ensureTokenId(token) {
+  if (!token.id) {
+    return {
+      ...token,
+      id: getTokenId(),
+    };
+  }
+
+  return token;
+}
+
+export function createTerm(data = '') {
+  return {
+    id: getTokenId(),
+    type: TERM_TOKEN_TYPE,
+    value: { data },
+  };
 }
 
 export function denormalizeTokens(inputTokens) {
@@ -51,11 +86,9 @@ export function denormalizeTokens(inputTokens) {
   tokens.forEach((t) => {
     if (typeof t === 'string') {
       const stringTokens = t.split(' ').filter(Boolean);
-      stringTokens.forEach((strToken) =>
-        result.push({ type: TERM_TOKEN_TYPE, value: { data: strToken } })
-      );
+      stringTokens.forEach((strToken) => result.push(createTerm(strToken)));
     } else {
-      result.push(t);
+      result.push(ensureTokenId(t));
     }
   });
   return result;

package/src/components/base/form/form.stories.js

@@ -4,6 +4,7 @@ import {
   GlFormInput,
   GlFormSelect,
   GlFormCheckbox,
+  GlFormCheckboxGroup,
   GlButton,
 } from '../../../index';
 import { setStoryTimeout } from '../../../utils/test_utils';
@@ -16,6 +17,7 @@ export const Default = (args) => ({
     GlFormInput,
     GlFormSelect,
     GlFormCheckbox,
+    GlFormCheckboxGroup,
     GlButton,
   },
   props: Object.keys(args),

package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.documentation.js

@@ -1,31 +1,5 @@
-import examples from './examples';
 import * as description from './form_checkbox_tree.md';
-import { V_MODEL } from './models/constants';
 
 export default {
   description,
-  examples,
-  propsInfo: {
-    options: {
-      additionalInfo: 'The options tree.',
-    },
-    [V_MODEL.PROP]: {
-      additionalInfo: 'The selected options as an array of values.',
-    },
-    hideToggleAll: {
-      additionalInfo: 'Set to true to hide the "Select/unselect all" checkbox',
-    },
-    selectAllLabel: {
-      additionalInfo: 'Label for the toggle all checkbox when some or all options are unchecked',
-    },
-    unselectAllLabel: {
-      additionalInfo: 'Label for the toggle all checkbox when all options are checked',
-    },
-  },
-  events: [
-    {
-      event: V_MODEL.EVENT,
-      description: 'Emitted the selection changes.',
-    },
-  ],
 };

package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.md

@@ -1,7 +1,3 @@
-# GlFormCheckboxTree
-
-<!-- STORY -->
-
 `GlFormCheckboxTree` lets you display an options structure where any option can have n-level of
 children. It can be useful for creating a search filter that has nested facets.
 

package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.stories.js

@@ -1,5 +1,3 @@
-import { withKnobs, boolean } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import GlToken from '../../token/token.vue';
 import readme from './form_checkbox_tree.md';
 import GlFormCheckboxTree from './form_checkbox_tree.vue';
@@ -9,95 +7,128 @@ const components = {
   GlToken,
 };
 
-documentedStoriesOf('base/form/form-checkbox-tree', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: {
-      hideToggleAll: {
-        default: boolean('Hide toggle all checkbox?', false),
+const defaultOptions = [
+  {
+    value: 1,
+    label: 'Felidae',
+    children: [
+      {
+        value: 11,
+        label: 'Lion',
+      },
+      {
+        value: 12,
+        label: 'Felinae',
+        children: [
+          {
+            value: 121,
+            label: 'Cheetah',
+          },
+          {
+            value: 122,
+            label: 'Ocelot',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 2,
+    label: 'Canidae',
+    children: [
+      {
+        value: 21,
+        label: 'Caninae',
+        children: [
+          {
+            value: 211,
+            label: 'Canis lupus',
+            children: [
+              {
+                value: 2112,
+                label: 'Wolf',
+              },
+              {
+                value: 2113,
+                label: 'Himalayan wolf',
+              },
+              {
+                value: 2114,
+                label: 'Dingo',
+              },
+            ],
+          },
+          {
+            value: 212,
+            label: 'Black-backed jackal',
+          },
+        ],
+      },
+      {
+        value: 22,
+        label: 'Fennec fox',
+      },
+    ],
+  },
+  {
+    value: 3,
+    label: 'Karabair',
+  },
+  {
+    value: 4,
+    label: 'Okapi',
+  },
+];
+
+const defaultValue = (prop) => GlFormCheckboxTree.props[prop].default;
+
+const generateProps = ({
+  options = defaultOptions,
+  hideToggleAll = defaultValue('hideToggleAll'),
+  selectAllLabel = defaultValue('selectAllLabel'),
+  unselectAllLabel = defaultValue('unselectAllLabel'),
+  label = defaultValue('label'),
+  labelSrOnly = defaultValue('labelSrOnly'),
+} = {}) => ({
+  options,
+  hideToggleAll,
+  selectAllLabel,
+  unselectAllLabel,
+  label,
+  labelSrOnly,
+});
+
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  data: () => ({
+    checked: [1, 11, 12, 121, 122, 2113, 3],
+  }),
+  components,
+  template: `
+    <div>
+      <gl-form-checkbox-tree
+        v-model="checked"
+        :options="options"
+        :hide-toggle-all="hideToggleAll"
+        :select-all-label="selectAllLabel"
+        :unselect-all-label="unselectAllLabel"
+        :label="label"
+        :label-sr-only="labelSrOnly" />
+      Selected options:
+      <gl-token v-for="value in checked" :key="value" class="gl-mr-1" view-only>{{ value }}</gl-token>
+    </div>
+  `,
+});
+Default.args = generateProps();
+
+export default {
+  title: 'base/form/form-checkbox-tree',
+  component: GlFormCheckboxTree,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
       },
     },
-    data: () => ({
-      checked: [1, 11, 12, 121, 122, 2113, 3],
-      options: [
-        {
-          value: 1,
-          label: 'Felidae',
-          children: [
-            {
-              value: 11,
-              label: 'Lion',
-            },
-            {
-              value: 12,
-              label: 'Felinae',
-              children: [
-                {
-                  value: 121,
-                  label: 'Cheetah',
-                },
-                {
-                  value: 122,
-                  label: 'Ocelot',
-                },
-              ],
-            },
-          ],
-        },
-        {
-          value: 2,
-          label: 'Canidae',
-          children: [
-            {
-              value: 21,
-              label: 'Caninae',
-              children: [
-                {
-                  value: 211,
-                  label: 'Canis lupus',
-                  children: [
-                    {
-                      value: 2112,
-                      label: 'Wolf',
-                    },
-                    {
-                      value: 2113,
-                      label: 'Himalayan wolf',
-                    },
-                    {
-                      value: 2114,
-                      label: 'Dingo',
-                    },
-                  ],
-                },
-                {
-                  value: 212,
-                  label: 'Black-backed jackal',
-                },
-              ],
-            },
-            {
-              value: 22,
-              label: 'Fennec fox',
-            },
-          ],
-        },
-        {
-          value: 3,
-          label: 'Karabair',
-        },
-        {
-          value: 4,
-          label: 'Okapi',
-        },
-      ],
-    }),
-    components,
-    template: `
-      <div>
-        <gl-form-checkbox-tree :hide-toggle-all="hideToggleAll" :options="options" v-model="checked" />
-        Selected options:
-        <gl-token v-for="value in checked" :key="value" class="gl-mr-1" view-only>{{ value }}</gl-token>
-      </div>
-    `,
-  }));
+  },
+};

package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.vue

@@ -34,23 +34,32 @@ export default {
       required: true,
     },
     /**
-     * Selected options
+     * The selected options as an array of values
      */
     value: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Set to true to hide the "Select/unselect all" checkbox
+     */
     hideToggleAll: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Label for the toggle all checkbox when some or all options are unchecked
+     */
     selectAllLabel: {
       type: String,
       required: false,
       default: 'Select all',
     },
+    /**
+     * Label for the toggle all checkbox when all options are checked
+     */
     unselectAllLabel: {
       type: String,
       required: false,
@@ -80,6 +89,9 @@ export default {
   watch: {
     'tree.selected': {
       handler(selected) {
+        /**
+         * Emitted when the selection changes.
+         */
         this.$emit(V_MODEL.EVENT, selected);
       },
     },

package/src/components/base/form/form_radio_group/form_radio_group.stories.js

@@ -1,4 +1,4 @@
-import { GlFormRadioGroup } from '../../../../index';
+import { GlFormRadioGroup, GlFormRadio } from '../../../../index';
 import readme from './form_radio_group.md';
 
 const defaultOptions = [
@@ -34,6 +34,7 @@ const template = `
 const Template = (args, { argTypes }) => ({
   components: {
     GlFormRadioGroup,
+    GlFormRadio,
   },
   props: Object.keys(argTypes),
   template,

package/src/components/base/markdown/markdown.scss

@@ -162,6 +162,27 @@
     @include gl-px-2;
     @include gl-py-1;
   }
+
+  .audio-container {
+    @include gl-display-inline-flex;
+    @include gl-flex-direction-column;
+    @include gl-w-full;
+
+    audio {
+      @include gl-w-full;
+    }
+
+    a {
+      @include gl-mt-3;
+
+      &::before {
+        @include gl-mr-2;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        content: '📎';
+      }
+    }
+  }
 }
 
 .gl-compact-markdown {

package/src/components/base/markdown/markdown_typescale_demo.html

@@ -3,8 +3,8 @@
   significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
   requests, milestones, snippets and more.</p>
 <p class="sm">MD Doc Small Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
-in a few significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues,
-merge requests, milestones, snippets and more.</p>
+  in a few significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues,
+  merge requests, milestones, snippets and more.</p>
 <p class="monospace">UI Monospace</p>
 <p class="monospace sm">UI Small Monospace</p>
 <h2>MD Doc h2 • GitLab uses "GitLab Flavored Markdown" (GFM)</h2>
@@ -29,15 +29,26 @@ merge requests, milestones, snippets and more.</p>
   requests, milestones, snippets and more.</p>
 <blockquote>
   <p>
-  MD Doc Blockquote • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
-  significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
-  requests, milestones, snippets and more.
+    MD Doc Blockquote • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
+    significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
+    requests, milestones, snippets and more.
   </p>
 </blockquote>
 <p>
   This is a paragraph with two types inline diff <span class="idiff addition">addition</span> and
   <span class="idiff deletion">deletion</span>
 </p>
-<p> 
+<p>
   This block implements the "GitLab Flavored Markdown" <code>Code span</code> styles.
 </p>
+
+<p>
+  This is an audio file
+  <span class="media-container audio-container">
+    <audio src="file.mp3" controls="true" data-setup="{}" data-title="file.mp3" data-canonical-src="file.mp3"
+      class="gfm">
+    </audio>
+    <a href="file.mp3" target="_blank" rel="noopener noreferrer" title="Download file.mp3" data-canonical-src="file.mp3"
+      data-link="true" class="gfm">file.mp3</a>
+  </span>
+</p>

package/src/components/base/navbar/navbar.stories.js

@@ -1,8 +1,9 @@
+import { BNavbarBrand } from 'bootstrap-vue';
 import { GlNavbar } from '../../../index';
 import readme from './navbar.md';
 
 const Template = (args, { argTypes }) => ({
-  components: { GlNavbar },
+  components: { GlNavbar, BNavbarBrand },
   props: Object.keys(argTypes),
   template: `
   <gl-navbar variant="dark" type="dark">