@gitlab/ui 64.20.1 → 64.21.0

package/dist/utils/constants.js

@@ -249,6 +249,7 @@ 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": "64.20.1",
+  "version": "64.21.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -118,7 +118,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "12.17.0",
+    "cypress": "12.17.1",
     "emoji-regex": "^10.0.0",
     "eslint": "8.44.0",
     "eslint-import-resolver-jest": "3.0.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,6 +50,35 @@
   }
 }
 
+.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,31 +138,43 @@ describe('toggle', () => {
 
   describe('label position', () => {
     describe.each`
-      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();
-      });
-    });
+      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);
+        });
+      }
+    );
   });
 });

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

@@ -67,6 +67,12 @@ 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,19 +90,42 @@ export default {
     };
   },
   computed: {
+    layoutAllowsDescription() {
+      return this.isVerticalLayout || this.isBlockLayout;
+    },
     shouldRenderDescription() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$scopedSlots.description || this.description) && this.isVerticalLayout;
+      return (
+        Boolean(this.$scopedSlots.description || this.description) && this.layoutAllowsDescription
+      );
     },
-    shouldRenderHelp() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$slots.help || this.help) && this.isVerticalLayout;
+    labelIsSrOnly() {
+      return this.labelPosition === 'hidden';
     },
-    toggleClasses() {
-      return [
-        { 'gl-sr-only': this.labelPosition === 'hidden' },
-        this.shouldRenderDescription ? 'gl-mb-2' : 'gl-mb-3',
-      ];
+    layoutAllowsHelp() {
+      return this.isVerticalLayout || this.isBlockLayout;
+    },
+    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,
+      };
     },
     icon() {
       return this.value ? 'mobile-issue-close' : 'close';
@@ -116,6 +139,9 @@ export default {
     isVerticalLayout() {
       return this.labelPosition === 'top' || this.labelPosition === 'hidden';
     },
+    isBlockLayout() {
+      return this.labelPosition === 'block';
+    },
   },
 
   beforeCreate() {
@@ -141,55 +167,50 @@ export default {
 
 <template>
   <div
-    class="gl-toggle-wrapper gl-display-flex gl-mb-0"
-    :class="{
-      'gl-flex-direction-column': isVerticalLayout,
-      'gl-toggle-label-inline': !isVerticalLayout,
-      'is-disabled': disabled,
-    }"
+    class="gl-toggle-wrapper gl-display-flex gl-mb-0 flex-grow-1"
+    :class="wrapperClasses"
     data-testid="toggle-wrapper"
   >
-    <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 :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>
-    <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 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>
       </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

@@ -3571,6 +3571,14 @@
   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,6 +183,10 @@
   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,6 +297,7 @@ export const formInputSizes = {
 export const toggleLabelPosition = {
   hidden: 'hidden',
   left: 'left',
+  block: 'block',
   top: 'top',
 };