@gitlab/ui 78.6.0 → 78.7.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 25 Mar 2024 20:40:43 GMT
+ * Generated on Wed, 03 Apr 2024 15:46:06 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 25 Mar 2024 20:40:43 GMT
+ * Generated on Wed, 03 Apr 2024 15:46:06 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 25 Mar 2024 20:40:43 GMT
+ * Generated on Wed, 03 Apr 2024 15:46:06 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 25 Mar 2024 20:40:43 GMT
+ * Generated on Wed, 03 Apr 2024 15:46:06 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 25 Mar 2024 20:40:43 GMT
+// Generated on Wed, 03 Apr 2024 15:46:06 GMT
 
 $gl-text-tertiary: #737278 !default;
 $gl-text-secondary: #89888d !default;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 25 Mar 2024 20:40:43 GMT
+// Generated on Wed, 03 Apr 2024 15:46:06 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/dist/utils/constants.js

@@ -121,12 +121,14 @@ const dropdownVariantOptions = {
   link: 'link'
 };
 const dropdownPlacements = {
+  'right-start': 'right-start',
   left: 'bottom-start',
   center: 'bottom',
   right: 'bottom-end'
 };
 const dropdownAnyCornerPlacement = [dropdownPlacements.left, 'top-start', dropdownPlacements.right, 'top-end'];
 const dropdownAllowedAutoPlacements = {
+  'right-start': ['right-start', 'right-end', 'left-start', 'left-end'],
   left: dropdownAnyCornerPlacement,
   center: [dropdownPlacements.center, 'top'],
   right: dropdownAnyCornerPlacement

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "78.6.0",
+  "version": "78.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -99,10 +99,10 @@
     "@babel/preset-env": "^7.24.3",
     "@babel/preset-react": "^7.24.1",
     "@cypress/grep": "^4.0.1",
-    "@gitlab/eslint-plugin": "19.4.0",
+    "@gitlab/eslint-plugin": "19.5.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.91.0",
+    "@gitlab/svgs": "3.94.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

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

@@ -64,14 +64,18 @@ $gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
   }
 
   &.light {
-    --gl-broadcast-message-bg-color: #{$gray-300};
-    --gl-broadcast-message-border-color: #{$gray-500};
+    --gl-broadcast-message-bg-color: #{$gray-50};
+    --gl-broadcast-message-border-color: #{$gray-100};
   }
 
   &.banner {
     @include gl-text-contrast-light;
     background-color: var(--gl-broadcast-message-bg-color);
     box-shadow: inset 0 -#{$gl-border-size-1} 0 0 var(--gl-broadcast-message-border-color);
+
+    &.light {
+      @include gl-text-black-normal;
+    }
   }
 
   &.notification {

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -162,6 +162,27 @@ describe('base dropdown', () => {
         );
       });
 
+      it('initializes Floating UI with reference and floating elements and config for `right-start` aligned menu', async () => {
+        buildWrapper({ placement: 'right-start' });
+        await findDefaultDropdownToggle().trigger('click');
+
+        expect(computePosition).toHaveBeenCalledWith(
+          findDefaultDropdownToggle().element,
+          findDropdownMenu().element,
+          {
+            placement: 'right-start',
+            strategy: 'absolute',
+            middleware: [
+              offset({ mainAxis: DEFAULT_OFFSET }),
+              autoPlacement({
+                alignment: 'start',
+                allowedPlacements: ['right-start', 'right-end', 'left-start', 'left-end'],
+              }),
+            ],
+          }
+        );
+      });
+
       it("passes custom offset to Floating UI's middleware", async () => {
         const customOffset = { mainAxis: 10, crossAxis: 40 };
         buildWrapper({

package/src/components/charts/stacked_column/stacked_column.stories.js

@@ -6,6 +6,12 @@ import {
 } from '../../../utils/charts/mock_data';
 import { toolbox } from '../../../utils/charts/story_config';
 import { columnOptions } from '../../../utils/constants';
+import {
+  DATA_VIZ_ORANGE_600,
+  DATA_VIZ_AQUA_500,
+  DATA_VIZ_GREEN_600,
+  DATA_VIZ_MAGENTA_500,
+} from '../../../../dist/tokens/js/tokens';
 import readme from './stacked_column.md';
 
 const template = `
@@ -21,6 +27,7 @@ const template = `
     :secondary-data="secondaryData"
     :secondary-data-title="secondaryDataTitle"
     :height="height"
+    :custom-palette="customPalette"
   />
 `;
 
@@ -38,6 +45,7 @@ const generateProps = ({
   secondaryData = [],
   secondaryDataTitle = '',
   height = null,
+  customPalette,
 } = {}) => ({
   bars,
   lines,
@@ -50,6 +58,7 @@ const generateProps = ({
   secondaryDataTitle,
   secondaryData,
   height,
+  customPalette,
 });
 
 const Template = (args, { argTypes }) => ({
@@ -103,6 +112,11 @@ SecondaryYAxisLine.args = generateProps({
   secondaryDataTitle: mockSecondaryDataTitle,
 });
 
+export const WithCustomColorPalette = Template.bind({});
+WithCustomColorPalette.args = generateProps({
+  customPalette: [DATA_VIZ_ORANGE_600, DATA_VIZ_AQUA_500, DATA_VIZ_GREEN_600, DATA_VIZ_MAGENTA_500],
+});
+
 export default {
   title: 'charts/stacked-column-chart',
   component: GlStackedColumnChart,

package/src/utils/constants.js

@@ -146,6 +146,7 @@ export const dropdownVariantOptions = {
 };
 
 export const dropdownPlacements = {
+  'right-start': 'right-start',
   left: 'bottom-start',
   center: 'bottom',
   right: 'bottom-end',
@@ -159,6 +160,7 @@ const dropdownAnyCornerPlacement = [
 ];
 
 export const dropdownAllowedAutoPlacements = {
+  'right-start': ['right-start', 'right-end', 'left-start', 'left-end'],
   left: dropdownAnyCornerPlacement,
   center: [dropdownPlacements.center, 'top'],
   right: dropdownAnyCornerPlacement,