@atlaskit/icon 21.10.1 → 21.10.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/icon
 
+## 21.10.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 21.10.3
+
+### Patch Changes
+
+- [`58884c2f6c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58884c2f6c1) - Internal code change turning on a new linting rule.
+
+## 21.10.2
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
+- Updated dependencies
+
 ## 21.10.1
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,6 @@
 # Icon
 
-A React package that contains icons.
+An icon is a visual representation of a command, device, directory, or common action.
 
 ## Installation
 
@@ -10,5 +10,6 @@ yarn add @atlaskit/icon
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/design-system/icon).
-For adding a new icon to the icon set please follow the [adding new icons](https://developer.atlassian.com/cloud/framework/atlassian-frontend/documentation/02-adding-new-icons/) documentation.
+Icons should be used intentionally to maximize comprehension and reduce cognitive load. Use it to call attention to a particular action, command, or section. If you’re questioning an icon’s use, it probably doesn’t need to be used.
+
+To search through all the icons we have in our system, have a look at our [icon explorer](https://atlassian.design/components/icon/icon-explorer).

package/dist/cjs/components/utils.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getBackground = void 0;
 var themedBackground = {
-  light: "var(--ds-background-default, #FFFFFF)",
-  dark: "var(--ds-background-default, #1B2638)"
+  light: "var(--ds-surface, #FFFFFF)",
+  dark: "var(--ds-surface, #1B2638)"
 };
 /**
  * Returns the background color depending on the passed through mode.

package/dist/cjs/extract-react-types/custom-glyph.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomGlyphProps;
+
+function CustomGlyphProps(props) {
+  return null;
+}

package/dist/cjs/extract-react-types/svg.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SVGProps;
+
+function SVGProps(props) {
+  return null;
+}

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "21.10.1",
+	"version": "21.10.4",
 	"sideEffects": false
 }

package/dist/es2019/components/utils.js

@@ -1,6 +1,6 @@
 const themedBackground = {
-  light: "var(--ds-background-default, #FFFFFF)",
-  dark: "var(--ds-background-default, #1B2638)"
+  light: "var(--ds-surface, #FFFFFF)",
+  dark: "var(--ds-surface, #1B2638)"
 };
 /**
  * Returns the background color depending on the passed through mode.

package/dist/es2019/extract-react-types/custom-glyph.js

@@ -0,0 +1,3 @@
+export default function CustomGlyphProps(props) {
+  return null;
+}

package/dist/es2019/extract-react-types/svg.js

@@ -0,0 +1,3 @@
+export default function SVGProps(props) {
+  return null;
+}

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "21.10.1",
+	"version": "21.10.4",
 	"sideEffects": false
 }

package/dist/esm/components/utils.js

@@ -1,6 +1,6 @@
 var themedBackground = {
-  light: "var(--ds-background-default, #FFFFFF)",
-  dark: "var(--ds-background-default, #1B2638)"
+  light: "var(--ds-surface, #FFFFFF)",
+  dark: "var(--ds-surface, #1B2638)"
 };
 /**
  * Returns the background color depending on the passed through mode.

package/dist/esm/extract-react-types/custom-glyph.js

@@ -0,0 +1,3 @@
+export default function CustomGlyphProps(props) {
+  return null;
+}

package/dist/esm/extract-react-types/svg.js

@@ -0,0 +1,3 @@
+export default function SVGProps(props) {
+  return null;
+}

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "21.10.1",
+	"version": "21.10.4",
 	"sideEffects": false
 }

package/dist/types/components/styles.d.ts

@@ -2,10 +2,10 @@ import type { Size } from '../types';
 import { CSSObject } from '@emotion/core';
 export declare const commonSVGStyles: CSSObject;
 export declare const sizeStyleMap: {
-    small: import("@emotion/core").SerializedStyles;
-    medium: import("@emotion/core").SerializedStyles;
-    large: import("@emotion/core").SerializedStyles;
-    xlarge: import("@emotion/core").SerializedStyles;
+    small: import("@emotion/utils").SerializedStyles;
+    medium: import("@emotion/utils").SerializedStyles;
+    large: import("@emotion/utils").SerializedStyles;
+    xlarge: import("@emotion/utils").SerializedStyles;
 };
 /**
  * Returns the width of the icon's parent span. This function has

package/dist/types/components/utils.d.ts

@@ -3,4 +3,4 @@ import type { ThemeModes } from '@atlaskit/theme/types';
  * Returns the background color depending on the passed through mode.
  * @param mode
  */
-export declare const getBackground: (mode?: ThemeModes) => "var(--ds-background-default)";
+export declare const getBackground: (mode?: ThemeModes) => "var(--ds-surface)";

package/dist/types/extract-react-types/custom-glyph.d.ts

@@ -0,0 +1,2 @@
+import type { CustomGlyphProps as Props } from '../types';
+export default function CustomGlyphProps(props: Props): null;

package/dist/types/extract-react-types/svg.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps as Props } from '../types';
+export default function SVGProps(props: Props): null;

package/dist/types/types.d.ts

@@ -38,7 +38,7 @@ export interface OtherGlyphProps {
     /**
      * Text used to describe what the icon is in context.
      * A label is needed when there is no pairing visible text next to the icon.
-     * An empty string marks the icon as presentation only
+     * An empty string marks the icon as presentation only.
      */
     label: string;
     /**

package/docs/0-intro.tsx

@@ -1,22 +1,13 @@
 import React from 'react';
-import { md, Props } from '@atlaskit/docs';
-import IconExplorer from '../examples/01-icon-explorer';
 
-export default md`
-  ## Icon explorer
-
-  ${(
-    <p>
-      <IconExplorer />
-    </p>
-  )}
+import { md } from '@atlaskit/docs';
+import SectionMessage from '@atlaskit/section-message';
 
-  ### Props
-
-  ${(
-    <Props
-      heading=""
-      props={require('!!extract-react-types-loader!../src/extract-react-types/glyph')}
-    />
-  )}
+export default md`
+${(
+  <SectionMessage appearance="information">
+    This component is now documented on{' '}
+    <a href="https://atlassian.design/components/icon">atlassian.design</a>
+  </SectionMessage>
+)}
 `;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/icon",
-  "version": "21.10.1",
-  "description": "An icon is used as a visual representation of common actions and commands to provide context.",
+  "version": "21.10.4",
+  "description": "An icon is a visual representation of a command, device, directory, or common action.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -14,6 +14,7 @@
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
+  "homepage": "https://atlassian.design/components/icon/",
   "atlassian": {
     "team": "Design System Team",
     "releaseModel": "scheduled",
@@ -35,7 +36,7 @@
   },
   "dependencies": {
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.5.0",
+    "@atlaskit/tokens": "^0.7.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -44,12 +45,12 @@
   },
   "devDependencies": {
     "@af/icon-build-process": "^0.3.0",
-    "@atlaskit/button": "^16.1.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/dynamic-table": "^14.4.0",
+    "@atlaskit/dynamic-table": "^14.5.0",
     "@atlaskit/icon-file-type": "^6.3.0",
     "@atlaskit/icon-object": "^6.2.0",
-    "@atlaskit/icon-priority": "^6.2.0",
+    "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/logo": "^13.5.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/section-message": "^6.1.0",

package/docs/1-custom-icons.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { md, code, Props, Example } from '@atlaskit/docs';
-
-export default md`
-  Use the \`Icon\` component when needing an icon outside of our icon set _([do you, though?](https://hello.atlassian.net/wiki/spaces/DST/pages/782337741/Contribution+4.0+Contribution+documentation))_.
-
-  ${code`
-import Icon from '@atlaskit/icon/base';
-  `}
-
-  ${(
-    <Example
-      packageName="@atlaskit/icon"
-      Component={require('../examples/custom-icon').default}
-      title=""
-      source={require('!!raw-loader!../examples/custom-icon')}
-    />
-  )}
-
-  ## Constraints
-
-  Your custom icon needs to adhere to the following constraints.
-
-  - The root svg should be on a \`0 0 24 24\` view box
-  - The first child element should set \`fill\` to \`currentColor\` to inherit the \`primaryColor\` prop
-  - For icons with secondary colors set \`fill\` to \`inherit\` on the appropriate elements to inherit the \`secondaryColor\` prop
-
-  ${(
-    <Props
-      props={require('!!extract-react-types-loader!../src/components/icon')}
-    />
-  )}
-`;

package/docs/2-custom-svgs.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { md, Example, Props, code } from '@atlaskit/docs';
-
-export default md`
-  Use the \`SVG\` component when the wrapping positional span used in \`Icon\` is not required and needing an icon outside of our icon set _([do you, though?](https://hello.atlassian.net/wiki/spaces/DST/pages/782337741/Contribution+4.0+Contribution+documentation))_.
-
-  ${code`
-import SVG from '@atlaskit/icon/svg';
-  `}
-
-  ${(
-    <Example
-      packageName="@atlaskit/icon"
-      Component={require('../examples/14-svg').default}
-      title=""
-      source={require('!!raw-loader!../examples/14-svg')}
-    />
-  )}
-
-  ## Constraints
-
-  - \`SVG\` has a 24px by 24px view box which children should adhere to
-  - The first child element should set \`fill\` to \`currentColor\` to inherit the \`primaryColor\` prop
-  - For icons with secondary colors set \`fill\` to \`inherit\` on the appropriate elements to inherit the \`secondaryColor\` prop
-
-  ${(
-    <Props
-      props={require('!!extract-react-types-loader!../src/components/svg')}
-    />
-  )}
-  `;