@gitlab/ui 38.8.1 → 38.8.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [38.8.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.8.1...v38.8.2) (2022-04-08)
+
+
+### Bug Fixes
+
+* **Label:** Move tooltip to anchor instead of span ([67d0e79](https://gitlab.com/gitlab-org/gitlab-ui/commit/67d0e79bb57409d63e32fd3efffc95dc534c3421))
+
 ## [38.8.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.8.0...v38.8.1) (2022-04-08)
 
 

package/dist/components/base/label/label.js

@@ -130,7 +130,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',_vm._b({ref:"labelTitle",staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":_vm.onClick}},'span',_vm.$attrs,false),[_c('gl-link',{staticClass:"gl-label-link",attrs:{"href":_vm.target}},[_c('span',{staticClass:"gl-label-text"},[_vm._v("\n      "+_vm._s(_vm.scopedKey)+"\n    ")]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text-scoped"},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-label-close gl-p-0!",attrs:{"label":"Remove label","variant":"reset","disabled":_vm.disabled},on:{"click":_vm.onClose}}):_vm._e(),_vm._v(" "),(_vm.description)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.labelTitle; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n  ")]):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',_vm._b({staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":_vm.onClick}},'span',_vm.$attrs,false),[_c('gl-link',{ref:"labelTitle",staticClass:"gl-label-link",attrs:{"href":_vm.target}},[_c('span',{staticClass:"gl-label-text"},[_vm._v("\n      "+_vm._s(_vm.scopedKey)+"\n    ")]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text-scoped"},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-label-close gl-p-0!",attrs:{"label":"Remove label","variant":"reset","disabled":_vm.disabled},on:{"click":_vm.onClose}}):_vm._e(),_vm._v(" "),(_vm.description)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.labelTitle.$el; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n  ")]):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "38.8.1",
+  "version": "38.8.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -146,7 +146,6 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^5.0.0",
     "start-server-and-test": "^1.10.6",
-    "storybook-readme": "5.0.9",
     "stylelint": "14.3.0",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-prettier": "2.0.0",

package/src/components/base/label/label.vue

@@ -120,15 +120,8 @@ export default {
 </script>
 
 <template>
-  <span
-    ref="labelTitle"
-    class="gl-label"
-    :class="cssClasses"
-    :style="cssVariables"
-    v-bind="$attrs"
-    @click="onClick"
-  >
-    <gl-link :href="target" class="gl-label-link">
+  <span class="gl-label" :class="cssClasses" :style="cssVariables" v-bind="$attrs" @click="onClick">
+    <gl-link ref="labelTitle" :href="target" class="gl-label-link">
       <span class="gl-label-text">
         {{ scopedKey }}
       </span>
@@ -146,7 +139,7 @@ export default {
     />
     <gl-tooltip
       v-if="description"
-      :target="() => $refs.labelTitle"
+      :target="() => $refs.labelTitle.$el"
       :placement="tooltipPlacement"
       boundary="viewport"
     >

package/documentation/documented_stories.js

@@ -1,215 +0,0 @@
-import { storiesOf } from '@storybook/vue';
-import camelCase from 'lodash/camelCase';
-import upperFirst from 'lodash/upperFirst';
-import { configureReadme } from 'storybook-readme';
-
-import 'url-search-params-polyfill';
-
-import { componentValidator as isValidComponent } from './all_components';
-import GlComponentDocumentation from './components/component_documentation_generator.vue';
-import GlExampleExplorer from './components/example_explorer.vue';
-
-/**
- * This functions returns the component's name from the current window location's search
- *
- * Assume you have this Structure:
- * - Base
- *    - Form
- *       - Form-Group
- *          - Default
- *          - With Validations
- *
- * The URI would look like this: `iframe.html?id=base-form-form-group--with-validations`
- *
- * The actual component name we are looking for is `GlFormGroup`.
- * We know that we can remove the last part.
- * But unfortunately from `base-form-form-group` we cannot guess which of the following is the component name:
- *   - GlBaseFormFormGroup
- *   - GlFormFormGroup
- *   - GlFormGroup
- *   - GlGroup
- *
- * So we are going to through loop all of these and return the first valid component (`GlFormGroup`)
- *
- * @returns {string}
- */
-function getComponentName() {
-  const urlParams = new URLSearchParams(window.location.search);
-
-  const storySlug = urlParams.get('id').split('--')[0];
-  const splitSlug = storySlug.split('-');
-
-  let componentName;
-
-  do {
-    splitSlug.shift();
-    componentName = `Gl${upperFirst(camelCase(splitSlug.join('-')))}`;
-  } while (splitSlug.length > 0 && !isValidComponent(componentName));
-
-  if (!isValidComponent(componentName)) {
-    throw new Error('Could not find a matching component');
-  }
-
-  return componentName;
-}
-
-export const setupStorybookReadme = () =>
-  configureReadme({
-    StoryPreview: {
-      disableForComponents: [
-        'GlTableLite',
-        'GlAlert',
-        'GlSparklineChart',
-        'GlAvatarsInline',
-        'GlSprintf',
-        'GlLink',
-        'GlChart',
-        'GlDropdown',
-        'GlDropdownItem',
-        'GlBadge',
-        'GlButtonGroup',
-        'GlOutsideDirective',
-        'GlBanner',
-        'GlBreadcrumb',
-        'GlBroadcastMessage',
-        'GlCollapse',
-        'GlToken',
-        'GlButton',
-        'GlEmptyState',
-        'GlSorting',
-        'GlSortingItem',
-        'GlIcon',
-        'GlDatepicker',
-        'GlSafeLinkDirective',
-        'GlDashboardSkeleton',
-        'GlToggle',
-        'GlNavbar',
-        'GlFormCheckboxTree',
-        'GlProgressBar',
-        'GlPath',
-        'GlFriendlyWrap',
-        'GlLoadingIcon',
-        'GlDeprecatedSkeletonLoading',
-        'GlCard',
-        'GlFormCheckbox',
-        'GlAccordion',
-        'GlAccordionItem',
-        'GlFilteredSearch',
-        'GlFilteredSearchSuggestion',
-        'GlFilteredSearchSuggestionList',
-        'GlFilteredSearchTerm',
-        'GlFilteredSearchToken',
-        'GlFilteredSearchTokenSegment',
-        'GlIntersperse',
-        'GlFormSelect',
-        'GlDaterangePicker',
-        'GlFormGroup',
-        'GlAvatarLabeled',
-        'GlBarChart',
-        'GlCarousel',
-        'GlMarkdown',
-        'GlTokenSelector',
-        'GlTooltip',
-        'GlFormTextarea',
-        'GlFormInput',
-        'GlSegmentedControl',
-        'GlAvatar',
-        'GlChartLegend',
-        'GlAvatarLink',
-        'GlPagination',
-        'GlSkeletonLoader',
-        'GlLabel',
-        'GlHoverLoadDirective',
-        'GlStackedColumnChart',
-        'GlDiscreteScatterChart',
-        'GlResizeObserverDirective',
-        'GlFormCombobox',
-        'GlChartTooltip',
-        'GlInputGroupText',
-        'GlGaugeChart',
-        'GlSafeHtmlDirective',
-        'GlFormRadio',
-        'GlModal',
-        'GlKeysetPagination',
-        'GlForm',
-        'GlTable',
-        'GlTab',
-        'GlTabs',
-        'GlToast',
-        'GlPaginatedList',
-        'GlIntersectionObserver',
-        'GlInfiniteScroll',
-        'GlColumnChart',
-        'GlTruncate',
-        'GlNav',
-        'GlSearchBoxByType',
-        'GlNavItem',
-        'GlNavItemDropdown',
-        'GlPopover',
-        'GlSingleStat',
-        'GlDrawer',
-        'GlHeatmap',
-        'GlFormRadioGroup',
-        'GlChartSeriesLabel',
-        'GlAreaChart',
-        'GlLineChart',
-        'GlFormInputGroup',
-        'GlSearchBoxByClick',
-      ],
-      components: {
-        GlComponentDocumentation,
-        GlExampleExplorer,
-      },
-      data() {
-        return {
-          componentName: null,
-          error: '',
-          // Style the preview component container
-          // Default container forcefully centers the preview element
-          styles: {
-            padding: '50px 35px',
-            margin: '16px 0',
-            border: '1px dashed rgb(229, 229, 229)',
-          },
-        };
-      },
-      // We infer the component's name from the URL so that we can load related examples and docs.
-      // This needs to be done in the created hook to make sure that componentName is always set
-      // to a valid value once the story loads.
-      created() {
-        try {
-          this.componentName = getComponentName();
-          this.error = '';
-        } catch (error) {
-          this.componentName = false;
-          this.error = error.message;
-        }
-      },
-      template: `
-      <div>
-          <div class="story-container" v-if="!componentName || $options.disableForComponents.includes(componentName)">
-              <slot></slot>
-          </div>
-          <template v-else>
-              <div class="story-container" v-bind:style="styles"><slot></slot></div>
-              {{ error }}
-              <template v-if="componentName">
-                  <gl-example-explorer :componentName="componentName" />
-                  <gl-component-documentation :componentName="componentName" />
-              </template>
-          </template>
-      </div>`,
-    },
-  });
-
-export const documentedStoriesOf = (name, readme) => {
-  const story = storiesOf(name, module);
-  if (process.env.NODE_ENV !== 'test') {
-    story.addParameters({
-      readme: {
-        content: readme,
-      },
-    });
-  }
-  return story;
-};