@gitlab/ui 55.2.0 → 55.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "55.2.0",
+  "version": "55.2.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -87,18 +87,18 @@
     "@gitlab/eslint-plugin": "18.1.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.19.0",
+    "@gitlab/svgs": "3.20.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.5.15",
-    "@storybook/addon-docs": "6.5.15",
-    "@storybook/addon-essentials": "6.5.15",
-    "@storybook/addon-storyshots": "6.5.15",
-    "@storybook/addon-storyshots-puppeteer": "6.5.15",
-    "@storybook/addon-viewport": "6.5.15",
-    "@storybook/theming": "6.5.15",
-    "@storybook/vue": "6.5.15",
+    "@storybook/addon-a11y": "6.5.16",
+    "@storybook/addon-docs": "6.5.16",
+    "@storybook/addon-essentials": "6.5.16",
+    "@storybook/addon-storyshots": "6.5.16",
+    "@storybook/addon-storyshots-puppeteer": "6.5.16",
+    "@storybook/addon-viewport": "6.5.16",
+    "@storybook/theming": "6.5.16",
+    "@storybook/vue": "6.5.16",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -123,9 +123,9 @@
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^29.4.1",
-    "jest-circus": "29.4.1",
-    "jest-environment-jsdom": "29.4.1",
+    "jest": "^29.4.2",
+    "jest-circus": "29.4.2",
+    "jest-environment-jsdom": "29.4.2",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
     "npm-run-all": "^4.1.5",

package/src/components/base/form/form_group/form_group.scss

@@ -8,12 +8,13 @@
     @include gl-pt-0;
     @include gl-pb-3;
 
-    > .form-text {
+    > .label-description {
       @include gl-mt-3;
     }
   }
 
-  .optional-label {
+  .optional-label,
+  .label-description {
     @include gl-font-weight-normal;
   }
 

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

@@ -1,12 +1,10 @@
 <script>
 import { BFormGroup } from 'bootstrap-vue';
 import { isString, isArray, isPlainObject } from 'lodash';
-import GlFormText from '../form_text/form_text.vue';
 
 export default {
   components: {
     BFormGroup,
-    GlFormText,
   },
   inheritAttrs: false,
   props: {
@@ -63,9 +61,9 @@ export default {
           optionalText
         }}</span>
       </slot>
-      <gl-form-text v-if="hasLabelDescription" data-testid="label-description">
+      <div v-if="hasLabelDescription" data-testid="label-description" class="label-description">
         <slot name="label-description">{{ labelDescription }}</slot>
-      </gl-form-text>
+      </div>
     </template>
 
     <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -25,42 +25,6 @@ import {
   mockGroupsCustomItem,
 } from './mock_data';
 
-const defaultValue = (prop) => GlDisclosureDropdown.props[prop].default;
-
-const generateProps = ({
-  items = mockItems,
-  category = defaultValue('category'),
-  variant = defaultValue('variant'),
-  size = defaultValue('size'),
-  disabled = defaultValue('disabled'),
-  loading = defaultValue('loading'),
-  noCaret = defaultValue('noCaret'),
-  placement = defaultValue('placement'),
-  toggleId = defaultValue('toggleId')(),
-  toggleText,
-  textSrOnly = defaultValue('textSrOnly'),
-  icon = '',
-  toggleAriaLabelledBy,
-  listAriaLabelledBy,
-  startOpened = true,
-} = {}) => ({
-  items,
-  category,
-  variant,
-  size,
-  disabled,
-  loading,
-  noCaret,
-  placement,
-  toggleId,
-  toggleText,
-  textSrOnly,
-  icon,
-  toggleAriaLabelledBy,
-  listAriaLabelledBy,
-  startOpened,
-});
-
 const makeBindings = (overrides = {}) =>
   Object.entries({
     ':items': 'items',
@@ -119,13 +83,14 @@ export const Default = (args, { argTypes }) => ({
     </div>
   `,
 });
-Default.args = generateProps({
+Default.args = {
+  items: mockItems,
   icon: 'ellipsis_v',
   noCaret: true,
   toggleText: 'Disclosure',
   textSrOnly: true,
   toggleId: TOGGLE_ID,
-});
+};
 Default.decorators = [makeContainer({ height: '200px' })];
 
 export const CustomListItem = (args, { argTypes }) => ({
@@ -162,11 +127,11 @@ export const CustomListItem = (args, { argTypes }) => ({
   ),
 });
 
-CustomListItem.args = generateProps({
+CustomListItem.args = {
   items: mockItemsCustomItem,
   toggleText: 'Merge requests',
   placement: 'center',
-});
+};
 CustomListItem.decorators = [makeContainer({ height: '200px' })];
 
 const makeGroupedExample = (changes) => {
@@ -190,7 +155,7 @@ const makeGroupedExample = (changes) => {
     ...changes,
   });
 
-  story.args = generateProps({ items: mockGroups });
+  story.args = { items: mockGroups };
   story.decorators = [makeContainer({ height: '340px' })];
 
   return story;
@@ -199,12 +164,12 @@ const makeGroupedExample = (changes) => {
 export const Groups = makeGroupedExample({
   template: template(''),
 });
-Groups.args = generateProps({
+Groups.args = {
   icon: 'plus-square',
   items: mockGroups,
   toggleText: 'Create new',
   textSrOnly: true,
-});
+};
 
 export const CustomGroupsAndItems = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -245,10 +210,10 @@ export const CustomGroupsAndItems = (args, { argTypes }) => ({
   ),
 });
 
-CustomGroupsAndItems.args = generateProps({
+CustomGroupsAndItems.args = {
   items: mockGroupsCustomItem,
   toggleText: 'Merge requests',
-});
+};
 CustomGroupsAndItems.decorators = [makeContainer({ height: '200px' })];
 
 export const CustomGroupsItemsAndToggle = makeGroupedExample({
@@ -313,12 +278,11 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
   },
   groups: mockProfileGroups,
 });
-CustomGroupsItemsAndToggle.args = generateProps({
+CustomGroupsItemsAndToggle.args = {
   icon: 'plus-square',
   toggleText: 'User profile menu',
   textSrOnly: true,
-  items: null,
-});
+};
 CustomGroupsItemsAndToggle.decorators = [makeContainer({ height: '400px' })];
 
 export const MiscellaneousContent = (args, { argTypes }) => ({
@@ -338,12 +302,11 @@ export const MiscellaneousContent = (args, { argTypes }) => ({
   ),
 });
 
-MiscellaneousContent.args = generateProps({
+MiscellaneousContent.args = {
   icon: 'doc-text',
   toggleText: 'Miscellaneous content',
   textSrOnly: true,
-  items: null,
-});
+};
 MiscellaneousContent.decorators = [makeContainer({ height: '200px' })];
 
 export default {
@@ -382,4 +345,7 @@ export default {
       },
     },
   },
+  args: {
+    startOpened: true,
+  },
 };