@gitlab/ui 37.3.0 → 37.4.0

package/documentation/documented_stories.js

@@ -93,6 +93,7 @@ export const setupStorybookReadme = () =>
         'GlIntersperse',
         'GlFormSelect',
         'GlDaterangePicker',
+        'GlFormGroup',
         'GlAvatarLabeled',
         'GlBarChart',
         'GlCarousel',
@@ -108,8 +109,10 @@ export const setupStorybookReadme = () =>
         'GlPagination',
         'GlSkeletonLoader',
         'GlLabel',
+        'GlHoverLoadDirective',
         'GlStackedColumnChart',
         'GlDiscreteScatterChart',
+        'GlResizeObserverDirective',
         'GlFormCombobox',
         'GlChartTooltip',
         'GlInputGroupText',
@@ -129,6 +132,7 @@ export const setupStorybookReadme = () =>
         'GlColumnChart',
         'GlTruncate',
         'GlNav',
+        'GlSearchBoxByType',
         'GlNavItem',
         'GlNavItemDropdown',
         'GlPopover',
@@ -140,6 +144,7 @@ export const setupStorybookReadme = () =>
         'GlAreaChart',
         'GlLineChart',
         'GlFormInputGroup',
+        'GlSearchBoxByClick',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

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

package/src/components/base/button/button.scss

@@ -108,9 +108,8 @@
   }
 
   &.selected {
-    @include gl-bg-gray-10;
-    box-shadow: inset 0 0 0 $gl-border-size-1 $gray-200,
-      inset 0 $gl-border-size-2 $gl-border-size-4 $gray-200;
+    @include gl-bg-white;
+    box-shadow: inset 0 0 0 $gl-border-size-2 $gray-300;
 
     &:hover,
     &:focus {
@@ -118,20 +117,17 @@
     }
 
     &:hover {
-      box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400,
-        inset 0 $gl-border-size-4 $gl-border-size-4 $gray-200;
+      box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400;
     }
 
     &:focus {
-      box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400,
-        inset 0 $gl-border-size-4 $gl-border-size-4 $gray-200, $focus-ring;
+      box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400, $focus-ring;
     }
 
     &:active,
     &:active:focus {
       @include gl-bg-gray-100;
-      box-shadow: inset 0 0 0 $gl-border-size-2 $gray-600,
-        inset 0 $gl-border-size-4 $gl-border-size-4 $gray-200, $focus-ring;
+      box-shadow: inset 0 0 0 $gl-border-size-2 $gray-600, $focus-ring;
     }
   }
 

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

@@ -1,8 +1,5 @@
-import examples from './examples/form_group';
 import description from './form_group.md';
 
 export default {
   description,
-  examples,
-  bootstrapComponent: 'b-form-group',
 };

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

@@ -1,3 +1 @@
-# Form Group
-
 Form group adds structure to forms.

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

@@ -1,164 +1,125 @@
-import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { GlFormGroup, GlFormInput, GlFormTextarea } from '../../../../index';
-import { sizeOptions } from '../../../../utils/constants';
+import { disableControls } from '../../../../utils/stories_utils';
 import readme from './form_group.md';
 
 const components = {
   GlFormGroup,
 };
 
-function generateProps({
+const generateProps = ({
   id = 'group-1',
   label = 'Label Name',
   description = 'form group description',
-  labelDescription = 'form label description',
+  labelDescription = '',
   optional = GlFormGroup.props.optional.default,
   optionalText = GlFormGroup.props.optionalText.default,
-  horizontal = false,
-} = {}) {
-  return {
-    id: {
-      type: String,
-      default: text('id', id),
-    },
-    label: {
-      type: String,
-      default: text('label', label),
-    },
-    labelSize: {
-      type: String,
-      default: select('label-size', sizeOptions, sizeOptions.sm),
-    },
-    description: {
-      type: String,
-      default: text('description', description),
-    },
-    labelDescription: {
-      type: String,
-      default: text('label-description', labelDescription),
-    },
-    optional: {
-      type: Boolean,
-      default: boolean('optional', optional),
-    },
-    optionalText: {
-      type: String,
-      default: text('optional-text', optionalText),
-    },
-    horizontal: {
-      type: Boolean,
-      default: boolean('horizontal', horizontal),
+} = {}) => ({
+  id,
+  label,
+  labelDescription,
+  optional,
+  optionalText,
+  description,
+});
+
+const wrap = (template, bindings = '') => `
+  <gl-form-group
+    :id="id +  '_group'"
+    :label="label"
+    :label-description="labelDescription"
+    :optional="optional"
+    :optional-text="optionalText"
+    :description="description"
+    ${bindings}
+    :label-for="id">
+    ${template}
+  </gl-form-group>
+`;
+
+export const Default = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ...components, GlFormInput },
+  template: wrap('<gl-form-input :id="id" />'),
+});
+Default.args = generateProps();
+
+export const Disabled = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ...components, GlFormInput },
+  template: wrap('<gl-form-input :id="id"  type="text" value="Disabled" disabled />'),
+});
+Disabled.args = generateProps({ description: 'This feature is disabled' });
+
+export const WithTextarea = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ...components, GlFormTextarea },
+  template: wrap('<gl-form-textarea :id="id" placeholder="Enter something" />'),
+});
+WithTextarea.args = generateProps({
+  id: 'textarea2',
+  optional: true,
+  description: '',
+});
+
+export const WithLabelDescription = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ...components, GlFormInput },
+  template: wrap('<gl-form-input :id="id" />'),
+});
+WithLabelDescription.args = generateProps({
+  optional: true,
+  labelDescription: 'form label description',
+});
+
+export const WithValidations = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ...components, GlFormInput },
+  computed: {
+    state() {
+      return this.name.length >= 4;
     },
-  };
-}
+    invalidFeedback() {
+      let feedbackText = 'This field is required.';
 
-documentedStoriesOf('base/form/form-group', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components: { ...components, GlFormInput },
-    template: `
-      <gl-form-group
-        :id="id"
-        :label="label"
-        :label-size="labelSize"
-        :optional="optional"
-        :optional-text="optionalText"
-        :description="description"
-        :horizontal="horizontal"
-        label-for="label1"
-      >
-        <gl-form-input id="input1" />
-      </gl-form-group>
-    `,
-  }))
-  .add('disabled', () => ({
-    props: generateProps(),
-    components: { ...components, GlFormInput },
-    template: `
-      <gl-form-group
-        id="group-id"
-        label="Label Name"
-        label-size="sm"
-        :optional="optional"
-        :optional-text="optionalText"
-        description="This feature is disabled"
-        label-for="input1"
-      >
-        <gl-form-input id="input1"  type="text" :disabled="true" value="Disabled" />
-      </gl-form-group>
-    `,
-  }))
-  .add('with textarea', () => ({
-    components: { ...components, GlFormTextarea },
-    props: generateProps({ optional: true }),
-    template: `
-      <gl-form-group
-        id="group-id-textarea2"
-        label="Label Name"
-        label-for="textarea2"
-        :optional="optional"
-        :optional-text="optionalText"
-      >
-        <gl-form-textarea id="textarea2" placeholder="Enter something" />
-      </gl-form-group>
-    `,
-  }))
-  .add('with label description', () => ({
-    props: generateProps({ optional: true }),
-    components: { ...components, GlFormInput },
-    template: `
-      <gl-form-group
-        :id="id"
-        :label="label"
-        :label-size="labelSize"
-        :description="description"
-        :label-description="labelDescription"
-        :optional="optional"
-        :optional-text="optionalText"
-        :horizontal="horizontal"
-        label-for="label1"
-      >
-        <gl-form-input id="input1" />
-      </gl-form-group>
-    `,
-  }))
-  .add('with validations', () => ({
-    props: generateProps({ label: 'Name', description: 'Enter a first and last name.' }),
-    components: { ...components, GlFormInput },
-    computed: {
-      state() {
-        return this.name.length >= 4;
-      },
-      invalidFeedback() {
-        let feedbackText = 'This field is required.';
+      if (this.name.length > 4) {
+        feedbackText = '';
+      } else if (this.name.length > 0) {
+        feedbackText = 'Enter at least 4 characters.';
+      }
 
-        if (this.name.length > 4) {
-          feedbackText = '';
-        } else if (this.name.length > 0) {
-          feedbackText = 'Enter at least 4 characters.';
-        }
+      return feedbackText;
+    },
+  },
+  data() {
+    return {
+      name: '',
+    };
+  },
+  template: wrap(
+    '<gl-form-input :id="id" :state="state" v-model.trim="name" />',
+    ':invalid-feedback="invalidFeedback"'
+  ),
+});
+WithValidations.args = generateProps({
+  label: 'Name',
+  description: 'Enter a first and last name.',
+});
 
-        return feedbackText;
+export default {
+  title: 'base/form/form-group',
+  component: GlFormGroup,
+  parameters: {
+    bootstrapComponent: 'b-form-group',
+    docs: {
+      description: {
+        component: readme,
       },
     },
-    data() {
-      return {
-        name: '',
-      };
+  },
+  argTypes: {
+    ...disableControls(['labelClass']),
+    label: {
+      control: { type: 'text' },
     },
-    template: `
-      <gl-form-group
-        :id="id"
-        :label="label"
-        :label-size="labelSize"
-        :description="description"
-        :invalid-feedback="invalidFeedback"
-        :state="state"
-        label-for="label1"
-      >
-        <gl-form-input id="input1" :state="state" v-model.trim="name" />
-      </gl-form-group>
-    `,
-  }));
+  },
+};

package/src/components/base/search_box_by_click/search_box_by_click.documentation.js

@@ -1,96 +1,6 @@
-import examples from './examples';
 import description from './search_box_by_click.md';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
-  propsInfo: {
-    value: {
-      additionalInfo: 'If provided, used as value of search input',
-    },
-    historyItems: {
-      type: Array,
-      required: false,
-      additionalInfo: 'If provided, used as history items for this component',
-    },
-    placeholder: {
-      type: String,
-      required: false,
-      additionalInfo: 'If provided, used as history items for this component',
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      additionalInfo: 'If provided and true, disables the input and controls',
-    },
-    recentSearchesHeader: {
-      type: String,
-      required: false,
-      default: 'Recent searches',
-      additionalInfo: 'i18n for recent searches title within history dropdown',
-    },
-    clearButtonTitle: {
-      type: String,
-      required: false,
-      default: 'Clear',
-      additionalInfo: 'i18n for clear button title',
-    },
-    closeButtonTitle: {
-      type: String,
-      required: false,
-      default: 'Close',
-      additionalInfo: 'i18n for close button title within history dropdown',
-    },
-    clearRecentSearchesText: {
-      type: String,
-      required: false,
-      default: 'Clear recent searches',
-      additionalInfo: 'i18n for recent searches clear text',
-    },
-    tooltipContainer: {
-      additionalInfo:
-        'Container for tooltip. Valid values: DOM node, selector string or `false` for default',
-    },
-    searchButtonAttributes: {
-      additionalInfo: 'HTML attributes to add to the search button',
-    },
-  },
-  events: [
-    {
-      event: 'clear',
-      description: 'Emitted when search is cleared',
-    },
-    {
-      event: 'submit',
-      args: [
-        {
-          arg: 'value',
-          description: 'Search value',
-        },
-      ],
-      description: 'Emitted when search is submitted',
-    },
-    {
-      event: 'history-item-selected',
-      args: [
-        {
-          arg: 'value',
-          description: 'History item',
-        },
-      ],
-      description: 'Emitted when item from history is selected',
-    },
-    {
-      event: 'clear-history',
-      description: 'Emitted when clear history button is clicked',
-    },
-  ],
-  slots: [
-    {
-      name: 'history-item',
-      description:
-        'Slot to customize history item in history dropdown. Used only with history-items prop',
-    },
-  ],
 };

package/src/components/base/search_box_by_click/search_box_by_click.md

@@ -1,3 +1 @@
-# Search Box By Click
-
 Provides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).

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

@@ -1,57 +1,100 @@
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlSearchBoxByClick } from '../../../index';
+import { disableControls } from '../../../utils/stories_utils';
 import readme from './search_box_by_click.md';
 
-const components = {
-  GlSearchBoxByClick,
-};
+const template = `
+  <gl-search-box-by-click
+    :value="value"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :history-items="currentHistoryItems"
+    :clearable="clearable"
+    :recent-searches-header="recentSearchesHeader"
+    :clear-button-title="clearButtonTitle"
+    :close-button-title="closeButtonTitle"
+    :clear-recent-searches-text="clearRecentSearchesText"
+    :no-recent-searches-text="noRecentSearchesText"
+    :search-button-attributes="searchButtonAttributes"
+    @clear-history="clearCurrentHistory"
+  />
+`;
 
-function generateProps({ disabled = false, value = '', placeholder = 'Search' } = {}) {
-  return {
-    disabled: {
-      type: Boolean,
-      default: boolean('disabled', disabled),
-    },
-    value: {
-      type: String,
-      default: text('value', value),
+const defaultValue = (prop) => GlSearchBoxByClick.props[prop].default;
+
+const generateProps = ({
+  disabled = defaultValue('disabled'),
+  value = defaultValue('value'),
+  placeholder = defaultValue('placeholder'),
+  historyItems = defaultValue('historyItems'),
+  clearable = defaultValue('clearable'),
+  recentSearchesHeader = defaultValue('recentSearchesHeader'),
+  clearButtonTitle = defaultValue('clearButtonTitle'),
+  closeButtonTitle = defaultValue('closeButtonTitle'),
+  clearRecentSearchesText = defaultValue('clearRecentSearchesText'),
+  noRecentSearchesText = defaultValue('noRecentSearchesText'),
+  searchButtonAttributes = defaultValue('searchButtonAttributes')(),
+} = {}) => ({
+  disabled,
+  value,
+  placeholder,
+  historyItems,
+  clearable,
+  recentSearchesHeader,
+  clearButtonTitle,
+  closeButtonTitle,
+  clearRecentSearchesText,
+  noRecentSearchesText,
+  searchButtonAttributes,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlSearchBoxByClick,
+  },
+  props: Object.keys(argTypes),
+  template,
+  data() {
+    return {
+      currentHistoryItems: this.historyItems,
+    };
+  },
+  watch: {
+    historyItems(historyItems) {
+      this.currentHistoryItems = historyItems;
     },
-    placeholder: {
-      type: String,
-      default: text('placeholder', placeholder),
+  },
+  methods: {
+    clearCurrentHistory() {
+      this.currentHistoryItems = [];
     },
-  };
-}
+  },
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
 
-documentedStoriesOf('base/search-box-by-click', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template: `
-      <gl-search-box-by-click
-        :value="value"
-        :disabled="disabled"
-        :placeholder="placeholder"
-      />
-    `,
-  }))
-  .add('with history', () => ({
-    props: {
-      ...generateProps(),
-      history: {
-        type: Array,
-        default: ['author:@admin', 'assignee:@admin milestone:%12.5', 'label:~test'],
+export const History = Template.bind({});
+History.args = generateProps({
+  historyItems: ['author:@admin', 'assignee:@admin milestone:%12.5', 'label:~test'],
+});
+
+export default {
+  title: 'base/search-box-by-click',
+  component: GlSearchBoxByClick,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    ...disableControls(['tooltipContainer']),
+    historyItems: {
+      control: {
+        type: 'object',
       },
     },
-    components,
-    template: `
-      <gl-search-box-by-click
-        :value="value"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :history-items="history"
-      />
-    `,
-  }));
+  },
+};