@atlaskit/lozenge 11.8.5 → 11.9.0
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 +12 -0
- package/dist/cjs/Lozenge/index.js +110 -7
- package/dist/es2019/Lozenge/index.js +110 -7
- package/dist/esm/Lozenge/index.js +110 -7
- package/package.json +8 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/lozenge
|
|
2
2
|
|
|
3
|
+
## 11.9.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#119259](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119259)
|
|
8
|
+
[`2fac9118d33bd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2fac9118d33bd) -
|
|
9
|
+
modify styling behind a feature flag
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
3
15
|
## 11.8.5
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
var _react2 = require("@emotion/react");
|
|
9
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
9
10
|
var _primitives = require("@atlaskit/primitives");
|
|
10
11
|
/**
|
|
11
12
|
* @jsxRuntime classic
|
|
@@ -14,13 +15,96 @@ var _primitives = require("@atlaskit/primitives");
|
|
|
14
15
|
|
|
15
16
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
16
17
|
|
|
17
|
-
var
|
|
18
|
+
var baseStylesOld = (0, _primitives.xcss)({
|
|
18
19
|
display: 'inline-flex',
|
|
19
20
|
borderRadius: 'border.radius',
|
|
20
21
|
blockSize: 'min-content',
|
|
21
22
|
position: 'static',
|
|
22
23
|
overflow: 'hidden'
|
|
23
24
|
});
|
|
25
|
+
var styles = {
|
|
26
|
+
container: (0, _react2.css)({
|
|
27
|
+
display: 'inline-flex',
|
|
28
|
+
boxSizing: 'border-box',
|
|
29
|
+
position: 'static',
|
|
30
|
+
blockSize: 'min-content',
|
|
31
|
+
borderRadius: '3px',
|
|
32
|
+
overflow: 'hidden',
|
|
33
|
+
paddingInline: "var(--ds-space-050, 4px)"
|
|
34
|
+
}),
|
|
35
|
+
background: {
|
|
36
|
+
bold: {
|
|
37
|
+
default: (0, _react2.css)({
|
|
38
|
+
backgroundColor: '#DDDEE1'
|
|
39
|
+
}),
|
|
40
|
+
inprogress: (0, _react2.css)({
|
|
41
|
+
backgroundColor: '#8FB8F6'
|
|
42
|
+
}),
|
|
43
|
+
moved: (0, _react2.css)({
|
|
44
|
+
backgroundColor: '#F9C84E'
|
|
45
|
+
}),
|
|
46
|
+
new: (0, _react2.css)({
|
|
47
|
+
backgroundColor: '#D8A0F7'
|
|
48
|
+
}),
|
|
49
|
+
removed: (0, _react2.css)({
|
|
50
|
+
backgroundColor: '#FD9891'
|
|
51
|
+
}),
|
|
52
|
+
success: (0, _react2.css)({
|
|
53
|
+
backgroundColor: '#B3DF72'
|
|
54
|
+
})
|
|
55
|
+
},
|
|
56
|
+
subtle: {
|
|
57
|
+
default: (0, _react2.css)({
|
|
58
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
59
|
+
}),
|
|
60
|
+
inprogress: (0, _react2.css)({
|
|
61
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
62
|
+
}),
|
|
63
|
+
moved: (0, _react2.css)({
|
|
64
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
65
|
+
}),
|
|
66
|
+
new: (0, _react2.css)({
|
|
67
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
68
|
+
}),
|
|
69
|
+
removed: (0, _react2.css)({
|
|
70
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
71
|
+
}),
|
|
72
|
+
success: (0, _react2.css)({
|
|
73
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
74
|
+
})
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
border: {
|
|
78
|
+
subtle: {
|
|
79
|
+
default: (0, _react2.css)({
|
|
80
|
+
border: "1px solid #B7B9BE"
|
|
81
|
+
}),
|
|
82
|
+
inprogress: (0, _react2.css)({
|
|
83
|
+
border: "1px solid #669DF1"
|
|
84
|
+
}),
|
|
85
|
+
moved: (0, _react2.css)({
|
|
86
|
+
border: "1px solid #FCA700"
|
|
87
|
+
}),
|
|
88
|
+
new: (0, _react2.css)({
|
|
89
|
+
border: "1px solid #C97CF4"
|
|
90
|
+
}),
|
|
91
|
+
removed: (0, _react2.css)({
|
|
92
|
+
border: "1px solid #F87168"
|
|
93
|
+
}),
|
|
94
|
+
success: (0, _react2.css)({
|
|
95
|
+
border: "1px solid #94C748"
|
|
96
|
+
})
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
text: {
|
|
100
|
+
subtle: (0, _react2.css)({
|
|
101
|
+
color: "var(--ds-text, #172B4D)"
|
|
102
|
+
}),
|
|
103
|
+
bold: (0, _react2.css)({
|
|
104
|
+
color: '#292A2E'
|
|
105
|
+
})
|
|
106
|
+
}
|
|
107
|
+
};
|
|
24
108
|
var textStyles = (0, _react2.css)({
|
|
25
109
|
fontFamily: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
|
|
26
110
|
fontSize: '11px',
|
|
@@ -52,21 +136,40 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
52
136
|
maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
|
|
53
137
|
style = _ref.style;
|
|
54
138
|
var appearanceStyle = isBold ? 'bold' : 'subtle';
|
|
55
|
-
var appearanceType = appearance in
|
|
139
|
+
var appearanceType = appearance in styles.background[appearanceStyle] ? appearance : 'default';
|
|
56
140
|
var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
|
|
57
141
|
var maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
|
|
142
|
+
if ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh')) {
|
|
143
|
+
return (0, _react2.jsx)("span", {
|
|
144
|
+
style: {
|
|
145
|
+
backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
|
|
146
|
+
maxWidth: maxWidthIsPc ? maxWidth : '100%'
|
|
147
|
+
},
|
|
148
|
+
css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && styles.border.subtle[appearanceType]],
|
|
149
|
+
"data-testid": testId
|
|
150
|
+
}, (0, _react2.jsx)("span", {
|
|
151
|
+
css: [textStyles, styles.text[appearanceStyle]],
|
|
152
|
+
style: {
|
|
153
|
+
color: style === null || style === void 0 ? void 0 : style.color,
|
|
154
|
+
// to negate paddingInline specified on Box above
|
|
155
|
+
maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
|
|
156
|
+
},
|
|
157
|
+
"data-testid": testId && "".concat(testId, "--text")
|
|
158
|
+
}, children));
|
|
159
|
+
}
|
|
160
|
+
var appearanceTypeOld = appearance in backgroundColorsOld[appearanceStyle] ? appearance : 'default';
|
|
58
161
|
return (0, _react2.jsx)(_primitives.Box, {
|
|
59
162
|
as: "span",
|
|
60
|
-
backgroundColor:
|
|
163
|
+
backgroundColor: backgroundColorsOld[appearanceStyle][appearanceTypeOld],
|
|
61
164
|
style: {
|
|
62
165
|
backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
|
|
63
166
|
maxWidth: maxWidthIsPc ? maxWidth : '100%'
|
|
64
167
|
},
|
|
65
168
|
paddingInline: "space.050",
|
|
66
|
-
xcss:
|
|
169
|
+
xcss: baseStylesOld,
|
|
67
170
|
testId: testId
|
|
68
171
|
}, (0, _react2.jsx)("span", {
|
|
69
|
-
css: [textStyles,
|
|
172
|
+
css: [textStyles, textColorsOld[appearanceStyle][appearanceType]],
|
|
70
173
|
style: {
|
|
71
174
|
color: style === null || style === void 0 ? void 0 : style.color,
|
|
72
175
|
// to negate paddingInline specified on Box above
|
|
@@ -77,7 +180,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
77
180
|
});
|
|
78
181
|
Lozenge.displayName = 'Lozenge';
|
|
79
182
|
var _default = exports.default = Lozenge;
|
|
80
|
-
var
|
|
183
|
+
var backgroundColorsOld = {
|
|
81
184
|
bold: {
|
|
82
185
|
default: 'color.background.neutral.bold',
|
|
83
186
|
inprogress: 'color.background.information.bold',
|
|
@@ -95,7 +198,7 @@ var backgroundColors = {
|
|
|
95
198
|
success: 'color.background.success'
|
|
96
199
|
}
|
|
97
200
|
};
|
|
98
|
-
var
|
|
201
|
+
var textColorsOld = {
|
|
99
202
|
bold: {
|
|
100
203
|
default: (0, _react2.css)({
|
|
101
204
|
color: "var(--ds-text-inverse, #FFFFFF)"
|
|
@@ -6,14 +6,98 @@ import { memo } from 'react';
|
|
|
6
6
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
8
|
import { css, jsx } from '@emotion/react';
|
|
9
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
10
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
10
|
-
const
|
|
11
|
+
const baseStylesOld = xcss({
|
|
11
12
|
display: 'inline-flex',
|
|
12
13
|
borderRadius: 'border.radius',
|
|
13
14
|
blockSize: 'min-content',
|
|
14
15
|
position: 'static',
|
|
15
16
|
overflow: 'hidden'
|
|
16
17
|
});
|
|
18
|
+
const styles = {
|
|
19
|
+
container: css({
|
|
20
|
+
display: 'inline-flex',
|
|
21
|
+
boxSizing: 'border-box',
|
|
22
|
+
position: 'static',
|
|
23
|
+
blockSize: 'min-content',
|
|
24
|
+
borderRadius: '3px',
|
|
25
|
+
overflow: 'hidden',
|
|
26
|
+
paddingInline: "var(--ds-space-050, 4px)"
|
|
27
|
+
}),
|
|
28
|
+
background: {
|
|
29
|
+
bold: {
|
|
30
|
+
default: css({
|
|
31
|
+
backgroundColor: '#DDDEE1'
|
|
32
|
+
}),
|
|
33
|
+
inprogress: css({
|
|
34
|
+
backgroundColor: '#8FB8F6'
|
|
35
|
+
}),
|
|
36
|
+
moved: css({
|
|
37
|
+
backgroundColor: '#F9C84E'
|
|
38
|
+
}),
|
|
39
|
+
new: css({
|
|
40
|
+
backgroundColor: '#D8A0F7'
|
|
41
|
+
}),
|
|
42
|
+
removed: css({
|
|
43
|
+
backgroundColor: '#FD9891'
|
|
44
|
+
}),
|
|
45
|
+
success: css({
|
|
46
|
+
backgroundColor: '#B3DF72'
|
|
47
|
+
})
|
|
48
|
+
},
|
|
49
|
+
subtle: {
|
|
50
|
+
default: css({
|
|
51
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
52
|
+
}),
|
|
53
|
+
inprogress: css({
|
|
54
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
55
|
+
}),
|
|
56
|
+
moved: css({
|
|
57
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
58
|
+
}),
|
|
59
|
+
new: css({
|
|
60
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
61
|
+
}),
|
|
62
|
+
removed: css({
|
|
63
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
64
|
+
}),
|
|
65
|
+
success: css({
|
|
66
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
67
|
+
})
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
border: {
|
|
71
|
+
subtle: {
|
|
72
|
+
default: css({
|
|
73
|
+
border: `1px solid #B7B9BE`
|
|
74
|
+
}),
|
|
75
|
+
inprogress: css({
|
|
76
|
+
border: `1px solid #669DF1`
|
|
77
|
+
}),
|
|
78
|
+
moved: css({
|
|
79
|
+
border: `1px solid #FCA700`
|
|
80
|
+
}),
|
|
81
|
+
new: css({
|
|
82
|
+
border: `1px solid #C97CF4`
|
|
83
|
+
}),
|
|
84
|
+
removed: css({
|
|
85
|
+
border: `1px solid #F87168`
|
|
86
|
+
}),
|
|
87
|
+
success: css({
|
|
88
|
+
border: `1px solid #94C748`
|
|
89
|
+
})
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
text: {
|
|
93
|
+
subtle: css({
|
|
94
|
+
color: "var(--ds-text, #172B4D)"
|
|
95
|
+
}),
|
|
96
|
+
bold: css({
|
|
97
|
+
color: '#292A2E'
|
|
98
|
+
})
|
|
99
|
+
}
|
|
100
|
+
};
|
|
17
101
|
const textStyles = css({
|
|
18
102
|
fontFamily: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
|
|
19
103
|
fontSize: '11px',
|
|
@@ -43,21 +127,40 @@ const Lozenge = /*#__PURE__*/memo(({
|
|
|
43
127
|
style
|
|
44
128
|
}) => {
|
|
45
129
|
const appearanceStyle = isBold ? 'bold' : 'subtle';
|
|
46
|
-
const appearanceType = appearance in
|
|
130
|
+
const appearanceType = appearance in styles.background[appearanceStyle] ? appearance : 'default';
|
|
47
131
|
const maxWidthValue = typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`;
|
|
48
132
|
const maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
|
|
133
|
+
if (fg('platform-component-visual-refresh')) {
|
|
134
|
+
return jsx("span", {
|
|
135
|
+
style: {
|
|
136
|
+
backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
|
|
137
|
+
maxWidth: maxWidthIsPc ? maxWidth : '100%'
|
|
138
|
+
},
|
|
139
|
+
css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && styles.border.subtle[appearanceType]],
|
|
140
|
+
"data-testid": testId
|
|
141
|
+
}, jsx("span", {
|
|
142
|
+
css: [textStyles, styles.text[appearanceStyle]],
|
|
143
|
+
style: {
|
|
144
|
+
color: style === null || style === void 0 ? void 0 : style.color,
|
|
145
|
+
// to negate paddingInline specified on Box above
|
|
146
|
+
maxWidth: maxWidthIsPc ? '100%' : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`
|
|
147
|
+
},
|
|
148
|
+
"data-testid": testId && `${testId}--text`
|
|
149
|
+
}, children));
|
|
150
|
+
}
|
|
151
|
+
const appearanceTypeOld = appearance in backgroundColorsOld[appearanceStyle] ? appearance : 'default';
|
|
49
152
|
return jsx(Box, {
|
|
50
153
|
as: "span",
|
|
51
|
-
backgroundColor:
|
|
154
|
+
backgroundColor: backgroundColorsOld[appearanceStyle][appearanceTypeOld],
|
|
52
155
|
style: {
|
|
53
156
|
backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
|
|
54
157
|
maxWidth: maxWidthIsPc ? maxWidth : '100%'
|
|
55
158
|
},
|
|
56
159
|
paddingInline: "space.050",
|
|
57
|
-
xcss:
|
|
160
|
+
xcss: baseStylesOld,
|
|
58
161
|
testId: testId
|
|
59
162
|
}, jsx("span", {
|
|
60
|
-
css: [textStyles,
|
|
163
|
+
css: [textStyles, textColorsOld[appearanceStyle][appearanceType]],
|
|
61
164
|
style: {
|
|
62
165
|
color: style === null || style === void 0 ? void 0 : style.color,
|
|
63
166
|
// to negate paddingInline specified on Box above
|
|
@@ -68,7 +171,7 @@ const Lozenge = /*#__PURE__*/memo(({
|
|
|
68
171
|
});
|
|
69
172
|
Lozenge.displayName = 'Lozenge';
|
|
70
173
|
export default Lozenge;
|
|
71
|
-
const
|
|
174
|
+
const backgroundColorsOld = {
|
|
72
175
|
bold: {
|
|
73
176
|
default: 'color.background.neutral.bold',
|
|
74
177
|
inprogress: 'color.background.information.bold',
|
|
@@ -86,7 +189,7 @@ const backgroundColors = {
|
|
|
86
189
|
success: 'color.background.success'
|
|
87
190
|
}
|
|
88
191
|
};
|
|
89
|
-
const
|
|
192
|
+
const textColorsOld = {
|
|
90
193
|
bold: {
|
|
91
194
|
default: css({
|
|
92
195
|
color: "var(--ds-text-inverse, #FFFFFF)"
|
|
@@ -6,14 +6,98 @@ import { memo } from 'react';
|
|
|
6
6
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
8
|
import { css, jsx } from '@emotion/react';
|
|
9
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
10
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
10
|
-
var
|
|
11
|
+
var baseStylesOld = xcss({
|
|
11
12
|
display: 'inline-flex',
|
|
12
13
|
borderRadius: 'border.radius',
|
|
13
14
|
blockSize: 'min-content',
|
|
14
15
|
position: 'static',
|
|
15
16
|
overflow: 'hidden'
|
|
16
17
|
});
|
|
18
|
+
var styles = {
|
|
19
|
+
container: css({
|
|
20
|
+
display: 'inline-flex',
|
|
21
|
+
boxSizing: 'border-box',
|
|
22
|
+
position: 'static',
|
|
23
|
+
blockSize: 'min-content',
|
|
24
|
+
borderRadius: '3px',
|
|
25
|
+
overflow: 'hidden',
|
|
26
|
+
paddingInline: "var(--ds-space-050, 4px)"
|
|
27
|
+
}),
|
|
28
|
+
background: {
|
|
29
|
+
bold: {
|
|
30
|
+
default: css({
|
|
31
|
+
backgroundColor: '#DDDEE1'
|
|
32
|
+
}),
|
|
33
|
+
inprogress: css({
|
|
34
|
+
backgroundColor: '#8FB8F6'
|
|
35
|
+
}),
|
|
36
|
+
moved: css({
|
|
37
|
+
backgroundColor: '#F9C84E'
|
|
38
|
+
}),
|
|
39
|
+
new: css({
|
|
40
|
+
backgroundColor: '#D8A0F7'
|
|
41
|
+
}),
|
|
42
|
+
removed: css({
|
|
43
|
+
backgroundColor: '#FD9891'
|
|
44
|
+
}),
|
|
45
|
+
success: css({
|
|
46
|
+
backgroundColor: '#B3DF72'
|
|
47
|
+
})
|
|
48
|
+
},
|
|
49
|
+
subtle: {
|
|
50
|
+
default: css({
|
|
51
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
52
|
+
}),
|
|
53
|
+
inprogress: css({
|
|
54
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
55
|
+
}),
|
|
56
|
+
moved: css({
|
|
57
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
58
|
+
}),
|
|
59
|
+
new: css({
|
|
60
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
61
|
+
}),
|
|
62
|
+
removed: css({
|
|
63
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
64
|
+
}),
|
|
65
|
+
success: css({
|
|
66
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
|
|
67
|
+
})
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
border: {
|
|
71
|
+
subtle: {
|
|
72
|
+
default: css({
|
|
73
|
+
border: "1px solid #B7B9BE"
|
|
74
|
+
}),
|
|
75
|
+
inprogress: css({
|
|
76
|
+
border: "1px solid #669DF1"
|
|
77
|
+
}),
|
|
78
|
+
moved: css({
|
|
79
|
+
border: "1px solid #FCA700"
|
|
80
|
+
}),
|
|
81
|
+
new: css({
|
|
82
|
+
border: "1px solid #C97CF4"
|
|
83
|
+
}),
|
|
84
|
+
removed: css({
|
|
85
|
+
border: "1px solid #F87168"
|
|
86
|
+
}),
|
|
87
|
+
success: css({
|
|
88
|
+
border: "1px solid #94C748"
|
|
89
|
+
})
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
text: {
|
|
93
|
+
subtle: css({
|
|
94
|
+
color: "var(--ds-text, #172B4D)"
|
|
95
|
+
}),
|
|
96
|
+
bold: css({
|
|
97
|
+
color: '#292A2E'
|
|
98
|
+
})
|
|
99
|
+
}
|
|
100
|
+
};
|
|
17
101
|
var textStyles = css({
|
|
18
102
|
fontFamily: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
|
|
19
103
|
fontSize: '11px',
|
|
@@ -45,21 +129,40 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
|
|
|
45
129
|
maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
|
|
46
130
|
style = _ref.style;
|
|
47
131
|
var appearanceStyle = isBold ? 'bold' : 'subtle';
|
|
48
|
-
var appearanceType = appearance in
|
|
132
|
+
var appearanceType = appearance in styles.background[appearanceStyle] ? appearance : 'default';
|
|
49
133
|
var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
|
|
50
134
|
var maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
|
|
135
|
+
if (fg('platform-component-visual-refresh')) {
|
|
136
|
+
return jsx("span", {
|
|
137
|
+
style: {
|
|
138
|
+
backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
|
|
139
|
+
maxWidth: maxWidthIsPc ? maxWidth : '100%'
|
|
140
|
+
},
|
|
141
|
+
css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && styles.border.subtle[appearanceType]],
|
|
142
|
+
"data-testid": testId
|
|
143
|
+
}, jsx("span", {
|
|
144
|
+
css: [textStyles, styles.text[appearanceStyle]],
|
|
145
|
+
style: {
|
|
146
|
+
color: style === null || style === void 0 ? void 0 : style.color,
|
|
147
|
+
// to negate paddingInline specified on Box above
|
|
148
|
+
maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
|
|
149
|
+
},
|
|
150
|
+
"data-testid": testId && "".concat(testId, "--text")
|
|
151
|
+
}, children));
|
|
152
|
+
}
|
|
153
|
+
var appearanceTypeOld = appearance in backgroundColorsOld[appearanceStyle] ? appearance : 'default';
|
|
51
154
|
return jsx(Box, {
|
|
52
155
|
as: "span",
|
|
53
|
-
backgroundColor:
|
|
156
|
+
backgroundColor: backgroundColorsOld[appearanceStyle][appearanceTypeOld],
|
|
54
157
|
style: {
|
|
55
158
|
backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
|
|
56
159
|
maxWidth: maxWidthIsPc ? maxWidth : '100%'
|
|
57
160
|
},
|
|
58
161
|
paddingInline: "space.050",
|
|
59
|
-
xcss:
|
|
162
|
+
xcss: baseStylesOld,
|
|
60
163
|
testId: testId
|
|
61
164
|
}, jsx("span", {
|
|
62
|
-
css: [textStyles,
|
|
165
|
+
css: [textStyles, textColorsOld[appearanceStyle][appearanceType]],
|
|
63
166
|
style: {
|
|
64
167
|
color: style === null || style === void 0 ? void 0 : style.color,
|
|
65
168
|
// to negate paddingInline specified on Box above
|
|
@@ -70,7 +173,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
|
|
|
70
173
|
});
|
|
71
174
|
Lozenge.displayName = 'Lozenge';
|
|
72
175
|
export default Lozenge;
|
|
73
|
-
var
|
|
176
|
+
var backgroundColorsOld = {
|
|
74
177
|
bold: {
|
|
75
178
|
default: 'color.background.neutral.bold',
|
|
76
179
|
inprogress: 'color.background.information.bold',
|
|
@@ -88,7 +191,7 @@ var backgroundColors = {
|
|
|
88
191
|
success: 'color.background.success'
|
|
89
192
|
}
|
|
90
193
|
};
|
|
91
|
-
var
|
|
194
|
+
var textColorsOld = {
|
|
92
195
|
bold: {
|
|
93
196
|
default: css({
|
|
94
197
|
color: "var(--ds-text-inverse, #FFFFFF)"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/lozenge",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.9.0",
|
|
4
4
|
"description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -40,9 +40,10 @@
|
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@atlaskit/codemod-utils": "^4.2.0",
|
|
43
|
+
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
43
44
|
"@atlaskit/primitives": "^11.0.0",
|
|
44
45
|
"@atlaskit/theme": "^12.11.0",
|
|
45
|
-
"@atlaskit/tokens": "^1.
|
|
46
|
+
"@atlaskit/tokens": "^1.54.0",
|
|
46
47
|
"@babel/runtime": "^7.0.0",
|
|
47
48
|
"@emotion/react": "^11.7.1"
|
|
48
49
|
},
|
|
@@ -86,5 +87,10 @@
|
|
|
86
87
|
"deprecation": "no-deprecated-imports"
|
|
87
88
|
}
|
|
88
89
|
},
|
|
90
|
+
"platform-feature-flags": {
|
|
91
|
+
"platform-component-visual-refresh": {
|
|
92
|
+
"type": "boolean"
|
|
93
|
+
}
|
|
94
|
+
},
|
|
89
95
|
"homepage": "https://atlassian.design/components/lozenge/"
|
|
90
96
|
}
|