@atlaskit/onboarding 10.6.11 → 10.7.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/onboarding
 
+## 10.7.0
+
+### Minor Changes
+
+- [`e3fa4437cf5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3fa4437cf5) - [ux] Updates focus appearance of components using buttons and custom buttons. These states now use an offset outline which is consistent with other applications of focus in Atlassian components.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.6.12
+
+### Patch Changes
+
+- [`261420360ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/261420360ec) - Upgrades component types to support React 18.
+- Updated dependencies
+
 ## 10.6.11
 
 ### Patch Changes

package/dist/cjs/components/spotlight-dialog.js

@@ -27,7 +27,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.6.11";
+var packageVersion = "10.7.0";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/cjs/components/theme.js

@@ -26,9 +26,6 @@ var spotlightTheme = {
       selected: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.R500, ")"),
       focus: "var(--ds-background-inverse-subtle, ".concat(colors.P400, ")")
     },
-    boxShadow: {
-      focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
-    },
     color: {
       default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
       hover: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
@@ -39,9 +36,6 @@ var spotlightTheme = {
       },
       selected: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
       focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
-    },
-    outline: {
-      focus: 'none'
     }
   },
   subtle: {
@@ -59,9 +53,6 @@ var spotlightTheme = {
         dark: "var(--ds-background-selected-hovered, ".concat(colors.DN0, ")")
       }
     },
-    boxShadow: {
-      focus: "0 0 0 2px ".concat("var(--ds-icon-discovery, ".concat(colors.P100, ")"))
-    },
     color: {
       default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
       hover: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
@@ -69,9 +60,6 @@ var spotlightTheme = {
       disabled: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
       selected: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
       focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
-    },
-    outline: {
-      focus: 'none'
     }
   },
   'subtle-link': {
@@ -81,9 +69,6 @@ var spotlightTheme = {
     textDecorationLine: {
       active: 'none'
     },
-    boxShadow: {
-      focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
-    },
     color: {
       default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
       hover: "var(--ds-text-inverse, ".concat(colors.P75, ")"),
@@ -107,12 +92,6 @@ var modalTheme = {
       selected: "var(--ds-background-selected-hovered, ".concat(colors.R500, ")"),
       focus: "var(--ds-background-discovery-bold-hovered, ".concat(colors.P400, ")")
     },
-    boxShadow: {
-      focus: {
-        light: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")")),
-        dark: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
-      }
-    },
     color: {
       default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
       disabled: {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.6.11",
+	"version": "10.7.0",
 	"sideEffects": false
 }

package/dist/es2019/components/spotlight-dialog.js

@@ -7,7 +7,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 const packageName = "@atlaskit/onboarding";
-const packageVersion = "10.6.11";
+const packageVersion = "10.7.0";
 class SpotlightDialog extends Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/components/theme.js

@@ -9,9 +9,6 @@ const spotlightTheme = {
       selected: `var(--ds-background-inverse-subtle-pressed, ${colors.R500})`,
       focus: `var(--ds-background-inverse-subtle, ${colors.P400})`
     },
-    boxShadow: {
-      focus: `0 0 0 2px ${`var(--ds-border-discovery, ${colors.P100})`}`
-    },
     color: {
       default: `var(--ds-text-inverse, ${colors.N0})`,
       hover: `var(--ds-text-inverse, ${colors.N0})`,
@@ -22,9 +19,6 @@ const spotlightTheme = {
       },
       selected: `var(--ds-text-inverse, ${colors.N0})`,
       focus: `var(--ds-text-inverse, ${colors.N0})`
-    },
-    outline: {
-      focus: 'none'
     }
   },
   subtle: {
@@ -42,9 +36,6 @@ const spotlightTheme = {
         dark: `var(--ds-background-selected-hovered, ${colors.DN0})`
       }
     },
-    boxShadow: {
-      focus: `0 0 0 2px ${`var(--ds-icon-discovery, ${colors.P100})`}`
-    },
     color: {
       default: `var(--ds-text-inverse, ${colors.N0})`,
       hover: `var(--ds-text-inverse, ${colors.N0})`,
@@ -52,9 +43,6 @@ const spotlightTheme = {
       disabled: `var(--ds-text-disabled, ${colors.N0})`,
       selected: `var(--ds-text-inverse, ${colors.N0})`,
       focus: `var(--ds-text-inverse, ${colors.N0})`
-    },
-    outline: {
-      focus: 'none'
     }
   },
   'subtle-link': {
@@ -64,9 +52,6 @@ const spotlightTheme = {
     textDecorationLine: {
       active: 'none'
     },
-    boxShadow: {
-      focus: `0 0 0 2px ${`var(--ds-border-discovery, ${colors.P100})`}`
-    },
     color: {
       default: `var(--ds-text-inverse, ${colors.N0})`,
       hover: `var(--ds-text-inverse, ${colors.P75})`,
@@ -90,12 +75,6 @@ const modalTheme = {
       selected: `var(--ds-background-selected-hovered, ${colors.R500})`,
       focus: `var(--ds-background-discovery-bold-hovered, ${colors.P400})`
     },
-    boxShadow: {
-      focus: {
-        light: `0 0 0 2px ${`var(--ds-border-discovery, ${colors.P100})`}`,
-        dark: `0 0 0 2px ${`var(--ds-border-discovery, ${colors.P100})`}`
-      }
-    },
     color: {
       default: `var(--ds-text-inverse, ${colors.N0})`,
       disabled: {

package/dist/es2019/styled/dialog.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 const imageStyles = css({
   maxWidth: '100%',

package/dist/es2019/styled/modal.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { borderRadius as getBorderRadius } from '@atlaskit/theme/constants';

package/dist/es2019/styled/target.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+
 import { css, jsx, keyframes } from '@emotion/react';
 import { P300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.6.11",
+	"version": "10.7.0",
 	"sideEffects": false
 }

package/dist/esm/components/spotlight-dialog.js

@@ -17,7 +17,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.6.11";
+var packageVersion = "10.7.0";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/esm/components/theme.js

@@ -16,9 +16,6 @@ var spotlightTheme = {
       selected: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.R500, ")"),
       focus: "var(--ds-background-inverse-subtle, ".concat(colors.P400, ")")
     },
-    boxShadow: {
-      focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
-    },
     color: {
       default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
       hover: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
@@ -29,9 +26,6 @@ var spotlightTheme = {
       },
       selected: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
       focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
-    },
-    outline: {
-      focus: 'none'
     }
   },
   subtle: {
@@ -49,9 +43,6 @@ var spotlightTheme = {
         dark: "var(--ds-background-selected-hovered, ".concat(colors.DN0, ")")
       }
     },
-    boxShadow: {
-      focus: "0 0 0 2px ".concat("var(--ds-icon-discovery, ".concat(colors.P100, ")"))
-    },
     color: {
       default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
       hover: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
@@ -59,9 +50,6 @@ var spotlightTheme = {
       disabled: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
       selected: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
       focus: "var(--ds-text-inverse, ".concat(colors.N0, ")")
-    },
-    outline: {
-      focus: 'none'
     }
   },
   'subtle-link': {
@@ -71,9 +59,6 @@ var spotlightTheme = {
     textDecorationLine: {
       active: 'none'
     },
-    boxShadow: {
-      focus: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
-    },
     color: {
       default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
       hover: "var(--ds-text-inverse, ".concat(colors.P75, ")"),
@@ -97,12 +82,6 @@ var modalTheme = {
       selected: "var(--ds-background-selected-hovered, ".concat(colors.R500, ")"),
       focus: "var(--ds-background-discovery-bold-hovered, ".concat(colors.P400, ")")
     },
-    boxShadow: {
-      focus: {
-        light: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")")),
-        dark: "0 0 0 2px ".concat("var(--ds-border-discovery, ".concat(colors.P100, ")"))
-      }
-    },
     color: {
       default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),
       disabled: {

package/dist/esm/styled/dialog.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["alt"];
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 var imageStyles = css({
   maxWidth: '100%',

package/dist/esm/styled/modal.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { borderRadius as getBorderRadius } from '@atlaskit/theme/constants';

package/dist/esm/styled/target.js

@@ -7,6 +7,7 @@ var _excluded = ["children", "bgColor", "radius", "style", "testId"],
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
+
 import { css, jsx, keyframes } from '@emotion/react';
 import { P300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.6.11",
+	"version": "10.7.0",
 	"sideEffects": false
 }

package/dist/types/styled/dialog.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { ReactNode } from 'react';
 /**
  * __Dialog image__
  *
@@ -14,7 +15,9 @@ export declare const DialogImage: React.FC<React.ImgHTMLAttributes<HTMLImageElem
  *
  * @internal
  */
-export declare const DialogActionItemContainer: React.FC<{}>;
+export declare const DialogActionItemContainer: React.FC<{
+    children: ReactNode;
+}>;
 /**
  * __Dialog action item__
  *
@@ -22,4 +25,6 @@ export declare const DialogActionItemContainer: React.FC<{}>;
  *
  * @internal
  */
-export declare const DialogActionItem: React.FC<{}>;
+export declare const DialogActionItem: React.FC<{
+    children: ReactNode;
+}>;

package/dist/types/styled/modal.d.ts

@@ -1,16 +1,21 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { ReactNode } from 'react';
 /**
  * __Modal body__
  *
  * @internal
  */
-export declare const ModalBody: React.FC<{}>;
+export declare const ModalBody: React.FC<{
+    children: ReactNode;
+}>;
 /**
  * __Modal heading__
  *
  * @internal
  */
-export declare const ModalHeading: React.FC<{}>;
+export declare const ModalHeading: React.FC<{
+    children: string;
+}>;
 /**
  * __Modal image__
  *
@@ -27,10 +32,13 @@ export declare const ModalImage: React.FC<{
  */
 export declare const ModalActionContainer: React.FC<{
     shouldReverseButtonOrder: boolean;
+    children: ReactNode;
 }>;
 /**
  * __Modal action item__
  *
  * @internal
  */
-export declare const ModalActionItem: React.FC<{}>;
+export declare const ModalActionItem: React.FC<{
+    children: ReactNode;
+}>;

package/dist/types/styled/target.d.ts

@@ -1,9 +1,11 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { ReactNode } from 'react';
 declare type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
     bgColor?: string;
     radius?: number;
     className?: string;
     testId?: string;
+    children?: ReactNode;
 };
 declare type TargetProps = Omit<BaseProps, 'css'> & {
     pulse?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "10.6.11",
+  "version": "10.7.0",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -16,7 +16,6 @@
   "atlaskit:src": "src/index.tsx",
   "homepage": "https://atlassian.design/components/onboarding/",
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
@@ -27,13 +26,13 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.0.0",
-    "@atlaskit/button": "^16.5.0",
+    "@atlaskit/button": "^16.6.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/heading": "^1.1.0",
+    "@atlaskit/heading": "^1.2.0",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/popper": "^5.4.0",
     "@atlaskit/portal": "^4.0.0",
-    "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/theme": "^12.3.0",
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -51,7 +50,7 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/avatar": "^21.1.0",
+    "@atlaskit/avatar": "^21.2.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/progress-indicator": "^9.4.0",

package/report.api.md

@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -272,3 +273,16 @@ export function useSpotlight(): {
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0",
+  "react-dom": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->