@gitlab/ui 38.5.0 → 38.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "38.5.0",
+  "version": "38.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -88,7 +88,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "12.0.1",
     "@gitlab/stylelint-config": "4.0.0",
-    "@gitlab/svgs": "2.7.0",
+    "@gitlab/svgs": "2.8.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -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/datepicker/datepicker.spec.js

@@ -73,6 +73,20 @@ describe('datepicker component', () => {
     expect(Pikaday.prototype.show).toHaveBeenCalled();
   });
 
+  describe('when `ariaLabel` prop is passed', () => {
+    it('configures pikaday with the given label', () => {
+      const ariaLabel = 'Meaningful description';
+
+      mountWithOptions({
+        propsData: {
+          ariaLabel,
+        },
+      });
+
+      expect(pikadayConfig().ariaLabel).toBe(ariaLabel);
+    });
+  });
+
   describe('when `target` prop is not passed', () => {
     it('sets calendar icon as `trigger` option', () => {
       const wrapper = mountWithOptions();

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

@@ -86,7 +86,7 @@ export default {
       'endRange',
       'disableDayFn',
       'firstDay',
-      'arialLabel',
+      'ariaLabel',
       'placeholder',
       'autocomplete',
       'disabled',

package/src/components/base/datepicker/datepicker.vue

@@ -99,7 +99,7 @@ export default {
       required: false,
       default: 0,
     },
-    arialLabel: {
+    ariaLabel: {
       type: String,
       required: false,
       default: '',
@@ -244,7 +244,7 @@ export default {
       },
       disableDayFn: this.disableDayFn,
       firstDay: this.firstDay,
-      arialLabel: this.ariaLabel,
+      ariaLabel: this.ariaLabel,
       toString: (date) => defaultDateFormatter(date),
       onSelect: this.selected.bind(this),
       onClose: this.closed.bind(this),

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

@@ -218,7 +218,7 @@ export const WithHeaderAndFooter = (args, { argTypes }) => ({
     <gl-dropdown-item>Fifth item</gl-dropdown-item>
     <gl-dropdown-item>Sixth item</gl-dropdown-item>
     <gl-dropdown-item>Seventh item</gl-dropdown-item>
-    <gl-dropdown-item>Eigth item</gl-dropdown-item>
+    <gl-dropdown-item>Eighth item</gl-dropdown-item>
     <template #footer>
       <gl-dropdown-item>First footer item</gl-dropdown-item>
       <gl-dropdown-item>Second footer item</gl-dropdown-item>

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

@@ -105,7 +105,7 @@ WithoutAFooter.args = generateProps({ visible: true });
 
 export default {
   title: 'base/modal',
-  components: { GlModal, GlButton },
+  component: GlModal,
   directives: { GlModalDirective },
   bootstrapComponent: 'b-modal',
   parameters: {

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;
 }
@@ -4611,6 +4719,18 @@
   max-width: 100vw !important;
 }
 
+.gl-md-max-w-26 {
+  @include gl-media-breakpoint-up(md) {
+    max-width: $gl-spacing-scale-26;
+  }
+}
+
+.gl-md-max-w-26\! {
+  @include gl-media-breakpoint-up(md) {
+    max-width: $gl-spacing-scale-26 !important;
+  }
+}
+
 .gl-md-max-w-15p {
   @include gl-media-breakpoint-up(md) {
     max-width: 15%;
@@ -6931,169 +7051,179 @@
 .gl-table-layout-fixed\! {
   table-layout: fixed !important
 }
-.gl-text-left{
-  text-align: left
+.gl-text-left {
+  text-align: left;
 }
-.gl-text-left\!{
-  text-align: left !important
+.gl-text-left\! {
+  text-align: left !important;
 }
-.gl-text-center{
-  text-align: center
+.gl-text-center {
+  text-align: center;
 }
-.gl-text-center\!{
-  text-align: center !important
+.gl-text-center\! {
+  text-align: center !important;
 }
-.gl-text-right{
-  text-align: right
+.gl-text-right {
+  text-align: right;
 }
-.gl-text-right\!{
-  text-align: right !important
+.gl-text-right\! {
+  text-align: right !important;
 }
-.gl-reset-text-align{
-  text-align: inherit
+.gl-reset-text-align {
+  text-align: inherit;
 }
-.gl-reset-text-align\!{
-  text-align: inherit !important
+.gl-reset-text-align\! {
+  text-align: inherit !important;
 }
-.gl-text-decoration-none{
-  text-decoration: none
+.gl-text-decoration-none {
+  text-decoration: none;
 }
-.gl-active-text-decoration-none:active{
-  text-decoration: none
+.gl-active-text-decoration-none:active {
+  text-decoration: none;
 }
-.gl-focus-text-decoration-none:focus{
-  text-decoration: none
+.gl-focus-text-decoration-none:focus {
+  text-decoration: none;
 }
-.gl-hover-text-decoration-none:hover{
-  text-decoration: none
+.gl-hover-text-decoration-none:hover {
+  text-decoration: none;
 }
-.gl-text-decoration-none\!{
-  text-decoration: none !important
+.gl-text-decoration-none\! {
+  text-decoration: none !important;
 }
-.gl-active-text-decoration-none\!:active{
-  text-decoration: none !important
+.gl-active-text-decoration-none\!:active {
+  text-decoration: none !important;
 }
-.gl-focus-text-decoration-none\!:focus{
-  text-decoration: none !important
+.gl-focus-text-decoration-none\!:focus {
+  text-decoration: none !important;
 }
-.gl-hover-text-decoration-none\!:hover{
-  text-decoration: none !important
+.gl-hover-text-decoration-none\!:hover {
+  text-decoration: none !important;
 }
-.gl-text-decoration-underline{
-  text-decoration: underline
+.gl-text-decoration-underline {
+  text-decoration: underline;
 }
-.gl-text-decoration-underline\!{
-  text-decoration: underline !important
+.gl-text-decoration-underline\! {
+  text-decoration: underline !important;
 }
-.gl-reset-text-decoration-color{
-  text-decoration-color: inherit
+.gl-reset-text-decoration-color {
+  text-decoration-color: inherit;
 }
-.gl-reset-text-decoration-color\!{
-  text-decoration-color: inherit !important
+.gl-reset-text-decoration-color\! {
+  text-decoration-color: inherit !important;
 }
-.gl-text-decoration-color-gray-500{
-  text-decoration-color: $gray-500
+.gl-text-decoration-color-gray-500 {
+  text-decoration-color: $gray-500;
 }
-.gl-text-decoration-color-gray-500\!{
-  text-decoration-color: $gray-500 !important
+.gl-text-decoration-color-gray-500\! {
+  text-decoration-color: $gray-500 !important;
 }
-.gl-text-decoration-color-gray-700{
-  text-decoration-color: $gray-700
+.gl-text-decoration-color-gray-700 {
+  text-decoration-color: $gray-700;
 }
-.gl-text-decoration-color-gray-700\!{
-  text-decoration-color: $gray-700 !important
+.gl-text-decoration-color-gray-700\! {
+  text-decoration-color: $gray-700 !important;
 }
-.gl-text-decoration-color-gray-900{
-  text-decoration-color: $gray-900
+.gl-text-decoration-color-gray-900 {
+  text-decoration-color: $gray-900;
 }
-.gl-text-decoration-color-gray-900\!{
-  text-decoration-color: $gray-900 !important
+.gl-text-decoration-color-gray-900\! {
+  text-decoration-color: $gray-900 !important;
 }
-.gl-text-transform-none{
-  text-transform: none
+.gl-text-transform-none {
+  text-transform: none;
 }
-.gl-text-transform-none\!{
-  text-transform: none !important
+.gl-text-transform-none\! {
+  text-transform: none !important;
 }
-.gl-text-overflow-ellipsis{
-  text-overflow: ellipsis
+.gl-text-overflow-ellipsis {
+  text-overflow: ellipsis;
 }
-.gl-text-overflow-ellipsis\!{
-  text-overflow: ellipsis !important
+.gl-text-overflow-ellipsis\! {
+  text-overflow: ellipsis !important;
 }
-.gl-text-indent-0{
-  text-indent: 0
+.gl-text-indent-0 {
+  text-indent: 0;
 }
-.gl-text-indent-0\!{
-  text-indent: 0 !important
+.gl-text-indent-0\! {
+  text-indent: 0 !important;
 }
-.gl-text-indent-hide{
-  text-indent: -9999px
+.gl-text-indent-hide {
+  text-indent: -9999px;
 }
-.gl-text-indent-hide\!{
-  text-indent: -9999px !important
+.gl-text-indent-hide\! {
+  text-indent: -9999px !important;
 }
-.gl-white-space-normal{
-  white-space: normal
+.gl-white-space-normal {
+  white-space: normal;
 }
-.gl-white-space-normal\!{
-  white-space: normal !important
+.gl-white-space-normal\! {
+  white-space: normal !important;
 }
-.gl-white-space-nowrap{
-  white-space: nowrap
+.gl-white-space-nowrap {
+  white-space: nowrap;
 }
-.gl-white-space-nowrap\!{
-  white-space: nowrap !important
+.gl-white-space-nowrap\! {
+  white-space: nowrap !important;
 }
-.gl-white-space-pre-wrap{
-  white-space: pre-wrap
+.gl-white-space-pre-wrap {
+  white-space: pre-wrap;
 }
-.gl-white-space-pre-wrap\!{
-  white-space: pre-wrap !important
+.gl-white-space-pre-wrap\! {
+  white-space: pre-wrap !important;
 }
-.gl-white-space-pre-line{
-  white-space: pre-line
+.gl-white-space-pre-line {
+  white-space: pre-line;
 }
-.gl-white-space-pre-line\!{
-  white-space: pre-line !important
+.gl-white-space-pre-line\! {
+  white-space: pre-line !important;
 }
-.gl-word-break-all{
-  word-break: break-all
+.gl-md-white-space-nowrap {
+  @include gl-media-breakpoint-up(md) {
+    white-space: nowrap;
+  }
 }
-.gl-word-break-all\!{
-  word-break: break-all !important
+.gl-md-white-space-nowrap\! {
+  @include gl-media-breakpoint-up(md) {
+    white-space: nowrap !important;
+  }
+}
+.gl-word-break-all {
+  word-break: break-all;
 }
-.gl-word-break-word{
-  word-break: break-word
+.gl-word-break-all\! {
+  word-break: break-all !important;
 }
-.gl-word-break-word\!{
-  word-break: break-word !important
+.gl-word-break-word {
+  word-break: break-word;
 }
-.gl-overflow-break-word{
+.gl-word-break-word\! {
+  word-break: break-word !important;
+}
+.gl-overflow-break-word {
   overflow-wrap: break-word;
   word-wrap: break-word;
-  hyphens: auto
+  hyphens: auto;
 }
-.gl-overflow-break-word\!{
+.gl-overflow-break-word\! {
   overflow-wrap: break-word !important;
   word-wrap: break-word !important;
-  hyphens: auto !important
+  hyphens: auto !important;
 }
-.gl-str-truncated{
-  @include str-truncated
+.gl-str-truncated {
+  @include str-truncated;
 }
-.gl-str-truncated\!{
-  @include str-truncated
+.gl-str-truncated\! {
+  @include str-truncated;
 }
-.gl-text-truncate{
+.gl-text-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap
+  white-space: nowrap;
 }
-.gl-text-truncate\!{
+.gl-text-truncate\! {
   overflow: hidden !important;
   text-overflow: ellipsis !important;
-  white-space: nowrap !important
+  white-space: nowrap !important;
 }
 .gl-translate-x-0 {
   transform: translateX(0)

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;