@gitlab/ui 78.6.0 → 78.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/tokens/css/tokens.css +1 -1
- package/dist/tokens/css/tokens.dark.css +1 -1
- package/dist/tokens/js/tokens.dark.js +1 -1
- package/dist/tokens/js/tokens.js +1 -1
- package/dist/tokens/scss/_tokens.dark.scss +1 -1
- package/dist/tokens/scss/_tokens.scss +1 -1
- package/package.json +3 -3
- package/src/components/base/broadcast_message/broadcast_message.scss +6 -2
- package/src/components/charts/stacked_column/stacked_column.stories.js +14 -0
package/dist/tokens/js/tokens.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "78.6.
|
|
3
|
+
"version": "78.6.1",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -99,10 +99,10 @@
|
|
|
99
99
|
"@babel/preset-env": "^7.24.3",
|
|
100
100
|
"@babel/preset-react": "^7.24.1",
|
|
101
101
|
"@cypress/grep": "^4.0.1",
|
|
102
|
-
"@gitlab/eslint-plugin": "19.
|
|
102
|
+
"@gitlab/eslint-plugin": "19.5.0",
|
|
103
103
|
"@gitlab/fonts": "^1.3.0",
|
|
104
104
|
"@gitlab/stylelint-config": "6.1.0",
|
|
105
|
-
"@gitlab/svgs": "3.
|
|
105
|
+
"@gitlab/svgs": "3.93.0",
|
|
106
106
|
"@rollup/plugin-commonjs": "^11.1.0",
|
|
107
107
|
"@rollup/plugin-node-resolve": "^7.1.3",
|
|
108
108
|
"@rollup/plugin-replace": "^2.3.2",
|
|
@@ -64,14 +64,18 @@ $gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
|
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
&.light {
|
|
67
|
-
--gl-broadcast-message-bg-color: #{$gray-
|
|
68
|
-
--gl-broadcast-message-border-color: #{$gray-
|
|
67
|
+
--gl-broadcast-message-bg-color: #{$gray-50};
|
|
68
|
+
--gl-broadcast-message-border-color: #{$gray-100};
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
&.banner {
|
|
72
72
|
@include gl-text-contrast-light;
|
|
73
73
|
background-color: var(--gl-broadcast-message-bg-color);
|
|
74
74
|
box-shadow: inset 0 -#{$gl-border-size-1} 0 0 var(--gl-broadcast-message-border-color);
|
|
75
|
+
|
|
76
|
+
&.light {
|
|
77
|
+
@include gl-text-black-normal;
|
|
78
|
+
}
|
|
75
79
|
}
|
|
76
80
|
|
|
77
81
|
&.notification {
|
|
@@ -6,6 +6,12 @@ import {
|
|
|
6
6
|
} from '../../../utils/charts/mock_data';
|
|
7
7
|
import { toolbox } from '../../../utils/charts/story_config';
|
|
8
8
|
import { columnOptions } from '../../../utils/constants';
|
|
9
|
+
import {
|
|
10
|
+
DATA_VIZ_ORANGE_600,
|
|
11
|
+
DATA_VIZ_AQUA_500,
|
|
12
|
+
DATA_VIZ_GREEN_600,
|
|
13
|
+
DATA_VIZ_MAGENTA_500,
|
|
14
|
+
} from '../../../../dist/tokens/js/tokens';
|
|
9
15
|
import readme from './stacked_column.md';
|
|
10
16
|
|
|
11
17
|
const template = `
|
|
@@ -21,6 +27,7 @@ const template = `
|
|
|
21
27
|
:secondary-data="secondaryData"
|
|
22
28
|
:secondary-data-title="secondaryDataTitle"
|
|
23
29
|
:height="height"
|
|
30
|
+
:custom-palette="customPalette"
|
|
24
31
|
/>
|
|
25
32
|
`;
|
|
26
33
|
|
|
@@ -38,6 +45,7 @@ const generateProps = ({
|
|
|
38
45
|
secondaryData = [],
|
|
39
46
|
secondaryDataTitle = '',
|
|
40
47
|
height = null,
|
|
48
|
+
customPalette,
|
|
41
49
|
} = {}) => ({
|
|
42
50
|
bars,
|
|
43
51
|
lines,
|
|
@@ -50,6 +58,7 @@ const generateProps = ({
|
|
|
50
58
|
secondaryDataTitle,
|
|
51
59
|
secondaryData,
|
|
52
60
|
height,
|
|
61
|
+
customPalette,
|
|
53
62
|
});
|
|
54
63
|
|
|
55
64
|
const Template = (args, { argTypes }) => ({
|
|
@@ -103,6 +112,11 @@ SecondaryYAxisLine.args = generateProps({
|
|
|
103
112
|
secondaryDataTitle: mockSecondaryDataTitle,
|
|
104
113
|
});
|
|
105
114
|
|
|
115
|
+
export const WithCustomColorPalette = Template.bind({});
|
|
116
|
+
WithCustomColorPalette.args = generateProps({
|
|
117
|
+
customPalette: [DATA_VIZ_ORANGE_600, DATA_VIZ_AQUA_500, DATA_VIZ_GREEN_600, DATA_VIZ_MAGENTA_500],
|
|
118
|
+
});
|
|
119
|
+
|
|
106
120
|
export default {
|
|
107
121
|
title: 'charts/stacked-column-chart',
|
|
108
122
|
component: GlStackedColumnChart,
|