@gitlab/ui 39.3.1 → 39.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "39.3.1",
+  "version": "39.3.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -82,7 +82,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "12.0.1",
     "@gitlab/stylelint-config": "4.0.0",
-    "@gitlab/svgs": "2.10.0",
+    "@gitlab/svgs": "2.11.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/scss_to_js/scss_variables.js

@@ -27,6 +27,7 @@ export const limitedLayoutWidth = '990px'
 export const black = '#000'
 export const blackNormal = '#333'
 export const white = '#fff'
+export const whiteContrast = '#fff'
 export const whiteNormal = '#f0f0f0'
 export const whiteDark = '#eaeaea'
 export const whiteTransparent = 'rgba(255, 255, 255, 0.8)'

package/scss_to_js/scss_variables.json

@@ -172,6 +172,11 @@
       "value": "#fff",
       "compiledValue": "#fff"
     },
+    {
+      "name": "$white-contrast",
+      "value": "#fff",
+      "compiledValue": "#fff"
+    },
     {
       "name": "$white-normal",
       "value": "#f0f0f0",

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

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import { GlAvatarLabeled, GlBadge } from '../../../index';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
+import avatarPath from '../../../../static/img/avatar.png';
 import readme from './avatar_labeled.md';
 
 Vue.directive('gl-tooltip', GlTooltipDirective);
@@ -13,7 +14,7 @@ const generateProps = ({
   subLabel = '@gitlab',
   size = 32,
   shape = 'circle',
-  src = 'https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64',
+  src = avatarPath,
 } = {}) => ({
   label,
   subLabel,

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

@@ -1,5 +1,6 @@
 import { GlAvatarLink, GlAvatar, GlAvatarLabeled } from '../../../index';
 import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
+import avatarPath from '../../../../static/img/avatar.png';
 import readme from './avatar_link.md';
 
 const components = { GlAvatarLink, GlAvatar, GlAvatarLabeled };
@@ -19,9 +20,7 @@ const generateLabelsProps = ({ label = 'GitLab User', subLabel = '@gitlab' } = {
   subLabel,
 });
 
-const generateImageProps = ({
-  src = 'https://assets.gitlab-static.net/uploads/-/system/project/avatar/278964/logo-extra-whitespace.png?width=64',
-} = {}) => ({
+const generateImageProps = ({ src = avatarPath } = {}) => ({
   src,
 });
 

package/src/components/base/breadcrumb/breadcrumb.md

@@ -18,7 +18,7 @@ to draw a `/`
     <img 
       alt=""
       class="gl-breadcrumb-avatar-tile"
-      src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=16"
+      src="/path/to/image.png"
       width="16"
       height="16"
     />

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

@@ -1,4 +1,5 @@
 import { GlBreadcrumb } from '../../../index';
+import avatarPath from '../../../../static/img/avatar.png';
 import readme from './breadcrumb.md';
 
 const template = `
@@ -7,7 +8,7 @@ const template = `
     >
       <template #avatar>
         <img alt=""
-            class="gl-breadcrumb-avatar-tile" src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=16"
+            class="gl-breadcrumb-avatar-tile" src="${avatarPath}"
             width="16"
             height="16" />
       </template>

package/src/components/base/broadcast_message/broadcast_message.scss

@@ -1,5 +1,5 @@
 .gl-broadcast-message {
-  @include gl-text-white;
+  @include gl-text-contrast-light;
   @include gl-display-flex;
   @include gl-justify-content-space-between;
   @include gl-align-items-flex-start;

package/src/components/base/button/button.scss

@@ -136,7 +136,7 @@
   &.btn-success,
   &.btn-danger,
   &.btn-warning {
-    @include gl-text-white;
+    @include gl-text-contrast-light;
   }
 
   &.btn-confirm,

package/src/scss/utilities.scss

@@ -2061,6 +2061,14 @@
   color: $white !important;
 }
 
+.gl-text-contrast-light {
+  color: $white-contrast;
+}
+
+.gl-text-contrast-light\! {
+  color: $white-contrast !important;
+}
+
 .gl-text-body {
   color: $body-color;
 }

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

@@ -19,6 +19,10 @@
   color: $white;
 }
 
+@mixin gl-text-contrast-light {
+  color: $white-contrast;
+}
+
 @mixin gl-text-body {
   color: $body-color;
 }

package/src/scss/variables.scss

@@ -45,6 +45,7 @@ $black: #000 !default;
 $black-normal: #333 !default;
 
 $white: #fff !default;
+$white-contrast: #fff !default;
 $white-normal: #f0f0f0 !default;
 $white-dark: #eaeaea !default;
 $white-transparent: rgba(255, 255, 255, 0.8) !default;