@gitlab/ui 65.4.0 → 66.0.1

package/dist/utils/constants.js

@@ -249,7 +249,6 @@ const formInputSizes = {
 const toggleLabelPosition = {
   hidden: 'hidden',
   left: 'left',
-  block: 'block',
   top: 'top'
 };
 const tooltipActionEvents = ['open', 'close', 'enable', 'disable'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "65.4.0",
+  "version": "66.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -81,7 +81,8 @@
   },
   "resolutions": {
     "chokidar": "^3.5.2",
-    "sane": "^5.0.1"
+    "sane": "^5.0.1",
+    "jackspeak": "2.1.1"
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
@@ -90,23 +91,23 @@
     "@babel/preset-react": "^7.22.5",
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
-    "@gitlab/stylelint-config": "4.1.0",
+    "@gitlab/stylelint-config": "5.0.0",
     "@gitlab/svgs": "3.59.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.0.26",
-    "@storybook/addon-docs": "7.0.26",
-    "@storybook/addon-essentials": "7.0.26",
-    "@storybook/addon-storyshots": "7.0.26",
-    "@storybook/addon-storyshots-puppeteer": "7.0.26",
-    "@storybook/addon-viewport": "7.0.26",
-    "@storybook/builder-webpack5": "7.0.26",
-    "@storybook/theming": "7.0.26",
-    "@storybook/vue": "7.0.26",
-    "@storybook/vue-webpack5": "7.0.26",
-    "@storybook/vue3": "7.0.26",
-    "@storybook/vue3-webpack5": "7.0.26",
+    "@storybook/addon-a11y": "7.3.2",
+    "@storybook/addon-docs": "7.3.2",
+    "@storybook/addon-essentials": "7.3.2",
+    "@storybook/addon-storyshots": "7.3.2",
+    "@storybook/addon-storyshots-puppeteer": "7.3.2",
+    "@storybook/addon-viewport": "7.3.2",
+    "@storybook/builder-webpack5": "7.3.2",
+    "@storybook/theming": "7.3.2",
+    "@storybook/vue": "7.3.2",
+    "@storybook/vue-webpack5": "7.3.2",
+    "@storybook/vue3": "7.3.2",
+    "@storybook/vue3-webpack5": "7.3.2",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -124,7 +125,7 @@
     "eslint": "8.47.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.14.0",
-    "eslint-plugin-storybook": "0.6.12",
+    "eslint-plugin-storybook": "0.6.13",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
@@ -137,7 +138,7 @@
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
     "plop": "^2.5.4",
-    "postcss": "8.4.14",
+    "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",
     "postcss-scss": "4.0.4",
     "prettier": "2.6.2",
@@ -155,12 +156,10 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.0.26",
-    "storybook-dark-mode": "3.0.0",
+    "storybook": "7.3.2",
+    "storybook-dark-mode": "3.0.1",
     "style-dictionary": "^3.8.0",
-    "stylelint": "14.9.1",
-    "stylelint-config-prettier": "^9.0.5",
-    "stylelint-prettier": "3.0.0",
+    "stylelint": "15.10.2",
     "vue": "2.7.14",
     "vue-loader": "^15.8.3",
     "vue-loader-vue3": "npm:vue-loader@17",

package/src/components/base/toggle/toggle.scss

@@ -29,18 +29,18 @@
     .gl-toggle {
       @include gl-cursor-not-allowed;
       @include gl-bg-gray-200;
-    }
 
-    .toggle-icon > svg {
-      @include gl-fill-gray-200;
+      .toggle-icon > svg {
+        @include gl-fill-gray-200;
+      }
     }
 
     .gl-toggle.is-checked {
       @include gl-bg-blue-200;
-    }
 
-    .toggle-icon > svg {
-      @include gl-fill-blue-200;
+      .toggle-icon > svg {
+        @include gl-fill-blue-200;
+      }
     }
 
     .gl-toggle-label,
@@ -50,35 +50,6 @@
   }
 }
 
-.gl-toggle-label-container {
-  @include gl-flex-shrink-0;
-  @include gl-display-flex;
-  @include gl-flex-direction-column;
-}
-
-.gl-toggle-switch-container {
-  @include gl-display-flex;
-  @include gl-flex-direction-column;
-}
-
-.gl-toggle-label-position-block {
-  @include gl-justify-content-space-between;
-  @include gl-align-items-center;
-  @include gl-w-full;
-  @include gl-gap-3;
-
-  .gl-toggle-label-container {
-    @include gl-gap-2;
-    @include gl-flex-shrink-1;
-  }
-
-  .gl-toggle-switch-container {
-    @include gl-align-items-flex-end;
-    @include gl-gap-2;
-    @include gl-flex-shrink-1;
-  }
-}
-
 .gl-help-label {
   @include gl-mt-3;
   @include gl-text-gray-500;

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

@@ -138,43 +138,31 @@ describe('toggle', () => {
 
   describe('label position', () => {
     describe.each`
-      state       | labelPosition                 | hasGlSrOnlyClass | flexDirection                 | showsHelpText | showsDescription
-      ${'top'}    | ${toggleLabelPosition.top}    | ${false}         | ${'gl-flex-direction-column'} | ${true}       | ${true}
-      ${'left'}   | ${toggleLabelPosition.left}   | ${false}         | ${'gl-toggle-label-inline'}   | ${false}      | ${false}
-      ${'hidden'} | ${toggleLabelPosition.hidden} | ${true}          | ${'gl-flex-direction-column'} | ${true}       | ${true}
-      ${'block'}  | ${toggleLabelPosition.block}  | ${false}         | ${'gl-toggle-label-inline'}   | ${true}       | ${true}
-    `(
-      'when $state',
-      ({ labelPosition, hasGlSrOnlyClass, flexDirection, showsHelpText, showsDescription }) => {
-        beforeEach(() => {
-          createWrapper({ labelPosition, help: helpText, description: descriptionText });
-        });
-
-        it(`${flexDirection} class is added to the label`, () => {
-          const cssClasses = wrapper.find('[data-testid="toggle-wrapper"]').classes();
-
-          expect(cssClasses).toContain(flexDirection);
-        });
-
-        it(`${hasGlSrOnlyClass ? 'adds' : 'does not add'} 'gl-sr-only' class to the label`, () => {
-          const cssClasses = wrapper.find('[data-testid="toggle-label"]').classes();
-          return hasGlSrOnlyClass
-            ? expect(cssClasses).toContain('gl-sr-only')
-            : expect(cssClasses).not.toContain('gl-sr-only');
-        });
-
-        it('has accessible name for the button', () => {
-          expect(findButton().attributes('aria-labelledby')).toBeDefined();
-        });
-
-        it(`${showsHelpText ? 'shows' : 'does not show'} the help text`, () => {
-          expect(findHelpElement().exists()).toBe(showsHelpText);
-        });
-
-        it(`${showsDescription ? 'shows' : 'does not show'} the description`, () => {
-          expect(findDescriptionElement().exists()).toBe(showsDescription);
-        });
-      }
-    );
+      state       | labelPosition                 | hasGlSrOnlyClass | flexDirection
+      ${'top'}    | ${toggleLabelPosition.top}    | ${false}         | ${'gl-flex-direction-column'}
+      ${'left'}   | ${toggleLabelPosition.left}   | ${false}         | ${'gl-toggle-label-inline'}
+      ${'hidden'} | ${toggleLabelPosition.hidden} | ${true}          | ${'gl-flex-direction-column'}
+    `('when $state', ({ labelPosition, hasGlSrOnlyClass, flexDirection }) => {
+      beforeEach(() => {
+        createWrapper({ labelPosition });
+      });
+
+      it(`${flexDirection} class is added to the label`, () => {
+        const cssClasses = wrapper.find('[data-testid="toggle-wrapper"]').classes();
+
+        return expect(cssClasses).toContain(flexDirection);
+      });
+
+      it(`${hasGlSrOnlyClass ? 'adds' : 'does not add'} 'gl-sr-only' class to the label`, () => {
+        const cssClasses = wrapper.find('[data-testid="toggle-label"]').classes();
+        return hasGlSrOnlyClass
+          ? expect(cssClasses).toContain('gl-sr-only')
+          : expect(cssClasses).not.toContain('gl-sr-only');
+      });
+
+      it('has accessible name for the button', () => {
+        expect(findButton().attributes('aria-labelledby')).toBeDefined();
+      });
+    });
   });
 });

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

@@ -67,12 +67,6 @@ LabelPositionLeft.args = generateProps({
   labelPosition: 'left',
 });
 
-export const LabelPositionBlock = Template.bind({});
-LabelPositionBlock.args = generateProps({
-  labelPosition: 'block',
-  description: withDescription,
-});
-
 export default {
   title: 'base/toggle',
   component: GlToggle,

package/src/components/base/toggle/toggle.vue

@@ -90,42 +90,19 @@ export default {
     };
   },
   computed: {
-    layoutAllowsDescription() {
-      return this.isVerticalLayout || this.isBlockLayout;
-    },
     shouldRenderDescription() {
-      return (
-        Boolean(this.$scopedSlots.description || this.description) && this.layoutAllowsDescription
-      );
-    },
-    labelIsSrOnly() {
-      return this.labelPosition === 'hidden';
-    },
-    layoutAllowsHelp() {
-      return this.isVerticalLayout || this.isBlockLayout;
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+      return Boolean(this.$scopedSlots.description || this.description) && this.isVerticalLayout;
     },
     shouldRenderHelp() {
-      return Boolean(this.$scopedSlots.help || this.help) && this.layoutAllowsHelp;
-    },
-    labelContainerClasses() {
-      return {
-        'gl-mb-3': this.isVerticalLayout && !this.labelIsSrOnly,
-      };
-    },
-    labelClasses() {
-      if (this.labelIsSrOnly) return 'gl-sr-only';
-      return {
-        'gl-mb-2': this.shouldRenderDescription,
-        'gl-mb-3': !this.shouldRenderDescription && !this.isVerticalLayout,
-      };
-    },
-    wrapperClasses() {
-      return {
-        'gl-flex-direction-column': this.isVerticalLayout,
-        'gl-toggle-label-inline': !this.isVerticalLayout,
-        'is-disabled': this.disabled,
-        'gl-toggle-label-position-block': this.isBlockLayout,
-      };
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+      return Boolean(this.$slots.help || this.help) && this.isVerticalLayout;
+    },
+    toggleClasses() {
+      return [
+        { 'gl-sr-only': this.labelPosition === 'hidden' },
+        this.shouldRenderDescription ? 'gl-mb-2' : 'gl-mb-3',
+      ];
     },
     icon() {
       return this.value ? 'mobile-issue-close' : 'close';
@@ -139,9 +116,6 @@ export default {
     isVerticalLayout() {
       return this.labelPosition === 'top' || this.labelPosition === 'hidden';
     },
-    isBlockLayout() {
-      return this.labelPosition === 'block';
-    },
   },
 
   beforeCreate() {
@@ -167,50 +141,55 @@ export default {
 
 <template>
   <div
-    class="gl-toggle-wrapper gl-display-flex gl-mb-0 flex-grow-1"
-    :class="wrapperClasses"
+    class="gl-toggle-wrapper gl-display-flex gl-mb-0"
+    :class="{
+      'gl-flex-direction-column': isVerticalLayout,
+      'gl-toggle-label-inline': !isVerticalLayout,
+      'is-disabled': disabled,
+    }"
     data-testid="toggle-wrapper"
   >
-    <span :class="labelContainerClasses" class="gl-toggle-label-container">
-      <span :id="labelId" :class="labelClasses" class="gl-toggle-label" data-testid="toggle-label">
-        <!-- @slot The toggle's label. -->
-        <slot name="label">{{ label }}</slot>
-      </span>
-      <span
-        v-if="shouldRenderDescription"
-        class="gl-description-label"
-        data-testid="toggle-description"
-      >
-        <!-- @slot A description text to be shown below the label. -->
-        <slot name="description">{{ description }}</slot>
-      </span>
+    <span
+      :id="labelId"
+      :class="toggleClasses"
+      class="gl-toggle-label gl-flex-shrink-0"
+      data-testid="toggle-label"
+    >
+      <!-- @slot The toggle's label. -->
+      <slot name="label">{{ label }}</slot>
+    </span>
+    <span
+      v-if="shouldRenderDescription"
+      class="gl-description-label gl-mb-3"
+      data-testid="toggle-description"
+    >
+      <!-- @slot A description text to be shown below the label. -->
+      <slot name="description">{{ description }}</slot>
     </span>
-    <span class="gl-toggle-switch-container">
-      <input v-if="name" :name="name" :value="value" type="hidden" />
-      <button
-        role="switch"
-        :aria-checked="isChecked"
-        :aria-labelledby="labelId"
-        :aria-describedby="helpId"
-        :aria-disabled="disabled"
-        :class="{
-          'gl-toggle': true,
-          'is-checked': value,
-          'is-disabled': disabled,
-        }"
-        class="gl-flex-shrink-0"
-        type="button"
-        @click.prevent="toggleFeature"
-      >
-        <gl-loading-icon v-if="isLoading" color="light" class="toggle-loading" />
-        <span v-else :class="{ 'toggle-icon': true, disabled: disabled }">
-          <gl-icon :name="icon" :size="16" />
-        </span>
-      </button>
-      <span v-if="shouldRenderHelp" :id="helpId" class="gl-help-label" data-testid="toggle-help">
-        <!-- @slot A help text to be shown below the toggle. -->
-        <slot name="help">{{ help }}</slot>
+    <input v-if="name" :name="name" :value="value" type="hidden" />
+    <button
+      role="switch"
+      :aria-checked="isChecked"
+      :aria-labelledby="labelId"
+      :aria-describedby="helpId"
+      :aria-disabled="disabled"
+      :class="{
+        'gl-toggle': true,
+        'is-checked': value,
+        'is-disabled': disabled,
+      }"
+      class="gl-flex-shrink-0"
+      type="button"
+      @click.prevent="toggleFeature"
+    >
+      <gl-loading-icon v-if="isLoading" color="light" class="toggle-loading" />
+      <span v-else :class="{ 'toggle-icon': true, disabled: disabled }">
+        <gl-icon :name="icon" :size="16" />
       </span>
+    </button>
+    <span v-if="shouldRenderHelp" :id="helpId" class="gl-help-label" data-testid="toggle-help">
+      <!-- @slot A help text to be shown below the toggle. -->
+      <slot name="help">{{ help }}</slot>
     </span>
   </div>
 </template>

package/src/index.js

@@ -28,7 +28,6 @@ export { default as GlPaginatedList } from './components/base/paginated_list/pag
 export { default as GlPopover } from './components/base/popover/popover.vue';
 export { default as GlProgressBar } from './components/base/progress_bar/progress_bar.vue';
 export { default as GlToken } from './components/base/token/token.vue';
-export { default as GlDeprecatedSkeletonLoading } from './components/base/skeleton_loading/skeleton_loading.vue';
 export { default as GlBadge } from './components/base/badge/badge.vue';
 export { default as GlBanner } from './components/base/banner/banner.vue';
 export { default as GlButton } from './components/base/button/button.vue';

package/src/scss/components.scss

@@ -61,7 +61,6 @@
 @import '../components/base/search_box_by_click/search_box_by_click';
 @import '../components/base/segmented_control/segmented_control';
 @import '../components/base/skeleton_loader/skeleton_loader';
-@import '../components/base/skeleton_loading/skeleton_loading';
 @import '../components/base/tabs/tabs/tabs';
 @import '../components/base/toast/toast';
 @import '../components/base/table/table';

package/src/scss/utilities.scss

@@ -3587,14 +3587,6 @@
   flex-shrink: 0 !important;
 }
 
-.gl-flex-shrink-1 {
-  flex-shrink: 1;
-}
-
-.gl-flex-shrink-1\! {
-  flex-shrink: 1 !important;
-}
-
 .gl-flex-grow-0 {
   flex-grow: 0;
 }

package/src/scss/utility-mixins/flex.scss

@@ -183,10 +183,6 @@
   flex-shrink: 0;
 }
 
-@mixin gl-flex-shrink-1 {
-  flex-shrink: 1;
-}
-
 @mixin gl-flex-grow-0 {
   flex-grow: 0;
 }

package/src/utils/constants.js

@@ -297,7 +297,6 @@ export const formInputSizes = {
 export const toggleLabelPosition = {
   hidden: 'hidden',
   left: 'left',
-  block: 'block',
   top: 'top',
 };
 

package/dist/components/base/skeleton_loading/skeleton_loading.js

@@ -1,61 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlSkeletonLoading',
-  props: {
-    /**
-     * Controls the number of lines.
-     */
-    lines: {
-      type: Number,
-      required: false,
-      default: 3,
-      validator(value) {
-        return value > 0 && value < 4;
-      }
-    }
-  },
-  computed: {
-    lineClasses() {
-      return new Array(this.lines).fill().map((_, i) => `skeleton-line-${i + 1}`);
-    }
-  }
-};
-
-/* 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('div',{staticClass:"animation-container"},_vm._l((_vm.lineClasses),function(css,index){return _c('div',{key:index,class:css})}),0)};
-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_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/src/components/base/skeleton_loading/skeleton_loading.md

@@ -1,10 +0,0 @@
-The Skeleton Loading component has been deprecated, please use [Skeleton Loader](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-skeleton-loader--default).
-
-How to replace this component with [Skeleton Loader](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-skeleton-loader--default):
-
-1. Update imports
-   - `import { GlSkeletonLoading } from '@gitlab/ui'` -> `import { GlSkeletonLoader } from '@gitlab/ui'`
-2. Update component definitions
-   - `components: { GlSkeletonLoading }` -> `components: { GlSkeletonLoader }`
-3. Update template
-   - `<gl-skeleton-loading />` -> `<gl-skeleton-loader />`

package/src/components/base/skeleton_loading/skeleton_loading.scss

@@ -1,66 +0,0 @@
-// variables
-$skeleton-line-height: 10px;
-
-$skeleton-line-widths: (156px, 235px, 200px);
-
-// animation
-@keyframes blockTextShine {
-  0% {
-    transform: translateX(-468px);
-  }
-
-  100% {
-    transform: translateX(468px);
-  }
-}
-
-// mixins
-@mixin gl-tmp-skeleton-loading-shine-background {
-  background-image: linear-gradient(
-    to right,
-    $gray-100 0%,
-    $gray-50 20%,
-    $gray-100 40%,
-    $gray-100 100%
-  );
-}
-
-@mixin gl-tmp-skeleton-loading-shine-animation {
-  animation: blockTextShine 1s linear infinite forwards;
-}
-
-.animation-container {
-  @include gl-h-8;
-  @include gl-overflow-hidden;
-
-  &.animation-container-small {
-    @include gl-h-4;
-  }
-
-  [class^='skeleton-line-'] {
-    height: $skeleton-line-height;
-    @include gl-relative;
-    @include gl-bg-gray-50;
-    @include gl-overflow-hidden;
-
-    &:not(:last-of-type) {
-      @include gl-mb-2;
-    }
-
-    &::after {
-      height: $skeleton-line-height;
-      @include gl-content-empty;
-      @include gl-display-block;
-      @include gl-bg-no-repeat;
-      @include gl-bg-size-cover;
-      @include gl-tmp-skeleton-loading-shine-background;
-      @include gl-tmp-skeleton-loading-shine-animation;
-    }
-  }
-}
-
-@for $count from 1 through length($skeleton-line-widths) {
-  .skeleton-line-#{$count} {
-    width: nth($skeleton-line-widths, $count);
-  }
-}

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

@@ -1,58 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import SkeletonLoading from './skeleton_loading.vue';
-
-describe('skeleton loading component', () => {
-  const mountWithOptions = shallowMount.bind(null, SkeletonLoading);
-
-  it('should render 1 line', () => {
-    const component = mountWithOptions({
-      propsData: {
-        lines: 1,
-      },
-    });
-
-    const lines = component.vm.$el.querySelectorAll('.animation-container div');
-    expect(lines).toHaveLength(1);
-    expect(lines[0].classList.contains('skeleton-line-1')).toEqual(true);
-  });
-
-  it('should render 2 lines', () => {
-    const component = mountWithOptions({
-      propsData: {
-        lines: 2,
-      },
-    });
-
-    const lines = component.vm.$el.querySelectorAll('.animation-container div');
-
-    expect(lines).toHaveLength(2);
-    expect(lines[0].classList.contains('skeleton-line-1')).toEqual(true);
-    expect(lines[1].classList.contains('skeleton-line-2')).toEqual(true);
-  });
-
-  describe('3 lines', () => {
-    function expectThreeLines(component) {
-      const lines = component.vm.$el.querySelectorAll('.animation-container div');
-      expect(lines).toHaveLength(3);
-      expect(lines[0].classList.contains('skeleton-line-1')).toEqual(true);
-      expect(lines[1].classList.contains('skeleton-line-2')).toEqual(true);
-      expect(lines[2].classList.contains('skeleton-line-3')).toEqual(true);
-    }
-
-    it('should render by default', () => {
-      const component = mountWithOptions({});
-
-      expectThreeLines(component);
-    });
-
-    it('should render when 3 lines are passed', () => {
-      const component = mountWithOptions({
-        propsData: {
-          lines: 3,
-        },
-      });
-
-      expectThreeLines(component);
-    });
-  });
-});