@atlaskit/icon 25.3.1 → 25.4.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.
Files changed (5) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/components/icon-new.js +1 -11
  3. package/dist/es2019/components/icon-new.js +1 -18
  4. package/dist/esm/components/icon-new.js +1 -11
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/icon
2
2
 
3
+ ## 25.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#134572](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134572)
8
+ [`9ae8e789e419b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9ae8e789e419b) -
9
+ Icons are now shipped using paths instead of strokes and no longer require SVG filter overrides
10
+ when using disabled tokens for color.
11
+
3
12
  ## 25.3.1
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/components/icon-new.js CHANGED
@@ -159,23 +159,13 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
159
159
  viewBoxPadding = paddingMap['core'][(_props$spacing2 = props.spacing) !== null && _props$spacing2 !== void 0 ? _props$spacing2 : 'none'];
160
160
  }
161
161
  var viewBoxSize = baseSize + 2 * viewBoxPadding;
162
-
163
- // Workaround for the transparency in our disabled icon token.
164
- // Because we have multiple strokes in icons, opacities overlap
165
- // This filter has an impact on render performance, but this is
166
- // acceptable as icons aren't commonly disabled en-masse
167
- var iconColor = color;
168
- if (dangerouslySetInnerHTML && color === "var(--ds-icon-disabled, #091E424F)") {
169
- dangerouslySetInnerHTML.__html = "\n<filter id=\"ds-newIconOpacityFilter\">\n <feFlood flood-color=\"var(--ds-icon-disabled)\" />\n <feComposite in2=\"SourceGraphic\" operator=\"in\" />\n</filter>\n<g filter=\"url(#ds-newIconOpacityFilter)\">\n ".concat(dangerouslySetInnerHTML.__html, "\n</g>");
170
- iconColor = "var(--ds-icon, #44546F)";
171
- }
172
162
  return (0, _react2.jsx)("span", {
173
163
  "data-testid": testId,
174
164
  role: label ? 'img' : undefined,
175
165
  "aria-label": label ? label : undefined,
176
166
  "aria-hidden": label ? undefined : true,
177
167
  style: {
178
- color: iconColor
168
+ color: color
179
169
  },
180
170
  css: [iconStyles, baseHcmStyles, shouldScale && scaleStyles, props.type === 'utility' && utilityIconStyles]
181
171
  }, (0, _react2.jsx)("svg", {
package/dist/es2019/components/icon-new.js CHANGED
@@ -156,30 +156,13 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
156
156
  viewBoxPadding = paddingMap['core'][(_props$spacing2 = props.spacing) !== null && _props$spacing2 !== void 0 ? _props$spacing2 : 'none'];
157
157
  }
158
158
  const viewBoxSize = baseSize + 2 * viewBoxPadding;
159
-
160
- // Workaround for the transparency in our disabled icon token.
161
- // Because we have multiple strokes in icons, opacities overlap
162
- // This filter has an impact on render performance, but this is
163
- // acceptable as icons aren't commonly disabled en-masse
164
- let iconColor = color;
165
- if (dangerouslySetInnerHTML && color === "var(--ds-icon-disabled, #091E424F)") {
166
- dangerouslySetInnerHTML.__html = `
167
- <filter id="ds-newIconOpacityFilter">
168
- <feFlood flood-color="var(--ds-icon-disabled)" />
169
- <feComposite in2="SourceGraphic" operator="in" />
170
- </filter>
171
- <g filter="url(#ds-newIconOpacityFilter)">
172
- ${dangerouslySetInnerHTML.__html}
173
- </g>`;
174
- iconColor = "var(--ds-icon, #44546F)";
175
- }
176
159
  return jsx("span", {
177
160
  "data-testid": testId,
178
161
  role: label ? 'img' : undefined,
179
162
  "aria-label": label ? label : undefined,
180
163
  "aria-hidden": label ? undefined : true,
181
164
  style: {
182
- color: iconColor
165
+ color
183
166
  },
184
167
  css: [iconStyles, baseHcmStyles, shouldScale && scaleStyles, props.type === 'utility' && utilityIconStyles]
185
168
  }, jsx("svg", {
package/dist/esm/components/icon-new.js CHANGED
@@ -153,23 +153,13 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
153
153
  viewBoxPadding = paddingMap['core'][(_props$spacing2 = props.spacing) !== null && _props$spacing2 !== void 0 ? _props$spacing2 : 'none'];
154
154
  }
155
155
  var viewBoxSize = baseSize + 2 * viewBoxPadding;
156
-
157
- // Workaround for the transparency in our disabled icon token.
158
- // Because we have multiple strokes in icons, opacities overlap
159
- // This filter has an impact on render performance, but this is
160
- // acceptable as icons aren't commonly disabled en-masse
161
- var iconColor = color;
162
- if (dangerouslySetInnerHTML && color === "var(--ds-icon-disabled, #091E424F)") {
163
- dangerouslySetInnerHTML.__html = "\n<filter id=\"ds-newIconOpacityFilter\">\n <feFlood flood-color=\"var(--ds-icon-disabled)\" />\n <feComposite in2=\"SourceGraphic\" operator=\"in\" />\n</filter>\n<g filter=\"url(#ds-newIconOpacityFilter)\">\n ".concat(dangerouslySetInnerHTML.__html, "\n</g>");
164
- iconColor = "var(--ds-icon, #44546F)";
165
- }
166
156
  return jsx("span", {
167
157
  "data-testid": testId,
168
158
  role: label ? 'img' : undefined,
169
159
  "aria-label": label ? label : undefined,
170
160
  "aria-hidden": label ? undefined : true,
171
161
  style: {
172
- color: iconColor
162
+ color: color
173
163
  },
174
164
  css: [iconStyles, baseHcmStyles, shouldScale && scaleStyles, props.type === 'utility' && utilityIconStyles]
175
165
  }, jsx("svg", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/icon",
3
- "version": "25.3.1",
3
+ "version": "25.4.0",
4
4
  "description": "An icon is a symbol representing a command, device, directory, or common action.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"