@gitlab/ui 36.5.1 → 37.0.0

package/dist/utils/stories_utils.js

@@ -9,5 +9,17 @@ const SERIES_NAME = {
   [SERIES_NAME_LONG]: 'Series name long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt interdum sapien ut blandit. Nulla fermentum nisi id euismod vulputate. END',
   [SERIES_NAME_LONG_WITHOUT_SPACES]: 'Series_name_long._Lorem_ipsum_dolor_sit_amet,_consectetur_adipiscing_elit._Sed_tincidunt_interdum_sapien_ut_blandit._Nulla_fermentum_nisi_id_euismod_vulputate._END'
 };
+/**
+ * Builds the parameters object disable one or multiple controls.
+ */
+
+const disableControls = function () {
+  let controls = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return Object.fromEntries(controls.map(control => [control, {
+    control: {
+      disable: true
+    }
+  }]));
+};
 
-export { SERIES_NAME, SERIES_NAME_LONG, SERIES_NAME_LONG_WITHOUT_SPACES, SERIES_NAME_SHORT };
+export { SERIES_NAME, SERIES_NAME_LONG, SERIES_NAME_LONG_WITHOUT_SPACES, SERIES_NAME_SHORT, disableControls };

package/documentation/documented_stories.js

@@ -129,6 +129,11 @@ export const setupStorybookReadme = () =>
         'GlPopover',
         'GlSingleStat',
         'GlDrawer',
+        'GlHeatmap',
+        'GlFormRadioGroup',
+        'GlChartSeriesLabel',
+        'GlAreaChart',
+        'GlLineChart',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "36.5.1",
+  "version": "37.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -58,7 +58,7 @@
     "@babel/standalone": "^7.0.0",
     "bootstrap-vue": "2.20.1",
     "copy-to-clipboard": "^3.0.8",
-    "dompurify": "^2.3.5",
+    "dompurify": "^2.3.6",
     "echarts": "^5.2.1",
     "highlight.js": "^10.6.0",
     "iframe-resizer": "^4.3.2",
@@ -76,7 +76,8 @@
     "vue": "^2.6.10"
   },
   "resolutions": {
-    "chokidar": "^3.5.2"
+    "chokidar": "^3.5.2",
+    "sane": "^5.0.1"
   },
   "devDependencies": {
     "@arkweid/lefthook": "^0.7.6",
@@ -84,19 +85,19 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "10.0.2",
     "@gitlab/stylelint-config": "4.0.0",
-    "@gitlab/svgs": "2.5.0",
+    "@gitlab/svgs": "2.6.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.4.15",
-    "@storybook/addon-docs": "6.4.15",
-    "@storybook/addon-essentials": "6.4.15",
+    "@storybook/addon-a11y": "6.4.19",
+    "@storybook/addon-docs": "6.4.19",
+    "@storybook/addon-essentials": "6.4.19",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.4.15",
-    "@storybook/addon-storyshots-puppeteer": "6.4.15",
-    "@storybook/addon-viewport": "6.4.15",
-    "@storybook/theming": "6.4.15",
-    "@storybook/vue": "6.4.15",
+    "@storybook/addon-storyshots": "6.4.19",
+    "@storybook/addon-storyshots-puppeteer": "6.4.19",
+    "@storybook/addon-viewport": "6.4.19",
+    "@storybook/theming": "6.4.19",
+    "@storybook/vue": "6.4.19",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",
@@ -122,7 +123,6 @@
     "mockdate": "^2.0.5",
     "node-sass": "^4.14.1",
     "node-sass-magic-importer": "^5.3.2",
-    "nodemon": "^1.11.0",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
     "plop": "^2.5.4",

package/scss_to_js/scss_variables.js

@@ -276,6 +276,7 @@ export const glFontSizeMonospaceSm = '0.6875rem'
 export const glMonospaceFont = 'Menlo, DejaVu Sans Mono, Liberation Mono, Consolas, Ubuntu Mono, Courier New, andale mono, lucida console, monospace'
 export const glRegularFont = '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji'
 export const glFonts = '("monospace": "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace, "regular": -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")'
+export const borderColor = '#dbdbdb'
 export const glBorderSize1 = '1px'
 export const glBorderSize2 = '2px'
 export const glBorderSize3 = '3px'

package/scss_to_js/scss_variables.json

@@ -1441,6 +1441,11 @@
       ],
       "compiledValue": "(\"monospace\": \"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace, \"regular\": -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans\", Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\")"
     },
+    {
+      "name": "$border-color",
+      "value": "$gray-100",
+      "compiledValue": "#dbdbdb"
+    },
     {
       "name": "$gl-border-size-1",
       "value": "1px",

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

@@ -1,3 +1,4 @@
+import { disableControls } from '../../../utils/stories_utils';
 import readme from './accordion.md';
 import GlAccordion from './accordion.vue';
 import GlAccordionItem from './accordion_item.vue';
@@ -63,6 +64,6 @@ export default {
         options: [1, 2, 3, 4, 5, 6],
       },
     },
-    autoCollapse: { control: { disable: true } },
+    ...disableControls(['autoCollapse']),
   },
 };

package/src/components/base/alert/alert.scss

@@ -85,44 +85,6 @@
   @include gl-right-4;
 }
 
-.gl-alert-max-content {
-  @include gl-display-flex;
-  @include gl-justify-content-center;
-  @include gl-p-5;
-
-  .gl-alert-icon {
-    @include gl-static;
-    @include gl-mr-5;
-    @include gl-flex-shrink-0;
-  }
-
-  .gl-dismiss-btn {
-    @include gl-static;
-    @include gl-align-self-start;
-    @include gl-ml-4;
-    // The negative margins optically align the × with the title text and right padding
-    margin-top: -$gl-spacing-scale-2;
-    margin-right: -$gl-spacing-scale-2;
-    order: 3;
-  }
-
-  .gl-alert-container {
-    @include gl-relative;
-    @include gl-display-flex;
-    @include gl-justify-content-space-between;
-    @include gl-flex-grow-1;
-    @include gl-mx-auto;
-  }
-
-  .gl-alert-content {
-    @include gl-flex-grow-1;
-  }
-}
-
-.gl-alert-layout-limited .gl-alert-container {
-  @include gl-layout-w-limited;
-}
-
 .gl-alert-danger {
   @include gl-bg-red-50;
 

package/src/components/base/alert/alert.spec.js

@@ -154,7 +154,6 @@ describe('Alert component', () => {
   describe('top-level classes', () => {
     describe.each`
       prop             | cssClass                      | presentIf
-      ${'contained'}   | ${'gl-alert-max-content'}     | ${true}
       ${'sticky'}      | ${'gl-alert-sticky'}          | ${true}
       ${'dismissible'} | ${'gl-alert-not-dismissible'} | ${false}
     `('$cssClass', ({ prop, cssClass, presentIf }) => {

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

@@ -12,7 +12,6 @@ const template = `
     :secondary-button-text="secondaryButtonText"
     :primary-button-link="primaryButtonLink"
     :secondary-button-link="secondaryButtonLink"
-    :contained="contained"
     :sticky="sticky"
   >{{ message }}</gl-alert>`;
 
@@ -27,7 +26,6 @@ const generateProps = ({
   primaryButtonLink = defaultValue('primaryButtonLink'),
   secondaryButtonText = defaultValue('secondaryButtonText'),
   secondaryButtonLink = defaultValue('secondaryButtonLink'),
-  contained = defaultValue('contained'),
   sticky = defaultValue('sticky'),
 } = {}) => ({
   title,
@@ -39,7 +37,6 @@ const generateProps = ({
   primaryButtonLink,
   secondaryButtonText,
   secondaryButtonLink,
-  contained,
   sticky,
 });
 
@@ -118,11 +115,6 @@ Variants.parameters = {
   storyshots: { disable: true },
 };
 
-export const Contained = Template.bind({});
-Contained.args = generateProps({
-  contained: true,
-});
-
 export const Sticky = () => ({
   components: { GlAlert },
   variants: alertVariantOptions,

package/src/components/base/alert/alert.vue

@@ -74,14 +74,6 @@ export default {
       required: false,
       default: '',
     },
-    /**
-     * Contained alerts have their content's width limited.
-     */
-    contained: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     sticky: {
       type: Boolean,
       required: false,
@@ -171,48 +163,45 @@ export default {
   <div
     :class="[
       'gl-alert',
-      { 'gl-alert-max-content gl-alert-layout-limited': contained },
       { 'gl-alert-sticky': sticky },
       { 'gl-alert-not-dismissible': !dismissible },
       variantClass,
     ]"
   >
-    <div class="gl-alert-container">
-      <gl-icon
-        :name="iconName"
-        :class="{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !title }"
-      />
+    <gl-icon
+      :name="iconName"
+      :class="{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !title }"
+    />
 
-      <close-button
-        v-if="dismissible"
-        ref="dismiss"
-        class="gl-dismiss-btn"
-        :label="dismissLabel"
-        @click="onDismiss"
-      />
+    <close-button
+      v-if="dismissible"
+      ref="dismiss"
+      class="gl-dismiss-btn"
+      :label="dismissLabel"
+      @click="onDismiss"
+    />
 
-      <div class="gl-alert-content" role="alert">
-        <h4 v-if="title" class="gl-alert-title">{{ title }}</h4>
+    <div class="gl-alert-content" role="alert">
+      <h4 v-if="title" class="gl-alert-title">{{ title }}</h4>
 
-        <div class="gl-alert-body">
-          <!-- @slot The alert message to display. -->
-          <slot></slot>
-        </div>
+      <div class="gl-alert-body">
+        <!-- @slot The alert message to display. -->
+        <slot></slot>
+      </div>
 
-        <div v-if="shouldRenderActions" class="gl-alert-actions">
-          <!-- @slot If the primary/secondary action buttons aren't flexible enough, place arbitrary content here. -->
-          <slot name="actions">
-            <gl-button
-              v-for="(actionButton, index) in actionButtons"
-              :key="index"
-              class="gl-alert-action"
-              v-bind="actionButton.attrs"
-              v-on="actionButton.listeners"
-            >
-              {{ actionButton.text }}
-            </gl-button>
-          </slot>
-        </div>
+      <div v-if="shouldRenderActions" class="gl-alert-actions">
+        <!-- @slot If the primary/secondary action buttons aren't flexible enough, place arbitrary content here. -->
+        <slot name="actions">
+          <gl-button
+            v-for="(actionButton, index) in actionButtons"
+            :key="index"
+            class="gl-alert-action"
+            v-bind="actionButton.attrs"
+            v-on="actionButton.listeners"
+          >
+            {{ actionButton.text }}
+          </gl-button>
+        </slot>
       </div>
     </div>
   </div>

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

@@ -1,6 +1,7 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
 import { GlBadge } from '../../../index';
 import { badgeSizeOptions, badgeVariantOptions } from '../../../utils/constants';
+import { disableControls } from '../../../utils/stories_utils';
 import readme from './badge.md';
 
 const template = `
@@ -61,14 +62,7 @@ export const Variants = (args, { argTypes }) => ({
 Variants.args = generateProps({
   variant: badgeVariantOptions.warning,
 });
-Variants.argTypes = {
-  content: {
-    control: { disable: true },
-  },
-  variant: {
-    control: { disable: true },
-  },
-};
+Variants.argTypes = disableControls(['content', 'variant']);
 
 export const Actionable = (args, { argTypes }) => ({
   components: { GlBadge },
@@ -95,14 +89,7 @@ Actionable.args = generateProps({
 Actionable.parameters = {
   storyshots: { disable: true },
 };
-Actionable.argTypes = {
-  content: {
-    control: { disable: true },
-  },
-  variant: {
-    control: { disable: true },
-  },
-};
+Actionable.argTypes = disableControls(['content', 'variant']);
 
 export const Sizes = (args, { argTypes }) => ({
   components: { GlBadge },
@@ -125,14 +112,7 @@ export const Sizes = (args, { argTypes }) => ({
 Sizes.args = generateProps({
   variant: badgeVariantOptions.danger,
 });
-Sizes.argTypes = {
-  content: {
-    control: { disable: true },
-  },
-  size: {
-    control: { disable: true },
-  },
-};
+Sizes.argTypes = disableControls(['content', 'size']);
 
 export const BadgeIcon = (args, { argTypes }) => ({
   components: { GlBadge },

package/src/components/base/card/card.vue

@@ -31,7 +31,7 @@ export default {
 
 <template>
   <div class="gl-card">
-    <div v-if="this.$slots.header" class="gl-card-header" :class="headerClass">
+    <div v-if="$slots.header" class="gl-card-header" :class="headerClass">
       <!-- @slot The card's header content. -->
       <slot name="header"></slot>
     </div>
@@ -39,7 +39,7 @@ export default {
       <!-- @slot The card's main content. -->
       <slot></slot>
     </div>
-    <div v-if="this.$slots.footer" class="gl-card-footer" :class="footerClass">
+    <div v-if="$slots.footer" class="gl-card-footer" :class="footerClass">
       <!-- @slot The card's footer content. -->
       <slot name="footer"></slot>
     </div>

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

@@ -1,3 +1,4 @@
+import { disableControls } from '../../../utils/stories_utils';
 import readme from './daterange_picker.md';
 import GlDaterangePicker from './daterange_picker.vue';
 
@@ -121,31 +122,15 @@ export default {
     },
   },
   argTypes: {
-    i18n: {
-      control: {
-        disable: true,
-      },
-    },
-    startPickerTarget: {
-      control: {
-        disable: true,
-      },
-    },
-    startPickerContainer: {
-      control: {
-        disable: true,
-      },
-    },
-    endPickerTarget: {
-      control: {
-        disable: true,
-      },
-    },
-    endPickerContainer: {
-      control: {
-        disable: true,
-      },
-    },
+    ...disableControls([
+      'i18n',
+      'startPickerTarget',
+      'startPickerContainer',
+      'endPickerTarget',
+      'endPickerContainer',
+      'defaultStartDate',
+      'defaultEndDate',
+    ]),
     defaultMinDate: {
       control: {
         type: 'date',
@@ -156,15 +141,5 @@ export default {
         type: 'date',
       },
     },
-    defaultStartDate: {
-      control: {
-        disable: true,
-      },
-    },
-    defaultEndDate: {
-      control: {
-        disable: true,
-      },
-    },
   },
 };

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

@@ -1,54 +1,6 @@
-import examples from './examples';
 import description from './form_radio_group.md';
 
 export default {
   description,
-  examples,
   followsDesignSystem: true,
-  bootstrapComponent: 'b-form-radio-group',
-  propsInfo: {
-    options: {
-      additionalInfo: 'Array of objects representing the radios to render',
-    },
-    valueField: {
-      additionalInfo: 'Field name in the options prop that should be used for the value',
-    },
-    textField: {
-      additionalInfo: 'Field name in the options prop that should be used for the text label',
-    },
-    htmlField: {
-      additionalInfo:
-        'Field name in the options prop that should be used for the html label instead of text field. Use with caution.',
-    },
-    disabledField: {
-      additionalInfo: 'Field name in the options prop that should be used for the disabled state',
-    },
-    checked: {
-      additionalInfo: 'The current value of the checked radio in the group',
-    },
-  },
-  events: [
-    {
-      event: 'input',
-      args: [{ arg: 'checked', description: 'current selected value of radio group' }],
-      description: 'Emitted when the selected value is changed',
-    },
-    {
-      event: 'change',
-      args: [{ arg: 'checked', description: 'current selected value of radio group' }],
-      description: 'Emitted when the selected value is changed due to user interaction',
-    },
-  ],
-  slots: [
-    {
-      name: 'first',
-      description:
-        'Slot for GlFormRadios that will appear before radios generated from options prop',
-    },
-    {
-      name: 'default',
-      description:
-        'Slot for GlFormRadios that will appear after radios generated from options prop',
-    },
-  ],
 };

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

@@ -1,5 +1,3 @@
-# GlFormRadioGroup
-
 The `GlFormRadioGroup` component provides an alternative and sometimes more
 compact way of setting up a group of `GlFormRadio` components.
 

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

@@ -1,30 +1,16 @@
-import { withKnobs, object, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
-import { GlFormRadioGroup, GlFormRadio } from '../../../../index';
+import { GlFormRadioGroup } from '../../../../index';
 import readme from './form_radio_group.md';
 
-const components = {
-  GlFormRadioGroup,
-  GlFormRadio,
-};
-
 const defaultOptions = [
   { value: 'pizza', text: 'Pizza' },
   { value: 'tacos', text: 'Tacos' },
   { value: 'burger', text: 'Burger', disabled: true },
 ];
-
-function generateProps({ name = 'radio-group-name', options = defaultOptions } = {}) {
-  return {
-    name: {
-      type: String,
-      default: text('name', name),
-    },
-    options: {
-      default: object('options', options),
-    },
-  };
-}
+const data = () => ({ selected: 'slot-option' });
+const generateProps = ({ name = 'radio-group-name', options = defaultOptions } = {}) => ({
+  name,
+  options,
+});
 
 const template = `
   <div>
@@ -45,13 +31,48 @@ const template = `
     </gl-form-radio-group>
   </div>`;
 
-const data = () => ({ selected: 'slot-option' });
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlFormRadioGroup,
+  },
+  props: Object.keys(argTypes),
+  template,
+  data,
+});
+export const Default = Template.bind({});
+Default.args = generateProps();
 
-documentedStoriesOf('base/form/form-radio-group', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: generateProps(),
-    data,
-    template,
-  }));
+export default {
+  title: 'base/form/form-radio-group',
+  component: GlFormRadioGroup,
+  parameters: {
+    knobs: { disable: true },
+    bootstrapComponent: 'b-form-radio-group',
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    options: {
+      description: 'Array of objects representing the radios to render',
+    },
+    valueField: {
+      description: 'Field name in the options prop that should be used for the value',
+    },
+    textField: {
+      description: 'Field name in the options prop that should be used for the text label',
+    },
+    htmlField: {
+      description:
+        'Field name in the options prop that should be used for the html label instead of text field. Use with caution.',
+    },
+    disabledField: {
+      description: 'Field name in the options prop that should be used for the disabled state',
+    },
+    checked: {
+      description: 'The current value of the checked radio in the group',
+    },
+  },
+};

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

@@ -17,6 +17,24 @@ export default {
   mixins: [formOptionsMixin],
   inheritAttrs: false,
   model,
+  methods: {
+    onInput(e) {
+      /**
+       * Emitted when the selected value is changed.
+       *
+       * @event input
+       */
+      this.$emit('input', e);
+    },
+    onChange(e) {
+      /**
+       * Emitted when the selected value is changed.
+       *
+       * @event change
+       */
+      this.$emit('change', e);
+    },
+  },
 };
 </script>
 <template>
@@ -25,9 +43,10 @@ export default {
     stacked
     v-bind="$attrs"
     v-on="$listeners"
-    @input="$emit('input', $event)"
-    @change="$emit('change', $event)"
+    @input="onInput"
+    @change="onChange"
   >
+    <!-- @slot Slot for GlFormRadios that will appear before radios generated from options prop -->
     <slot name="first"></slot>
     <gl-form-radio
       v-for="(option, idx) in formOptions"
@@ -38,6 +57,7 @@ export default {
       <span v-if="option.html" v-safe-html="option.html"></span>
       <span v-else>{{ option.text }}</span>
     </gl-form-radio>
+    <!-- @slot Slot for GlFormRadios that will appear after radios generated from options prop -->
     <slot></slot>
   </b-form-radio-group>
 </template>