@gitlab/ui 39.4.0 → 39.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "39.4.0",
+  "version": "39.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -123,10 +123,10 @@
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
     "plop": "^2.5.4",
-    "postcss": "8.4.5",
+    "postcss": "8.4.12",
     "postcss-loader": "^3.0.0",
-    "postcss-scss": "^2.1.1",
-    "prettier": "2.2.1",
+    "postcss-scss": "4.0.4",
+    "prettier": "2.6.2",
     "puppeteer": "11.0.0",
     "raw-loader": "^0.5.1",
     "rollup": "^2.53.1",

package/src/components/base/alert/alert.spec.js

@@ -71,13 +71,15 @@ describe('Alert component', () => {
     expect(findDismissButton().exists()).toBe(false);
   });
 
-  it('renders the provided title', () => {
+  it('renders the provided title with heading level 2', () => {
     const title = 'foo';
     createComponent({ propsData: { title } });
 
     const titleWrapper = findTitle();
     expect(titleWrapper.exists()).toBe(true);
     expect(titleWrapper.text()).toContain(title);
+    // the title needs to be in a level 2 heading for accessibility reasons
+    expect(titleWrapper.element.tagName).toEqual('H2');
   });
 
   describe('given primaryButtonText', () => {

package/src/components/base/alert/alert.vue

@@ -184,7 +184,7 @@ export default {
     />
 
     <div class="gl-alert-content" role="alert">
-      <h4 v-if="title" class="gl-alert-title">{{ title }}</h4>
+      <h2 v-if="title" class="gl-alert-title">{{ title }}</h2>
 
       <div class="gl-alert-body">
         <!-- @slot The alert message to display. -->

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

@@ -7,13 +7,15 @@ const generateProps = ({ href = '#', target = null } = {}) => ({
   target,
 });
 
-const makeStory = (options) => (args, { argTypes }) => ({
-  components: {
-    GlLink,
-  },
-  props: Object.keys(argTypes),
-  ...options,
-});
+const makeStory =
+  (options) =>
+  (args, { argTypes }) => ({
+    components: {
+      GlLink,
+    },
+    props: Object.keys(argTypes),
+    ...options,
+  });
 
 export const DefaultLink = makeStory({
   components: { GlLink },

package/src/components/utilities/friendly_wrap/friendly_wrap.stories.js

@@ -12,26 +12,26 @@ const generateProps = ({ text = '', symbols = defaultValue('symbols')() } = {})
   symbols,
 });
 
-const makeStory = (options = {}) => (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  ...options,
-});
+const makeStory =
+  (options = {}) =>
+  (args, { argTypes }) => ({
+    components,
+    props: Object.keys(argTypes),
+    ...options,
+  });
 
 export const Default = makeStory({
   template: `<gl-friendly-wrap :text="text" :symbols="symbols" />`,
 });
 Default.args = generateProps({
-  text:
-    '/lorem/ipsum/dolor/sit/amet/consectetur/adipiscing/elit/Aenean/tincidunt/urna/ac/tellus/cursus/laoreet/aenean/blandit/erat/vel/est/maximus/porta/Sed/id/nunc/non/sapien/cursus/ullamcorper',
+  text: '/lorem/ipsum/dolor/sit/amet/consectetur/adipiscing/elit/Aenean/tincidunt/urna/ac/tellus/cursus/laoreet/aenean/blandit/erat/vel/est/maximus/porta/Sed/id/nunc/non/sapien/cursus/ullamcorper',
 });
 
 export const BreakWord = makeStory({
   template: `<gl-friendly-wrap :text="text" :symbols="symbols" />`,
 });
 BreakWord.args = generateProps({
-  text:
-    'LoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitamet',
+  text: 'LoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitamet',
   symbols: ['dolor'],
 });
 
@@ -39,8 +39,7 @@ export const MultipleSymbols = makeStory({
   template: `<gl-friendly-wrap :text="text" :symbols="symbols" />`,
 });
 MultipleSymbols.args = generateProps({
-  text:
-    'LoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitamet',
+  text: 'LoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitamet',
   symbols: ['e', 'o'],
 });
 

package/src/components/utilities/sprintf/sprintf.stories.js

@@ -6,15 +6,17 @@ const generateProps = ({ message = 'Written by %{author}', placeholders } = {})
   placeholders,
 });
 
-const makeStory = (options) => (args, { argTypes }) => ({
-  components: {
-    GlSprintf,
-    GlButton,
-    GlLink,
-  },
-  props: Object.keys(argTypes),
-  ...options,
-});
+const makeStory =
+  (options) =>
+  (args, { argTypes }) => ({
+    components: {
+      GlSprintf,
+      GlButton,
+      GlLink,
+    },
+    props: Object.keys(argTypes),
+    ...options,
+  });
 
 export const SentenceWithLink = makeStory({
   template: `

package/src/scss/utilities.scss

@@ -2484,6 +2484,16 @@
     filter: invert(0.8) hue-rotate(180deg) !important;
   }
 }
+.gl--flex-center{
+  @include gl-display-flex;
+  @include gl-align-items-center;
+  @include gl-justify-content-center
+}
+.gl--flex-center\!{
+  @include gl-display-flex;
+  @include gl-align-items-center;
+  @include gl-justify-content-center
+}
 .gl-content-empty {
   content: ''
 }

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

@@ -0,0 +1,20 @@
+//
+// Composite utilities
+//
+// naming convention: gl--{name}
+// purpose: This is for composite classes that provide significant readability and maintainability profit.
+//
+// PLEASE NOTE: When considering to abstract a set of utility classes, please prefer, in order:
+//   1. Not abstracting
+//   2. Create a component
+//   3. Create a constant scoped within a specific module
+//   4. Create a composite class if there are many preexisting occurrences with a clear design responsibility
+//
+// notes:
+//   - Composite classes should be very short and not have any nested rules.
+//
+@mixin gl--flex-center {
+  @include gl-display-flex;
+  @include gl-align-items-center;
+  @include gl-justify-content-center;
+}

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

@@ -22,6 +22,7 @@
 @import './border';
 @import './box-shadow';
 @import './color';
+@import './composite';
 @import './content';
 @import './cursor';
 @import './display';

package/src/utils/data_utils.js

@@ -2,27 +2,8 @@ import curry from 'lodash/fp/curry';
 
 const getRepeatingValue = (index) => {
   const values = [
-    100,
-    500,
-    400,
-    200,
-    100,
-    800,
-    400,
-    500,
-    600,
-    300,
-    800,
-    900,
-    110,
-    700,
-    400,
-    300,
-    500,
-    300,
-    400,
-    600,
-    700,
+    100, 500, 400, 200, 100, 800, 400, 500, 600, 300, 800, 900, 110, 700, 400, 300, 500, 300, 400,
+    600, 700,
   ];
   return index < values.length ? values[index] : values[index % values.length];
 };