@atlaskit/icon 22.27.0 → 22.28.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 CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/icon
2
2
 
3
+ ## 22.28.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#169436](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169436)
8
+ [`e52faf54c03cd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e52faf54c03cd) -
9
+ Adds `testId` to Icon Tile. Fixes bug where icon tiles could render incorrectly when placed inside
10
+ headings.
11
+
3
12
  ## 22.27.0
4
13
 
5
14
  ### Minor Changes
@@ -129,7 +129,8 @@ var iconTileStyles = (0, _react.css)({
129
129
  display: 'inline-flex',
130
130
  boxSizing: 'border-box',
131
131
  alignItems: 'center',
132
- justifyContent: 'center'
132
+ justifyContent: 'center',
133
+ fontSize: 0 /* Prevents parent font-size from affecting the container */
133
134
  });
134
135
 
135
136
  /**
@@ -149,12 +150,14 @@ function IconTile(props) {
149
150
  size = _props$size === void 0 ? '24' : _props$size,
150
151
  _props$shape = props.shape,
151
152
  shape = _props$shape === void 0 ? 'square' : _props$shape,
152
- LEGACY_fallbackComponent = props.LEGACY_fallbackComponent;
153
+ LEGACY_fallbackComponent = props.LEGACY_fallbackComponent,
154
+ testId = props.testId;
153
155
  var ExpandedIcon = Icon;
154
156
  if (LEGACY_fallbackComponent && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
155
157
  return LEGACY_fallbackComponent;
156
158
  } else {
157
159
  return (0, _react.jsx)("span", {
160
+ "data-testid": testId,
158
161
  css: [iconTileStyles, appearanceMap[appearance], sizeMap[size], shapeMap[shape]]
159
162
  }, (0, _react.jsx)(ExpandedIcon, {
160
163
  color: "currentColor",
@@ -122,7 +122,8 @@ const iconTileStyles = css({
122
122
  display: 'inline-flex',
123
123
  boxSizing: 'border-box',
124
124
  alignItems: 'center',
125
- justifyContent: 'center'
125
+ justifyContent: 'center',
126
+ fontSize: 0 /* Prevents parent font-size from affecting the container */
126
127
  });
127
128
 
128
129
  /**
@@ -141,13 +142,15 @@ export default function IconTile(props) {
141
142
  appearance,
142
143
  size = '24',
143
144
  shape = 'square',
144
- LEGACY_fallbackComponent
145
+ LEGACY_fallbackComponent,
146
+ testId
145
147
  } = props;
146
148
  const ExpandedIcon = Icon;
147
149
  if (LEGACY_fallbackComponent && !fg('platform-visual-refresh-icons')) {
148
150
  return LEGACY_fallbackComponent;
149
151
  } else {
150
152
  return jsx("span", {
153
+ "data-testid": testId,
151
154
  css: [iconTileStyles, appearanceMap[appearance], sizeMap[size], shapeMap[shape]]
152
155
  }, jsx(ExpandedIcon, {
153
156
  color: "currentColor",
@@ -122,7 +122,8 @@ var iconTileStyles = css({
122
122
  display: 'inline-flex',
123
123
  boxSizing: 'border-box',
124
124
  alignItems: 'center',
125
- justifyContent: 'center'
125
+ justifyContent: 'center',
126
+ fontSize: 0 /* Prevents parent font-size from affecting the container */
126
127
  });
127
128
 
128
129
  /**
@@ -142,12 +143,14 @@ export default function IconTile(props) {
142
143
  size = _props$size === void 0 ? '24' : _props$size,
143
144
  _props$shape = props.shape,
144
145
  shape = _props$shape === void 0 ? 'square' : _props$shape,
145
- LEGACY_fallbackComponent = props.LEGACY_fallbackComponent;
146
+ LEGACY_fallbackComponent = props.LEGACY_fallbackComponent,
147
+ testId = props.testId;
146
148
  var ExpandedIcon = Icon;
147
149
  if (LEGACY_fallbackComponent && !fg('platform-visual-refresh-icons')) {
148
150
  return LEGACY_fallbackComponent;
149
151
  } else {
150
152
  return jsx("span", {
153
+ "data-testid": testId,
151
154
  css: [iconTileStyles, appearanceMap[appearance], sizeMap[size], shapeMap[shape]]
152
155
  }, jsx(ExpandedIcon, {
153
156
  color: "currentColor",
@@ -189,6 +189,11 @@ export interface IconTileProps {
189
189
  * Legacy component to render when the icon refresh feature flag is turned off.
190
190
  */
191
191
  LEGACY_fallbackComponent?: ReactElement;
192
+ /**
193
+ * A unique string that appears as a data attribute `data-testid` in the rendered code,
194
+ * serving as a hook for automated tests.
195
+ */
196
+ testId?: string;
192
197
  }
193
198
  export interface SkeletonProps {
194
199
  color?: string;
@@ -189,6 +189,11 @@ export interface IconTileProps {
189
189
  * Legacy component to render when the icon refresh feature flag is turned off.
190
190
  */
191
191
  LEGACY_fallbackComponent?: ReactElement;
192
+ /**
193
+ * A unique string that appears as a data attribute `data-testid` in the rendered code,
194
+ * serving as a hook for automated tests.
195
+ */
196
+ testId?: string;
192
197
  }
193
198
  export interface SkeletonProps {
194
199
  color?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/icon",
3
- "version": "22.27.0",
3
+ "version": "22.28.0",
4
4
  "description": "An icon is a visual representation of a command, device, directory, or common action.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -77,7 +77,7 @@
77
77
  },
78
78
  "devDependencies": {
79
79
  "@af/accessibility-testing": "*",
80
- "@af/icon-build-process": "^2.2.0",
80
+ "@af/icon-build-process": "^2.3.0",
81
81
  "@af/visual-regression": "*",
82
82
  "@atlaskit/code": "^15.6.0",
83
83
  "@atlaskit/ds-lib": "^3.3.0",