@gitlab/ui 63.1.1 → 63.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "63.1.1",
+  "version": "63.1.3",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -9,56 +9,65 @@
   @include gl-py-5;
 
   &.indigo {
-    @include gl-bg-theme-indigo-700;
+    --gl-broadcast-message-bg-color: #{$theme-indigo-700};
+    --gl-broadcast-message-border-color: #{$theme-indigo-900};
   }
 
   &.light-indigo {
-    @include gl-bg-theme-indigo-500;
+    --gl-broadcast-message-bg-color: #{$theme-indigo-500};
+    --gl-broadcast-message-border-color: #{$theme-indigo-700};
   }
 
   &.blue {
-    @include gl-bg-theme-blue-700;
+    --gl-broadcast-message-bg-color: #{$theme-blue-700};
+    --gl-broadcast-message-border-color: #{$theme-blue-900};
   }
 
   &.light-blue {
-    @include gl-bg-theme-blue-500;
+    --gl-broadcast-message-bg-color: #{$theme-blue-500};
+    --gl-broadcast-message-border-color: #{$theme-blue-700};
   }
 
   &.green {
-    @include gl-bg-theme-green-700;
+    --gl-broadcast-message-bg-color: #{$theme-green-700};
+    --gl-broadcast-message-border-color: #{$theme-green-900};
   }
 
   &.light-green {
-    @include gl-bg-theme-green-500;
+    --gl-broadcast-message-bg-color: #{$theme-green-500};
+    --gl-broadcast-message-border-color: #{$theme-green-700};
   }
 
   &.red {
-    @include gl-bg-theme-red-700;
+    --gl-broadcast-message-bg-color: #{$theme-red-700};
+    --gl-broadcast-message-border-color: #{$theme-red-900};
   }
 
   &.light-red {
-    @include gl-bg-theme-red-500;
+    --gl-broadcast-message-bg-color: #{$theme-red-500};
+    --gl-broadcast-message-border-color: #{$theme-red-700};
   }
 
   &.dark {
-    @include gl-bg-gray-500;
+    --gl-broadcast-message-bg-color: #{$gray-500};
+    --gl-broadcast-message-border-color: #{$gray-700};
   }
 
   &.light {
-    @include gl-bg-gray-300;
+    --gl-broadcast-message-bg-color: #{$gray-300};
+    --gl-broadcast-message-border-color: #{$gray-500};
   }
 
   &.banner {
     @include gl-text-contrast-light;
-    @include gl-inset-border-b-1-gray-900;
+    background-color: var(--gl-broadcast-message-bg-color);
+    box-shadow: inset 0 -#{$gl-border-size-1} 0 0 var(--gl-broadcast-message-border-color);
   }
 
   &.notification {
     @include gl-rounded-base;
     @include gl-bg-white;
-    @include gl-border-solid;
-    @include gl-border-gray-100;
-    @include gl-border-1;
+    @include gl-border;
     @include gl-shadow-x0-y2-b4-s0;
     max-width: $gl-broadcast-message-notification-max-width;
   }

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

@@ -15,6 +15,17 @@ const template = `
     </gl-broadcast-message>
   `;
 
+const templateWithTheme = (theme) => `
+  <gl-broadcast-message
+    :icon-name="iconName"
+    :dismissible="dismissible"
+    :dismiss-label="dismissLabel"
+    theme="${theme}"
+    :type="type">
+    {{ text }}
+  </gl-broadcast-message>
+`;
+
 const defaultValue = (prop) => GlBroadcastMessage.props[prop].default;
 
 const generateProps = ({
@@ -58,7 +69,7 @@ const StackedStory = (args, { argTypes }) => ({
     GlBroadcastMessage,
   },
   props: Object.keys(argTypes),
-  template: `<div>${template}${template}</div>`,
+  template: `<div>${Object.keys(colorThemes).map(templateWithTheme).join('')}</div>`,
 });
 export const Stacked = StackedStory.bind({});
 Stacked.args = generateProps();

package/src/components/base/filtered_search/filtered_search.scss

@@ -1,22 +1,28 @@
 .gl-filtered-search-scrollable-container {
   @include gl-bg-white;
+  @include gl-inset-border-1-gray-400;
+  @include gl-rounded-left-base;
+  position: relative;
+  flex-grow: 1;
+}
+
+.gl-filtered-search-scrollable {
   @include gl-display-flex;
   @include gl-flex-grow-1;
   @include gl-flex-basis-0;
-  @include gl-overflow-hidden;
   @include gl-align-items-center;
   @include gl-py-2;
   @include gl-pl-4;
-  @include gl-pr-7;
-  @include gl-inset-border-1-gray-400;
   @include gl-border-none;
-  @include gl-rounded-top-left-base;
-  @include gl-rounded-bottom-left-base;
-}
+  @include gl-rounded-left-base;
+  position: absolute;
+  max-width: calc(100% - $gl-spacing-scale-7);
+  overflow: hidden;
+  overflow-x: auto;
 
-.gl-filtered-search-scrollable {
+  // prevent overlapping with left border
+  left: $gl-border-size-1;
   @include gl-display-flex;
-  @include gl-overflow-y-auto;
 }
 
 .gl-filtered-search-item {

package/src/scss/utilities.scss

@@ -1693,6 +1693,16 @@
   border-radius: $gl-spacing-scale-4 !important;
 }
 
+.gl-rounded-left-base {
+  border-top-left-radius: $gl-border-radius-base;
+  border-bottom-left-radius: $gl-border-radius-base;
+}
+
+.gl-rounded-left-base\! {
+  border-top-left-radius: $gl-border-radius-base !important;
+  border-bottom-left-radius: $gl-border-radius-base !important;
+}
+
 .gl-rounded-top-left-base {
   border-top-left-radius: $gl-border-radius-base;
 }

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

@@ -383,6 +383,10 @@
 @mixin gl-rounded-pill {
   border-radius: $gl-spacing-scale-4;
 }
+@mixin gl-rounded-left-base {
+  border-top-left-radius: $gl-border-radius-base;
+  border-bottom-left-radius: $gl-border-radius-base;
+}
 
 @mixin gl-rounded-top-left-base {
   border-top-left-radius: $gl-border-radius-base;