@gitlab/ui 38.6.0 → 38.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "38.6.0",
+  "version": "38.8.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -114,6 +114,7 @@
     "eslint": "7.32.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
+    "eslint-plugin-storybook": "^0.5.7",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",

package/src/components/base/filtered_search/filtered_search.vue

@@ -180,6 +180,7 @@ export default {
           this.applyNewValue(cloneDeep(newValue));
         }
       },
+      deep: true,
       immediate: true,
     },
   },

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

@@ -13,16 +13,15 @@
   @include form-control-focus($ignore-warning: true);
   @include gl-appearance-none;
 
-  &[type='color']:read-only {
-    cursor: pointer;
-  }
-
   &:disabled,
   &:not(.form-control-plaintext):not([type='color']):read-only {
     @include gl-bg-gray-10;
-    @include gl-text-gray-400;
     @include gl-inset-border-1-gray-100;
+  }
+
+  &:disabled {
     @include gl-cursor-not-allowed;
+    @include gl-text-gray-400;
   }
 
   &:not(.form-control-plaintext):focus {

package/src/components/base/form/form_input/form_input.stories.js

@@ -5,6 +5,7 @@ import readme from './form_input.md';
 const template = `
   <gl-form-input
     type="text"
+    :readonly="readonly"
     :disabled="disabled"
     :value="value"
     :size="size"
@@ -14,10 +15,12 @@ const generateProps = ({
   size = GlFormInput.props.size.default,
   value = '',
   disabled = false,
+  readonly = false,
 } = {}) => ({
   size,
   value,
   disabled,
+  readonly,
 });
 
 const Template = (args) => ({
@@ -32,6 +35,9 @@ Default.args = generateProps();
 export const Disabled = Template.bind({});
 Disabled.args = generateProps({ value: 'some text', disabled: true });
 
+export const Readonly = Template.bind({});
+Readonly.args = generateProps({ value: 'readonly text', readonly: true });
+
 export const Sizes = (args, { argTypes }) => ({
   components: { GlFormInput },
   props: Object.keys(argTypes),

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

@@ -25,7 +25,7 @@ const generateTemplate = ({ props = {}, slots = {} } = {}) => {
         :action-primary="{text: 'Okay'}"
         :action-secondary="{text: 'Discard Changes'}"
         :action-cancel="{text: 'Cancel'}"
-        :visible="visible"
+        :visible="$options.viewMode !== 'docs'"
         :scrollable="scrollable"
         modal-id="test-modal-id"
         title="Example title"
@@ -42,18 +42,18 @@ const generateTemplate = ({ props = {}, slots = {} } = {}) => {
   `;
 };
 
-const Template = (args, { argTypes }) => ({
+const Template = (args, { argTypes, viewMode }) => ({
   components: { GlModal, GlButton },
   directives: { GlModalDirective },
   props: Object.keys(argTypes),
   template: generateTemplate(),
+  viewMode,
 });
 
 const generateProps = ({
   variant = variantOptionsWithNoDefault.default,
   contentPagraphs = 1,
   scrollable = false,
-  visible = false,
 } = {}) => ({
   headerBgVariant: variant,
   headerBorderVariant: variant,
@@ -65,23 +65,18 @@ const generateProps = ({
   footerTextVariant: variant,
   contentParagraphs: contentPagraphs,
   scrollable,
-  visible,
 });
 
 export const Default = Template.bind({});
 Default.args = generateProps();
 
-export const OpenedModal = Template.bind({});
-OpenedModal.args = generateProps({ visible: true });
-
 export const WithScrollingContent = Template.bind({});
 WithScrollingContent.args = generateProps({
   contentPagraphs: 100,
   scrollable: true,
-  visible: true,
 });
 
-export const WithAHeader = (args, { argTypes }) => ({
+export const WithAHeader = (args, { argTypes, viewMode }) => ({
   components: { GlModal, GlButton },
   directives: { GlModalDirective },
   props: Object.keys(argTypes),
@@ -90,22 +85,24 @@ export const WithAHeader = (args, { argTypes }) => ({
       'modal-header': '<h4>A custom header</h4>',
     },
   }),
+  viewMode,
 });
-WithAHeader.args = generateProps({ visible: true });
+WithAHeader.args = generateProps();
 
-export const WithoutAFooter = (args, { argTypes }) => ({
+export const WithoutAFooter = (args, { argTypes, viewMode }) => ({
   components: { GlModal, GlButton },
   directives: { GlModalDirective },
   props: Object.keys(argTypes),
   template: generateTemplate({
     props: { 'hide-footer': true },
   }),
+  viewMode,
 });
-WithoutAFooter.args = generateProps({ visible: true });
+WithoutAFooter.args = generateProps();
 
 export default {
   title: 'base/modal',
-  components: { GlModal, GlButton },
+  component: GlModal,
   directives: { GlModalDirective },
   bootstrapComponent: 'b-modal',
   parameters: {

package/src/components/charts/series_label/series_label.stories.js

@@ -35,13 +35,14 @@ const Template = (_args, { argTypes }) => ({
 });
 
 export const Default = Template.bind({});
-Default.args = generateProps();
+Default.args = generateProps({ color: '' });
 
 export const WithLongName = Template.bind({});
-WithLongName.args = generateProps({ text: SERIES_NAME[SERIES_NAME_LONG] });
+WithLongName.args = generateProps({ color: '', text: SERIES_NAME[SERIES_NAME_LONG] });
 
 export const WithLongNameWithNoSpaces = Template.bind({});
 WithLongNameWithNoSpaces.args = generateProps({
+  color: '',
   text: SERIES_NAME[SERIES_NAME_LONG_WITHOUT_SPACES],
 });
 
@@ -71,10 +72,6 @@ export default {
     },
   },
   argTypes: {
-    type: {
-      control: 'select',
-      options: ['solid', 'dashed'],
-    },
     color: {
       control: 'color',
     },

package/src/components/charts/series_label/series_label.vue

@@ -12,9 +12,6 @@ export default {
       type: String,
       required: false,
       default: 'solid',
-      validator(value) {
-        return ['solid', 'dashed'].indexOf(value) !== -1;
-      },
     },
   },
   data() {

package/src/directives/outside/outside.stories.js

@@ -26,6 +26,7 @@ Default.parameters = {
 
 export default {
   title: 'directives/outside-directive',
+  component: GlOutsideDirective,
   parameters: {
     knobs: { disable: true },
     docs: {

package/src/scss/typescale/typescale.stories.js

@@ -39,6 +39,7 @@ Default.parameters = {
   },
 };
 
+// eslint-disable-next-line storybook/csf-component
 export default {
   title: 'scss/typescale',
   parameters: {

package/src/scss/utilities.scss

@@ -2561,6 +2561,18 @@
   display: none !important;
 }
 
+.gl-xs-display-none {
+  @include gl-media-breakpoint-down(sm) {
+  display: none;
+  }
+}
+
+.gl-xs-display-none\! {
+  @include gl-media-breakpoint-down(sm) {
+  display: none !important;
+  }
+}
+
 .gl-sm-display-none {
   @include gl-media-breakpoint-up(sm) {
   display: none;
@@ -2605,6 +2617,18 @@
   display: flex !important;
 }
 
+.gl-xs-display-flex {
+  @include gl-media-breakpoint-down(sm) {
+  display: flex;
+  }
+}
+
+.gl-xs-display-flex\! {
+  @include gl-media-breakpoint-down(sm) {
+  display: flex !important;
+  }
+}
+
 .gl-sm-display-flex {
   @include gl-media-breakpoint-up(sm) {
   display: flex;
@@ -2649,6 +2673,18 @@
   display: inline-flex !important;
 }
 
+.gl-xs-display-inline-flex {
+  @include gl-media-breakpoint-down(sm) {
+  display: inline-flex;
+  }
+}
+
+.gl-xs-display-inline-flex\! {
+  @include gl-media-breakpoint-down(sm) {
+  display: inline-flex !important;
+  }
+}
+
 .gl-sm-display-inline-flex {
   @include gl-media-breakpoint-up(sm) {
   display: inline-flex;
@@ -2693,6 +2729,18 @@
   display: block !important;
 }
 
+.gl-xs-display-block {
+  @include gl-media-breakpoint-down(sm) {
+  display: block;
+  }
+}
+
+.gl-xs-display-block\! {
+  @include gl-media-breakpoint-down(sm) {
+  display: block !important;
+  }
+}
+
 .gl-sm-display-block {
   @include gl-media-breakpoint-up(sm) {
   display: block;
@@ -2737,6 +2785,18 @@
   display: inline !important;
 }
 
+.gl-xs-display-inline {
+  @include gl-media-breakpoint-down(sm) {
+  display: inline;
+  }
+}
+
+.gl-xs-display-inline\! {
+  @include gl-media-breakpoint-down(sm) {
+  display: inline !important;
+  }
+}
+
 .gl-sm-display-inline {
   @include gl-media-breakpoint-up(sm) {
   display: inline;
@@ -2781,6 +2841,18 @@
   display: inline-block !important;
 }
 
+.gl-xs-display-inline-block {
+  @include gl-media-breakpoint-down(sm) {
+  display: inline-block;
+  }
+}
+
+.gl-xs-display-inline-block\! {
+  @include gl-media-breakpoint-down(sm) {
+  display: inline-block !important;
+  }
+}
+
 .gl-sm-display-inline-block {
   @include gl-media-breakpoint-up(sm) {
   display: inline-block;
@@ -4227,6 +4299,42 @@
   }
 }
 
+.gl-sm-w-full {
+  @include gl-media-breakpoint-up(sm) {
+  width: 100%;
+  }
+}
+
+.gl-sm-w-full\! {
+  @include gl-media-breakpoint-up(sm) {
+  width: 100% !important;
+  }
+}
+
+.gl-md-w-full {
+  @include gl-media-breakpoint-up(md) {
+  width: 100%;
+  }
+}
+
+.gl-md-w-full\! {
+  @include gl-media-breakpoint-up(md) {
+  width: 100% !important;
+  }
+}
+
+.gl-lg-w-full {
+  @include gl-media-breakpoint-up(lg) {
+  width: 100%;
+  }
+}
+
+.gl-lg-w-full\! {
+  @include gl-media-breakpoint-up(lg) {
+  width: 100% !important;
+  }
+}
+
 .gl-w-max-content {
   width: max-content;
 }

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

@@ -7,6 +7,12 @@
   display: none;
 }
 
+@mixin gl-xs-display-none {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-display-none;
+  }
+}
+
 @mixin gl-sm-display-none {
   @include gl-media-breakpoint-up(sm) {
     @include gl-display-none;
@@ -29,6 +35,12 @@
   display: flex;
 }
 
+@mixin gl-xs-display-flex {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-display-flex;
+  }
+}
+
 @mixin gl-sm-display-flex {
   @include gl-media-breakpoint-up(sm) {
     @include gl-display-flex;
@@ -51,6 +63,12 @@
   display: inline-flex;
 }
 
+@mixin gl-xs-display-inline-flex {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-display-inline-flex;
+  }
+}
+
 @mixin gl-sm-display-inline-flex {
   @include gl-media-breakpoint-up(sm) {
     @include gl-display-inline-flex;
@@ -73,6 +91,12 @@
   display: block;
 }
 
+@mixin gl-xs-display-block {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-display-block;
+  }
+}
+
 @mixin gl-sm-display-block {
   @include gl-media-breakpoint-up(sm) {
     @include gl-display-block;
@@ -95,6 +119,12 @@
   display: inline;
 }
 
+@mixin gl-xs-display-inline {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-display-inline;
+  }
+}
+
 @mixin gl-sm-display-inline {
   @include gl-media-breakpoint-up(sm) {
     @include gl-display-inline;
@@ -117,6 +147,12 @@
   display: inline-block;
 }
 
+@mixin gl-xs-display-inline-block {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-display-inline-block;
+  }
+}
+
 @mixin gl-sm-display-inline-block {
   @include gl-media-breakpoint-up(sm) {
     @include gl-display-inline-block;

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

@@ -128,6 +128,24 @@
   }
 }
 
+@mixin gl-sm-w-full {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-w-full;
+  }
+}
+
+@mixin gl-md-w-full {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-w-full;
+  }
+}
+
+@mixin gl-lg-w-full {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-w-full;
+  }
+}
+
 @mixin gl-w-max-content {
   width: max-content;
 }