@atlaskit/lozenge 11.12.5 → 11.12.7

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 CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/lozenge
2
2
 
3
+ ## 11.12.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [#101729](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101729)
8
+ [`0935b5dc9db22`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0935b5dc9db22) -
9
+ [ux] updated visually refresh styles for subtle styled lozenge
10
+
11
+ ## 11.12.6
12
+
13
+ ### Patch Changes
14
+
15
+ - [#103999](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103999)
16
+ [`9f62ecec4d422`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9f62ecec4d422) -
17
+ Update dependencies.
18
+
3
19
  ## 11.12.5
4
20
 
5
21
  ### Patch Changes
@@ -32,6 +32,10 @@ var styles = {
32
32
  overflow: 'hidden',
33
33
  paddingInline: "var(--ds-space-050, 4px)"
34
34
  }),
35
+ containerSubtle: (0, _react2.css)({
36
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
37
+ outlineOffset: -1
38
+ }),
35
39
  background: {
36
40
  bold: {
37
41
  default: (0, _react2.css)({
@@ -96,6 +100,28 @@ var styles = {
96
100
  })
97
101
  }
98
102
  },
103
+ outline: {
104
+ subtle: {
105
+ default: (0, _react2.css)({
106
+ outline: "1px solid #B7B9BE"
107
+ }),
108
+ inprogress: (0, _react2.css)({
109
+ outline: "1px solid #669DF1"
110
+ }),
111
+ moved: (0, _react2.css)({
112
+ outline: "1px solid #FCA700"
113
+ }),
114
+ new: (0, _react2.css)({
115
+ outline: "1px solid #C97CF4"
116
+ }),
117
+ removed: (0, _react2.css)({
118
+ outline: "1px solid #F87168"
119
+ }),
120
+ success: (0, _react2.css)({
121
+ outline: "1px solid #94C748"
122
+ })
123
+ }
124
+ },
99
125
  text: {
100
126
  subtle: (0, _react2.css)({
101
127
  color: "var(--ds-text, #172B4D)"
@@ -115,6 +141,7 @@ var textStyles = (0, _react2.css)({
115
141
  lineHeight: '16px',
116
142
  overflow: 'hidden',
117
143
  textOverflow: 'ellipsis',
144
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
118
145
  textTransform: 'uppercase',
119
146
  whiteSpace: 'nowrap'
120
147
  });
@@ -147,7 +174,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
147
174
  backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
148
175
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
149
176
  },
150
- css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && styles.border.subtle[appearanceType]],
177
+ css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && !(0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && styles.border.subtle[appearanceType], appearanceStyle === 'subtle' && (0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && styles.outline.subtle[appearanceType], appearanceStyle === 'subtle' && (0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && styles.containerSubtle],
151
178
  "data-testid": testId
152
179
  }, (0, _react2.jsx)("span", {
153
180
  css: [textStyles, styles.text[appearanceStyle]],
@@ -7,11 +7,20 @@
7
7
  ._19itzi1n{border:1px solid #fca700}
8
8
  ._2rko1l7b{border-radius:3px}
9
9
  ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
10
- ._18zr1b66{padding-inline:var(--ds-space-050,4px)}._18m915vq{overflow-y:hidden}
10
+ ._18zr1b66{padding-inline:var(--ds-space-050,4px)}._12ji14je{outline-color:#b7b9be}
11
+ ._12ji157s{outline-color:#c97cf4}
12
+ ._12jia2c0{outline-color:#f87168}
13
+ ._12jih727{outline-color:#fca700}
14
+ ._12jin0nx{outline-color:#94c748}
15
+ ._12jiuisw{outline-color:#669df1}
16
+ ._12y3t94y{outline-width:1px}
17
+ ._18m915vq{overflow-y:hidden}
11
18
  ._1bto1l2s{text-overflow:ellipsis}
19
+ ._1cwg1n1a{outline-offset:-1px}
12
20
  ._1e0c116y{display:inline-flex}
13
21
  ._1kz6184x{block-size:min-content}
14
22
  ._1p1dangw{text-transform:uppercase}
23
+ ._1qu2nqa1{outline-style:solid}
15
24
  ._1reo15vq{overflow-x:hidden}
16
25
  ._1wyb1skh{font-size:11px}
17
26
  ._bfhk1366{background-color:#fd9891}
@@ -59,6 +59,7 @@ var backgroundColorsOld = {
59
59
  */
60
60
  var stylesNew = {
61
61
  container: "_2rko1l7b _1reo15vq _18m915vq _1e0c116y _vchhusvi _kqswpfqs _1kz6184x _bozg1b66 _y4ti1b66",
62
+ containerSubtle: "_1cwg1n1a",
62
63
  text: "_1reo15vq _18m915vq _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
63
64
  'bg.bold.default': "_bfhk1fkg",
64
65
  'bg.bold.inprogress': "_bfhk1ymo",
@@ -78,6 +79,12 @@ var stylesNew = {
78
79
  'border.subtle.new': "_19it1apr",
79
80
  'border.subtle.removed': "_19itoa5t",
80
81
  'border.subtle.success': "_19it1am1",
82
+ 'outline.subtle.default': "_12ji14je _1qu2nqa1 _12y3t94y",
83
+ 'outline.subtle.inprogress': "_12jiuisw _1qu2nqa1 _12y3t94y",
84
+ 'outline.subtle.moved': "_12jih727 _1qu2nqa1 _12y3t94y",
85
+ 'outline.subtle.new': "_12ji157s _1qu2nqa1 _12y3t94y",
86
+ 'outline.subtle.removed': "_12jia2c0 _1qu2nqa1 _12y3t94y",
87
+ 'outline.subtle.success': "_12jin0nx _1qu2nqa1 _12y3t94y",
81
88
  'text.subtle': "_syaz1fxt",
82
89
  'text.bold': "_syazwwip"
83
90
  };
@@ -114,7 +121,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
114
121
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
115
122
  },
116
123
  "data-testid": testId,
117
- className: (0, _runtime.ax)([stylesNew.container, stylesNew["bg.".concat(appearanceStyle, ".").concat(appearanceType)], appearanceStyle === 'subtle' && stylesNew["border.subtle.".concat(appearanceType)]])
124
+ className: (0, _runtime.ax)([stylesNew.container, stylesNew["bg.".concat(appearanceStyle, ".").concat(appearanceType)], appearanceStyle === 'subtle' && !(0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && stylesNew["border.subtle.".concat(appearanceType)], appearanceStyle === 'subtle' && (0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && stylesNew["outline.subtle.".concat(appearanceType)], appearanceStyle === 'subtle' && (0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && stylesNew.containerSubtle])
118
125
  }, /*#__PURE__*/React.createElement("span", {
119
126
  style: {
120
127
  color: style === null || style === void 0 ? void 0 : style.color,
@@ -25,6 +25,10 @@ const styles = {
25
25
  overflow: 'hidden',
26
26
  paddingInline: "var(--ds-space-050, 4px)"
27
27
  }),
28
+ containerSubtle: css({
29
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
30
+ outlineOffset: -1
31
+ }),
28
32
  background: {
29
33
  bold: {
30
34
  default: css({
@@ -89,6 +93,28 @@ const styles = {
89
93
  })
90
94
  }
91
95
  },
96
+ outline: {
97
+ subtle: {
98
+ default: css({
99
+ outline: `1px solid #B7B9BE`
100
+ }),
101
+ inprogress: css({
102
+ outline: `1px solid #669DF1`
103
+ }),
104
+ moved: css({
105
+ outline: `1px solid #FCA700`
106
+ }),
107
+ new: css({
108
+ outline: `1px solid #C97CF4`
109
+ }),
110
+ removed: css({
111
+ outline: `1px solid #F87168`
112
+ }),
113
+ success: css({
114
+ outline: `1px solid #94C748`
115
+ })
116
+ }
117
+ },
92
118
  text: {
93
119
  subtle: css({
94
120
  color: "var(--ds-text, #172B4D)"
@@ -108,6 +134,7 @@ const textStyles = css({
108
134
  lineHeight: '16px',
109
135
  overflow: 'hidden',
110
136
  textOverflow: 'ellipsis',
137
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
111
138
  textTransform: 'uppercase',
112
139
  whiteSpace: 'nowrap'
113
140
  });
@@ -138,7 +165,7 @@ const Lozenge = /*#__PURE__*/memo(({
138
165
  backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
139
166
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
140
167
  },
141
- css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && styles.border.subtle[appearanceType]],
168
+ css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && !fg('visual-refresh_drop_5') && styles.border.subtle[appearanceType], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && styles.outline.subtle[appearanceType], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && styles.containerSubtle],
142
169
  "data-testid": testId
143
170
  }, jsx("span", {
144
171
  css: [textStyles, styles.text[appearanceStyle]],
@@ -7,11 +7,20 @@
7
7
  ._19itzi1n{border:1px solid #fca700}
8
8
  ._2rko1l7b{border-radius:3px}
9
9
  ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
10
- ._18zr1b66{padding-inline:var(--ds-space-050,4px)}._18m915vq{overflow-y:hidden}
10
+ ._18zr1b66{padding-inline:var(--ds-space-050,4px)}._12ji14je{outline-color:#b7b9be}
11
+ ._12ji157s{outline-color:#c97cf4}
12
+ ._12jia2c0{outline-color:#f87168}
13
+ ._12jih727{outline-color:#fca700}
14
+ ._12jin0nx{outline-color:#94c748}
15
+ ._12jiuisw{outline-color:#669df1}
16
+ ._12y3t94y{outline-width:1px}
17
+ ._18m915vq{overflow-y:hidden}
11
18
  ._1bto1l2s{text-overflow:ellipsis}
19
+ ._1cwg1n1a{outline-offset:-1px}
12
20
  ._1e0c116y{display:inline-flex}
13
21
  ._1kz6184x{block-size:min-content}
14
22
  ._1p1dangw{text-transform:uppercase}
23
+ ._1qu2nqa1{outline-style:solid}
15
24
  ._1reo15vq{overflow-x:hidden}
16
25
  ._1wyb1skh{font-size:11px}
17
26
  ._bfhk1366{background-color:#fd9891}
@@ -50,6 +50,7 @@ const backgroundColorsOld = {
50
50
  */
51
51
  const stylesNew = {
52
52
  container: "_2rko1l7b _1reo15vq _18m915vq _1e0c116y _vchhusvi _kqswpfqs _1kz6184x _bozg1b66 _y4ti1b66",
53
+ containerSubtle: "_1cwg1n1a",
53
54
  text: "_1reo15vq _18m915vq _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
54
55
  'bg.bold.default': "_bfhk1fkg",
55
56
  'bg.bold.inprogress': "_bfhk1ymo",
@@ -69,6 +70,12 @@ const stylesNew = {
69
70
  'border.subtle.new': "_19it1apr",
70
71
  'border.subtle.removed': "_19itoa5t",
71
72
  'border.subtle.success': "_19it1am1",
73
+ 'outline.subtle.default': "_12ji14je _1qu2nqa1 _12y3t94y",
74
+ 'outline.subtle.inprogress': "_12jiuisw _1qu2nqa1 _12y3t94y",
75
+ 'outline.subtle.moved': "_12jih727 _1qu2nqa1 _12y3t94y",
76
+ 'outline.subtle.new': "_12ji157s _1qu2nqa1 _12y3t94y",
77
+ 'outline.subtle.removed': "_12jia2c0 _1qu2nqa1 _12y3t94y",
78
+ 'outline.subtle.success': "_12jin0nx _1qu2nqa1 _12y3t94y",
72
79
  'text.subtle': "_syaz1fxt",
73
80
  'text.bold': "_syazwwip"
74
81
  };
@@ -101,7 +108,7 @@ const Lozenge = /*#__PURE__*/memo(({
101
108
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
102
109
  },
103
110
  "data-testid": testId,
104
- className: ax([stylesNew.container, stylesNew[`bg.${appearanceStyle}.${appearanceType}`], appearanceStyle === 'subtle' && stylesNew[`border.subtle.${appearanceType}`]])
111
+ className: ax([stylesNew.container, stylesNew[`bg.${appearanceStyle}.${appearanceType}`], appearanceStyle === 'subtle' && !fg('visual-refresh_drop_5') && stylesNew[`border.subtle.${appearanceType}`], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && stylesNew[`outline.subtle.${appearanceType}`], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && stylesNew.containerSubtle])
105
112
  }, /*#__PURE__*/React.createElement("span", {
106
113
  style: {
107
114
  color: style === null || style === void 0 ? void 0 : style.color,
@@ -25,6 +25,10 @@ var styles = {
25
25
  overflow: 'hidden',
26
26
  paddingInline: "var(--ds-space-050, 4px)"
27
27
  }),
28
+ containerSubtle: css({
29
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
30
+ outlineOffset: -1
31
+ }),
28
32
  background: {
29
33
  bold: {
30
34
  default: css({
@@ -89,6 +93,28 @@ var styles = {
89
93
  })
90
94
  }
91
95
  },
96
+ outline: {
97
+ subtle: {
98
+ default: css({
99
+ outline: "1px solid #B7B9BE"
100
+ }),
101
+ inprogress: css({
102
+ outline: "1px solid #669DF1"
103
+ }),
104
+ moved: css({
105
+ outline: "1px solid #FCA700"
106
+ }),
107
+ new: css({
108
+ outline: "1px solid #C97CF4"
109
+ }),
110
+ removed: css({
111
+ outline: "1px solid #F87168"
112
+ }),
113
+ success: css({
114
+ outline: "1px solid #94C748"
115
+ })
116
+ }
117
+ },
92
118
  text: {
93
119
  subtle: css({
94
120
  color: "var(--ds-text, #172B4D)"
@@ -108,6 +134,7 @@ var textStyles = css({
108
134
  lineHeight: '16px',
109
135
  overflow: 'hidden',
110
136
  textOverflow: 'ellipsis',
137
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
111
138
  textTransform: 'uppercase',
112
139
  whiteSpace: 'nowrap'
113
140
  });
@@ -140,7 +167,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
140
167
  backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
141
168
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
142
169
  },
143
- css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && styles.border.subtle[appearanceType]],
170
+ css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && !fg('visual-refresh_drop_5') && styles.border.subtle[appearanceType], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && styles.outline.subtle[appearanceType], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && styles.containerSubtle],
144
171
  "data-testid": testId
145
172
  }, jsx("span", {
146
173
  css: [textStyles, styles.text[appearanceStyle]],
@@ -7,11 +7,20 @@
7
7
  ._19itzi1n{border:1px solid #fca700}
8
8
  ._2rko1l7b{border-radius:3px}
9
9
  ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
10
- ._18zr1b66{padding-inline:var(--ds-space-050,4px)}._18m915vq{overflow-y:hidden}
10
+ ._18zr1b66{padding-inline:var(--ds-space-050,4px)}._12ji14je{outline-color:#b7b9be}
11
+ ._12ji157s{outline-color:#c97cf4}
12
+ ._12jia2c0{outline-color:#f87168}
13
+ ._12jih727{outline-color:#fca700}
14
+ ._12jin0nx{outline-color:#94c748}
15
+ ._12jiuisw{outline-color:#669df1}
16
+ ._12y3t94y{outline-width:1px}
17
+ ._18m915vq{overflow-y:hidden}
11
18
  ._1bto1l2s{text-overflow:ellipsis}
19
+ ._1cwg1n1a{outline-offset:-1px}
12
20
  ._1e0c116y{display:inline-flex}
13
21
  ._1kz6184x{block-size:min-content}
14
22
  ._1p1dangw{text-transform:uppercase}
23
+ ._1qu2nqa1{outline-style:solid}
15
24
  ._1reo15vq{overflow-x:hidden}
16
25
  ._1wyb1skh{font-size:11px}
17
26
  ._bfhk1366{background-color:#fd9891}
@@ -50,6 +50,7 @@ var backgroundColorsOld = {
50
50
  */
51
51
  var stylesNew = {
52
52
  container: "_2rko1l7b _1reo15vq _18m915vq _1e0c116y _vchhusvi _kqswpfqs _1kz6184x _bozg1b66 _y4ti1b66",
53
+ containerSubtle: "_1cwg1n1a",
53
54
  text: "_1reo15vq _18m915vq _ect41sbm _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
54
55
  'bg.bold.default': "_bfhk1fkg",
55
56
  'bg.bold.inprogress': "_bfhk1ymo",
@@ -69,6 +70,12 @@ var stylesNew = {
69
70
  'border.subtle.new': "_19it1apr",
70
71
  'border.subtle.removed': "_19itoa5t",
71
72
  'border.subtle.success': "_19it1am1",
73
+ 'outline.subtle.default': "_12ji14je _1qu2nqa1 _12y3t94y",
74
+ 'outline.subtle.inprogress': "_12jiuisw _1qu2nqa1 _12y3t94y",
75
+ 'outline.subtle.moved': "_12jih727 _1qu2nqa1 _12y3t94y",
76
+ 'outline.subtle.new': "_12ji157s _1qu2nqa1 _12y3t94y",
77
+ 'outline.subtle.removed': "_12jia2c0 _1qu2nqa1 _12y3t94y",
78
+ 'outline.subtle.success': "_12jin0nx _1qu2nqa1 _12y3t94y",
72
79
  'text.subtle': "_syaz1fxt",
73
80
  'text.bold': "_syazwwip"
74
81
  };
@@ -105,7 +112,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
105
112
  maxWidth: maxWidthIsPc ? maxWidth : '100%'
106
113
  },
107
114
  "data-testid": testId,
108
- className: ax([stylesNew.container, stylesNew["bg.".concat(appearanceStyle, ".").concat(appearanceType)], appearanceStyle === 'subtle' && stylesNew["border.subtle.".concat(appearanceType)]])
115
+ className: ax([stylesNew.container, stylesNew["bg.".concat(appearanceStyle, ".").concat(appearanceType)], appearanceStyle === 'subtle' && !fg('visual-refresh_drop_5') && stylesNew["border.subtle.".concat(appearanceType)], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && stylesNew["outline.subtle.".concat(appearanceType)], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && stylesNew.containerSubtle])
109
116
  }, /*#__PURE__*/React.createElement("span", {
110
117
  style: {
111
118
  color: style === null || style === void 0 ? void 0 : style.color,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "11.12.5",
3
+ "version": "11.12.7",
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/"
@@ -43,7 +43,7 @@
43
43
  "@atlaskit/platform-feature-flags": "^0.3.0",
44
44
  "@atlaskit/primitives": "^13.3.0",
45
45
  "@atlaskit/theme": "^14.0.0",
46
- "@atlaskit/tokens": "^3.0.0",
46
+ "@atlaskit/tokens": "^3.1.0",
47
47
  "@babel/runtime": "^7.0.0",
48
48
  "@compiled/react": "^0.18.1",
49
49
  "@emotion/react": "^11.7.1"
@@ -62,8 +62,7 @@
62
62
  "@testing-library/react": "^12.1.5",
63
63
  "jscodeshift": "^0.13.0",
64
64
  "react-dom": "^16.8.0",
65
- "typescript": "~5.4.2",
66
- "wait-for-expect": "^1.2.0"
65
+ "typescript": "~5.4.2"
67
66
  },
68
67
  "techstack": {
69
68
  "@atlassian/frontend": {
@@ -91,6 +90,9 @@
91
90
  "platform-feature-flags": {
92
91
  "platform-component-visual-refresh": {
93
92
  "type": "boolean"
93
+ },
94
+ "visual-refresh_drop_5": {
95
+ "type": "boolean"
94
96
  }
95
97
  },
96
98
  "homepage": "https://atlassian.design/components/lozenge/"