@gitlab/ui 66.0.0 → 66.1.0

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": "66.0.0",
+  "version": "66.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -86,13 +86,13 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.22.10",
+    "@babel/core": "^7.22.11",
     "@babel/preset-env": "^7.22.10",
     "@babel/preset-react": "^7.22.5",
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "5.0.0",
-    "@gitlab/svgs": "3.59.0",
+    "@gitlab/svgs": "3.60.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -120,18 +120,18 @@
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
     "cypress": "12.17.4",
-    "dompurify": "^2.4.7",
+    "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.47.0",
+    "eslint": "8.48.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.14.0",
     "eslint-plugin-storybook": "0.6.13",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^29.6.2",
-    "jest-circus": "29.6.2",
-    "jest-environment-jsdom": "29.6.2",
+    "jest": "^29.6.4",
+    "jest-circus": "29.6.4",
+    "jest-environment-jsdom": "29.6.4",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
     "module-alias": "^2.2.2",

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/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;
 }
@@ -6395,24 +6387,48 @@
 .gl-mb-4\! {
   margin-bottom: $gl-spacing-scale-4 !important;
 }
+.gl-mb-n4 {
+  margin-bottom: -$gl-spacing-scale-4;
+}
+.gl-mb-n4\! {
+  margin-bottom: -$gl-spacing-scale-4 !important;
+}
 .gl-mb-5 {
   margin-bottom: $gl-spacing-scale-5;
 }
 .gl-mb-5\! {
   margin-bottom: $gl-spacing-scale-5 !important;
 }
+.gl-mb-n5 {
+  margin-bottom: -$gl-spacing-scale-5;
+}
+.gl-mb-n5\! {
+  margin-bottom: -$gl-spacing-scale-5 !important;
+}
 .gl-mb-6 {
   margin-bottom: $gl-spacing-scale-6;
 }
 .gl-mb-6\! {
   margin-bottom: $gl-spacing-scale-6 !important;
 }
+.gl-mb-n6 {
+  margin-bottom: -$gl-spacing-scale-6;
+}
+.gl-mb-n6\! {
+  margin-bottom: -$gl-spacing-scale-6 !important;
+}
 .gl-mb-7 {
   margin-bottom: $gl-spacing-scale-7;
 }
 .gl-mb-7\! {
   margin-bottom: $gl-spacing-scale-7 !important;
 }
+.gl-mb-n7 {
+  margin-bottom: -$gl-spacing-scale-7;
+}
+.gl-mb-n7\! {
+  margin-bottom: -$gl-spacing-scale-7 !important;
+}
 .gl-mb-8 {
   margin-bottom: $gl-spacing-scale-8;
 }

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/scss/utility-mixins/spacing.scss

@@ -559,18 +559,34 @@
   margin-bottom: $gl-spacing-scale-4;
 }
 
+@mixin gl-mb-n4 {
+  margin-bottom: -$gl-spacing-scale-4;
+}
+
 @mixin gl-mb-5 {
   margin-bottom: $gl-spacing-scale-5;
 }
 
+@mixin gl-mb-n5 {
+  margin-bottom: -$gl-spacing-scale-5;
+}
+
 @mixin gl-mb-6 {
   margin-bottom: $gl-spacing-scale-6;
 }
 
+@mixin gl-mb-n6 {
+  margin-bottom: -$gl-spacing-scale-6;
+}
+
 @mixin gl-mb-7 {
   margin-bottom: $gl-spacing-scale-7;
 }
 
+@mixin gl-mb-n7 {
+  margin-bottom: -$gl-spacing-scale-7;
+}
+
 @mixin gl-mb-8 {
   margin-bottom: $gl-spacing-scale-8;
 }

package/src/utils/constants.js

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