npm - @gitlab/ui - Versions diffs - 36.1.0 → 36.2.0 - Mend

@gitlab/ui 36.1.0 → 36.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/documentation/documented_stories.js CHANGED Viewed

@@ -126,6 +126,7 @@ export const setupStorybookReadme = () =>
         'GlNav',
         'GlNavItem',
         'GlNavItemDropdown',
+        'GlPopover',
       ],
       components: {
         GlComponentDocumentation,

package/package.json CHANGED Viewed

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

package/src/components/base/popover/popover.documentation.js CHANGED Viewed

@@ -1,28 +1,3 @@
-import examples from './examples';
 export default {
   followsDesignSystem: true,
-  examples,
-  bootstrapComponent: 'b-popover',
-  bootstrapPropsInfo: {
-    target: {
-      additionalInfo:
-        'Element string ID, or a reference to an element or component, that you want to trigger the popover.',
-      required: true,
-    },
-    triggers: {
-      enum: 'triggerVariantOptions',
-    },
-    placement: {
-      enum: 'popoverPlacements',
-    },
-    boundary: {
-      additionalInfo:
-        '"scrollParent", "viewport", "window", or a reference to an HTML element. This is the container that the popover will be constrained to visually.You may need to change this if your target element is in a small container with overflow scroll',
-    },
-    container: {
-      additionalInfo:
-        'Specify container as null (default, appends to <body>) to avoid rendering problems in more complex components (like input groups, button groups, etc). You can use container to optionally specify a different element to append the popover to.',
-    },
-  },
 };

package/src/components/base/popover/popover.stories.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { withKnobs, select, text } from '@storybook/addon-knobs';
 import { GlPopover, GlButton } from '../../../index';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { popoverPlacements } from '../../../utils/constants';
+const defaultValue = (prop) => GlPopover.props[prop].default;
 const components = { GlPopover, GlButton };
 const contentString = `
@@ -11,84 +11,88 @@ const contentString = `
   massa ac, porta condimentum libero. Ut id lacus tristique, egestas arcu non, molestie nisi.
 `;
-const template = `
-  <div class="gl-display-flex gl-justify-content-center gl-p-6">
-    <gl-button id="pop-top">{{placement}}</gl-button>
-    <gl-popover target="pop-top"
-      triggers="hover focus"
+const getTemplate = (id, slots = '') => `
+  <div style="height:400px;" class="gl-display-flex gl-justify-content-center gl-align-items-center">
+    <gl-button id="${id}">{{placement}}</gl-button>
+    <gl-popover
+      target="${id}"
+      :triggers="triggers"
       :title="title"
       :placement="placement"
+      :show-close-button="showCloseButton"
       content="${contentString}"
-      data-testid="popover-with-props"
-      show
-      />
-  </div>
-  `;
+      data-testid="${id}"
+      :show="$options.viewMode !== 'docs'">${slots}</gl-popover>
+  </div>`;
-const scopedSlotTemplate = `
-  <div class="gl-display-flex gl-justify-content-center gl-p-6">
-    <gl-button id="pop-top-two" data-testid="popover-button-click">{{placement}}</gl-button>
-    <gl-popover target="pop-top-two"
-      triggers="click"
-      :placement="placement"
-      content="${contentString}"
-    >
-      <template #title>
-        <span data-testid="popover-title">Popover title</span>
-      </template>
-    </gl-popover>
-  </div>
-`;
+const generateProps = ({
+  placement = popoverPlacements.top,
+  title = 'Popover',
+  triggers = defaultValue('triggers'),
+  cssClasses = defaultValue('cssClasses'),
+  showCloseButton = defaultValue('showCloseButton'),
+} = {}) => ({
+  placement,
+  title,
+  triggers,
+  cssClasses,
+  showCloseButton,
+});
+export const Default = (_args, { viewMode, argTypes }) => ({
+  viewMode,
+  components,
+  props: Object.keys(argTypes),
+  template: getTemplate('popover-with-props'),
+});
+Default.args = generateProps();
-function generateProps({ placement = popoverPlacements.top, title = 'Popover', triggers } = {}) {
-  return {
+export const WithCloseButton = (_args, { viewMode, argTypes }) => ({
+  viewMode,
+  components,
+  props: Object.keys(argTypes),
+  template: getTemplate('popover-with-close-button'),
+});
+WithCloseButton.args = generateProps({
+  showCloseButton: true,
+});
+export const OnClick = (_args, { viewMode, argTypes }) => ({
+  viewMode,
+  components,
+  props: Object.keys(argTypes),
+  template: getTemplate(
+    'popover-button-click',
+    `
+    <template #title>
+      <span data-testid="popover-title">Popover title</span>
+    </template>
+  `
+  ),
+});
+OnClick.args = generateProps({
+  triggers: 'click',
+});
+OnClick.parameters = {
+  storyshots: { disable: true },
+};
+export default {
+  title: 'base/popover',
+  component: GlPopover,
+  parameters: {
+    knobs: { disable: true },
+    bootstrapComponent: 'b-popover',
+  },
+  argTypes: {
     placement: {
-      type: String,
-      default: select('placement', popoverPlacements, placement),
+      options: Object.values(popoverPlacements),
+      control: {
+        type: 'select',
+      },
     },
     title: {
-      type: String,
-      default: text('title', title),
+      control: { type: 'text' },
     },
-    triggers: {
-      type: String,
-      default: text('hover focus', triggers),
-    },
-  };
-}
-documentedStoriesOf('base/popover', '')
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    template,
-    props: generateProps(),
-  }))
-  .add('with close button', () => ({
-    components,
-    template: `
-      <div class="gl-display-flex gl-justify-content-center gl-p-6">
-        <gl-button id="pop-with-close-button">{{placement}}</gl-button>
-        <gl-popover
-          target="pop-with-close-button"
-          data-testid="popover-with-close-button"
-          triggers="hover focus"
-          :title="title"
-          :placement="placement"
-          content="${contentString}"
-          show
-          show-close-button
-          />
-      </div>
-    `,
-    props: generateProps(),
-  }))
-  .add(
-    'on click',
-    () => ({
-      components,
-      template: scopedSlotTemplate,
-      props: generateProps(),
-    }),
-    { storyshots: false }
-  );
+  },
+};

package/src/components/base/popover/popover.vue CHANGED Viewed

@@ -18,6 +18,11 @@ export default {
       required: false,
       default: () => [],
     },
+    /**
+     * Space-separated triggers for the popover.
+     *
+     * @values click, hover, focus, manual
+     */
     triggers: {
       type: String,
       required: false,
@@ -45,6 +50,9 @@ export default {
   methods: {
     close(e) {
       this.$refs[popoverRefName].doClose();
+      /**
+       * Emitted when the close button is clicked (requires showCloseButton to be `true`).
+       */
       this.$emit('close-button-clicked', e);
     },
   },

package/src/scss/utilities.scss CHANGED Viewed

@@ -1981,6 +1981,14 @@
   color: inherit !important;
 }
+.gl-text-transparent {
+  color: transparent;
+}
+.gl-text-transparent\! {
+  color: transparent !important;
+}
 .gl-text-white {
   color: $white;
 }

package/src/scss/utility-mixins/color.scss CHANGED Viewed

@@ -11,6 +11,10 @@
   color: inherit;
 }
+@mixin gl-text-transparent {
+  color: transparent;
+}
 @mixin gl-text-white($hover: true) {
   color: $white;
 }

package/dist/components/base/popover/examples/index.js DELETED Viewed

@@ -1,25 +0,0 @@
-import PopoverBasicExample from './popover.basic.example';
-import PopoverLoadingExample from './popover.loading.example';
-import PopoverNoTitleExample from './popover.notitle.example';
-var index = [{
-  name: 'Examples',
-  items: [{
-    id: 'popover-basic',
-    name: 'Basic',
-    description: 'Basic Popover',
-    component: PopoverBasicExample
-  }, {
-    id: 'popover-loading',
-    name: 'Loading',
-    description: 'Popover with Skeleton Loading',
-    component: PopoverLoadingExample
-  }, {
-    id: 'popover-no-title',
-    name: 'No title',
-    description: 'Popover with no title',
-    component: PopoverNoTitleExample
-  }]
-}];
-export default index;

package/dist/components/base/popover/examples/popover.basic.example.js DELETED Viewed

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-/* script */
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"popovercontainer"}},[_c('gl-button',{attrs:{"id":"pop-basic"}},[_vm._v("Popover Button")]),_vm._v(" "),_c('gl-popover',{attrs:{"target":"pop-basic","container":"popovercontainer","placement":"top","title":"This is a Popover","triggers":"hover focus","content":"With a placement of top"}})],1)};
-var __vue_staticRenderFns__ = [];
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  /* style inject SSR */
-  /* style inject shadow dom */
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-export default __vue_component__;

package/dist/components/base/popover/examples/popover.loading.example.js DELETED Viewed

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-/* script */
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"popovercontainer"}},[_c('gl-button',{attrs:{"id":"pop-basic"}},[_vm._v("Popover Button")]),_vm._v(" "),_c('gl-popover',{attrs:{"target":"pop-basic","container":"popovercontainer","placement":"top","title":"My popover","triggers":"hover focus","show":""}},[_c('gl-skeleton-loader')],1)],1)};
-var __vue_staticRenderFns__ = [];
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  /* style inject SSR */
-  /* style inject shadow dom */
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-export default __vue_component__;

package/dist/components/base/popover/examples/popover.notitle.example.js DELETED Viewed

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-/* script */
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"popovercontainer"}},[_c('gl-button',{attrs:{"id":"pop-basic"}},[_vm._v("Popover Button")]),_vm._v(" "),_c('gl-popover',{attrs:{"target":"pop-basic","container":"popovercontainer","placement":"top","triggers":"hover focus","content":"Popover content with no title"}})],1)};
-var __vue_staticRenderFns__ = [];
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  /* style inject SSR */
-  /* style inject shadow dom */
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-export default __vue_component__;

package/src/components/base/popover/examples/index.js DELETED Viewed

@@ -1,29 +0,0 @@
-import PopoverBasicExample from './popover.basic.example.vue';
-import PopoverLoadingExample from './popover.loading.example.vue';
-import PopoverNoTitleExample from './popover.notitle.example.vue';
-export default [
-  {
-    name: 'Examples',
-    items: [
-      {
-        id: 'popover-basic',
-        name: 'Basic',
-        description: 'Basic Popover',
-        component: PopoverBasicExample,
-      },
-      {
-        id: 'popover-loading',
-        name: 'Loading',
-        description: 'Popover with Skeleton Loading',
-        component: PopoverLoadingExample,
-      },
-      {
-        id: 'popover-no-title',
-        name: 'No title',
-        description: 'Popover with no title',
-        component: PopoverNoTitleExample,
-      },
-    ],
-  },
-];

package/src/components/base/popover/examples/popover.basic.example.vue DELETED Viewed

@@ -1,13 +0,0 @@
-<template>
-  <div id="popovercontainer">
-    <gl-button id="pop-basic">Popover Button</gl-button>
-    <gl-popover
-      target="pop-basic"
-      container="popovercontainer"
-      placement="top"
-      title="This is a Popover"
-      triggers="hover focus"
-      content="With a placement of top"
-    />
-  </div>
-</template>

package/src/components/base/popover/examples/popover.loading.example.vue DELETED Viewed

@@ -1,15 +0,0 @@
-<template>
-  <div id="popovercontainer">
-    <gl-button id="pop-basic">Popover Button</gl-button>
-    <gl-popover
-      target="pop-basic"
-      container="popovercontainer"
-      placement="top"
-      title="My popover"
-      triggers="hover focus"
-      show
-    >
-      <gl-skeleton-loader />
-    </gl-popover>
-  </div>
-</template>

package/src/components/base/popover/examples/popover.notitle.example.vue DELETED Viewed

@@ -1,12 +0,0 @@
-<template>
-  <div id="popovercontainer">
-    <gl-button id="pop-basic">Popover Button</gl-button>
-    <gl-popover
-      target="pop-basic"
-      container="popovercontainer"
-      placement="top"
-      triggers="hover focus"
-      content="Popover content with no title"
-    />
-  </div>
-</template>