@gitlab/ui 33.1.0 → 35.0.0

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

@@ -1,11 +1,13 @@
 import Vue from 'vue';
-import { GlToast } from '../../../../index';
+import { GlToast, GlButton } from '../../../../index';
 import readme from './toast.md';
 
 Vue.use(GlToast);
 
+const components = { GlToast, GlButton };
+
 const Template = () => ({
-  components: { GlToast },
+  components,
   template: `
   <gl-button @click="showToast()">
     Show default toast
@@ -23,7 +25,7 @@ const Template = () => ({
 export const Default = Template.bind({});
 
 export const WithActions = () => ({
-  components: { GlToast },
+  components,
   template: `
   <gl-button @click="showToast()">
     Show toast with actions
@@ -44,7 +46,7 @@ export const WithActions = () => ({
 });
 
 export const WithLongContent = () => ({
-  components: { GlToast },
+  components,
   template: `
   <gl-button @click="showToast()">
     Show toast with a long content

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

@@ -1,4 +1,4 @@
-import { GlToken } from '../../../../index';
+import { GlToken, GlAvatar } from '../../../../index';
 import { tokenVariants } from '../../../utils/constants';
 
 import readme from './token.md';
@@ -31,7 +31,7 @@ ViewOnly.args = generateProps({
 });
 
 export const WithAvatar = () => ({
-  components: { GlToken },
+  components: { GlToken, GlAvatar },
   template: `
     <div class="gl-display-flex">
     <gl-token><gl-avatar src="./img/avatar.png" :size="16" />Token</gl-token>

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

@@ -1,8 +1,9 @@
-import { GlTooltip, GlTooltipDirective } from '../../../../index';
+import { GlTooltip, GlTooltipDirective, GlButton } from '../../../../index';
 import readme from './tooltip.md';
 
 function makeTooltip(modifier = '') {
   return {
+    components: { GlTooltip, GlButton },
     directives: {
       GlTooltip: GlTooltipDirective,
     },

package/src/scss/utilities.scss

@@ -1848,6 +1848,14 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $red-600 !important
 }
 
+.gl-inset-border-b-2-theme-accent {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500)
+}
+
+.gl-inset-border-b-2-theme-accent\! {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500) !important
+}
+
 .gl-inset-border-b-2-theme-indigo-500 {
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-500
 }

package/src/scss/utility-mixins/box-shadow.scss

@@ -104,6 +104,10 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $red-600;
 }
 
+@mixin gl-inset-border-b-2-theme-accent {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500);
+}
+
 @mixin gl-inset-border-b-2-theme-indigo-500 {
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-500;
 }