@gitlab/ui 65.3.1 → 66.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "65.3.1",
+  "version": "66.0.0",
   "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",
@@ -118,13 +119,13 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "12.17.3",
+    "cypress": "12.17.4",
     "dompurify": "^2.4.7",
     "emoji-regex": "^10.0.0",
     "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/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

@@ -3803,6 +3803,18 @@
   justify-content: flex-start !important;
 }
 
+.gl-sm-justify-content-start {
+  @include gl-media-breakpoint-up(sm) {
+  justify-content: flex-start;
+  }
+}
+
+.gl-sm-justify-content-start\! {
+  @include gl-media-breakpoint-up(sm) {
+  justify-content: flex-start !important;
+  }
+}
+
 .gl-md-justify-content-start {
   @include gl-media-breakpoint-up(md) {
   justify-content: flex-start;

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

@@ -291,6 +291,12 @@
   justify-content: flex-start;
 }
 
+@mixin gl-sm-justify-content-start {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-justify-content-start;
+  }
+}
+
 @mixin gl-md-justify-content-start {
   @include gl-media-breakpoint-up(md) {
     @include gl-justify-content-start;

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);
-    });
-  });
-});

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

@@ -1,41 +0,0 @@
-import GlDeprecatedSkeletonLoading from './skeleton_loading.vue';
-import readme from './skeleton_loading.md';
-
-const components = {
-  GlDeprecatedSkeletonLoading,
-};
-
-const template = '<gl-deprecated-skeleton-loading :lines="lines" />';
-
-function generateProps() {
-  return {
-    lines: 3,
-  };
-}
-
-const Template = (args) => ({
-  components,
-  props: Object.keys(args),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'base/skeleton loading',
-  component: GlDeprecatedSkeletonLoading,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    lines: {
-      options: [1, 2, 3],
-      control: 'select',
-    },
-  },
-};

package/src/components/base/skeleton_loading/skeleton_loading.vue

@@ -1,29 +0,0 @@
-<script>
-export default {
-  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>
-
-<template>
-  <div class="animation-container">
-    <div v-for="(css, index) in lineClasses" :key="index" :class="css"></div>
-  </div>
-</template>