@atlaskit/spotlight 0.2.6 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/spotlight
 
+## 0.3.0
+
+### Minor Changes
+
+- [`7e3c08df816e2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7e3c08df816e2) - -
+  Apply `z-index: 700` to caret to fix a bug with box-shadow in dark mode.
+  - Apply `color: var(--ds-color-text-inverse)` to `SpotlightCard` so consumers get inverse color
+    styles without needing to use `Text`.
+  - Remove `SpotlightShowMoreControl` references in examples and documentation. Functionality
+    remains unchanged.
+
 ## 0.2.6
 
 ### Patch Changes
@@ -61,7 +72,7 @@
 ### Patch Changes
 
 - [`6fa400e1910b7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6fa400e1910b7) -
-  Styling update to `PopoverContent` to set `z-index: 800` to ensure `Spotlight` displays correctly
+  Styling update to `PopoverContent` to set `z-index: 700` to ensure `Spotlight` displays correctly
   on top of Atlassian layering elements.
 - Updated dependencies
 

package/constellation/index/examples.mdx

@@ -53,22 +53,4 @@ Media can be an image, video, animation, or any other visual aid to communicate
 ## Controls
 
 `SpotlightDismissControl` is required for all `SpotlightCard` components. It **must** be the first
-focusable element on the `SpotlightCard` card. This means that when defining the controls,
-`SpotlightDismissControl` should appear first in the DOM order:
-
-```tsx
-<SpotlighControls>
-	<SpotlightDismissControl />
-	<SpotlightShowMoreControl />
-</SpotlighControls>
-```
-
-Internally, `SpotlighControls` applies `flex-direction: row-reverse;` so that
-`SpotlightDismissControl` visually displays after `SpotlightShowMoreControl` while maintaining
-correct tabbing order.
-
-`SpotlightShowMoreControl` is optional for `SpotlightCard` components. It should be used to allow
-users to opt out of a spotlight experience, or understand why they are seeing the spotlight
-experience.
-
-<Example Component={ControlsExample} packageName="@atlaskit/spinner" />
+focusable element on the `SpotlightCard` card to provide an accessible experience.

package/dist/cjs/ui/body/index.compiled.css

@@ -1,2 +1,3 @@
 ._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
-._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}

package/dist/cjs/ui/body/index.js

@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _compiled = require("@atlaskit/primitives/compiled");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
-  root: "_18zrpxbi _1q51u2gc"
+  root: "_18zrpxbi _syaz15cr _1q51u2gc"
 };
 /**
  * __SpotlightBody__

package/dist/cjs/ui/card/caret/index.compiled.css

@@ -1,8 +1,10 @@
-._13lit94y{border-top-left-radius:1px}
 ._1bsbo7ao{width:15px}
-._1o0zt94y{border-bottom-right-radius:1px}
+._1eint94y{border-end-end-radius:1px}
+._1pby1fw0{z-index:700}
+._1s1gt94y{border-start-start-radius:1px}
+._1yxnt94y{border-end-start-radius:1px}
 ._4t3io7ao{height:15px}
+._5fbct94y{border-start-end-radius:1px}
 ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
-._mrkbt94y{border-bottom-left-radius:1px}
-._qrwqt94y{border-top-right-radius:1px}
+._kqswh2mm{position:relative}
 ._t9ecjyd4{transform:rotate(45deg)}

package/dist/cjs/ui/card/caret/index.js

@@ -13,15 +13,15 @@ var _runtime = require("@compiled/react/runtime");
 var _context = require("../../../controllers/context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
-  root: "_1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
-  'top-start': "_1o0zt94y",
-  'top-end': "_1o0zt94y",
-  'bottom-start': "_13lit94y",
-  'bottom-end': "_13lit94y",
-  'right-start': "_mrkbt94y",
-  'right-end': "_mrkbt94y",
-  'left-start': "_qrwqt94y",
-  'left-end': "_qrwqt94y"
+  root: "_kqswh2mm _1pby1fw0 _1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
+  'top-start': "_1eint94y",
+  'top-end': "_1eint94y",
+  'bottom-start': "_1s1gt94y",
+  'bottom-end': "_1s1gt94y",
+  'right-start': "_1yxnt94y",
+  'right-end': "_1yxnt94y",
+  'left-start': "_5fbct94y",
+  'left-end': "_5fbct94y"
 };
 /**
  * __Caret__

package/dist/es2019/ui/body/index.compiled.css

@@ -1,2 +1,3 @@
 ._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
-._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}

package/dist/es2019/ui/body/index.js

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { Box } from '@atlaskit/primitives/compiled';
 const styles = {
-  root: "_18zrpxbi _1q51u2gc"
+  root: "_18zrpxbi _syaz15cr _1q51u2gc"
 };
 /**
  * __SpotlightBody__

package/dist/es2019/ui/card/caret/index.compiled.css

@@ -1,8 +1,10 @@
-._13lit94y{border-top-left-radius:1px}
 ._1bsbo7ao{width:15px}
-._1o0zt94y{border-bottom-right-radius:1px}
+._1eint94y{border-end-end-radius:1px}
+._1pby1fw0{z-index:700}
+._1s1gt94y{border-start-start-radius:1px}
+._1yxnt94y{border-end-start-radius:1px}
 ._4t3io7ao{height:15px}
+._5fbct94y{border-start-end-radius:1px}
 ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
-._mrkbt94y{border-bottom-left-radius:1px}
-._qrwqt94y{border-top-right-radius:1px}
+._kqswh2mm{position:relative}
 ._t9ecjyd4{transform:rotate(45deg)}

package/dist/es2019/ui/card/caret/index.js

@@ -5,15 +5,15 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useContext } from 'react';
 import { SpotlightContext } from '../../../controllers/context';
 const styles = {
-  root: "_1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
-  'top-start': "_1o0zt94y",
-  'top-end': "_1o0zt94y",
-  'bottom-start': "_13lit94y",
-  'bottom-end': "_13lit94y",
-  'right-start': "_mrkbt94y",
-  'right-end': "_mrkbt94y",
-  'left-start': "_qrwqt94y",
-  'left-end': "_qrwqt94y"
+  root: "_kqswh2mm _1pby1fw0 _1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
+  'top-start': "_1eint94y",
+  'top-end': "_1eint94y",
+  'bottom-start': "_1s1gt94y",
+  'bottom-end': "_1s1gt94y",
+  'right-start': "_1yxnt94y",
+  'right-end': "_1yxnt94y",
+  'left-start': "_5fbct94y",
+  'left-end': "_5fbct94y"
 };
 /**
  * __Caret__

package/dist/esm/ui/body/index.compiled.css

@@ -1,2 +1,3 @@
 ._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
-._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}

package/dist/esm/ui/body/index.js

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { Box } from '@atlaskit/primitives/compiled';
 var styles = {
-  root: "_18zrpxbi _1q51u2gc"
+  root: "_18zrpxbi _syaz15cr _1q51u2gc"
 };
 /**
  * __SpotlightBody__

package/dist/esm/ui/card/caret/index.compiled.css

@@ -1,8 +1,10 @@
-._13lit94y{border-top-left-radius:1px}
 ._1bsbo7ao{width:15px}
-._1o0zt94y{border-bottom-right-radius:1px}
+._1eint94y{border-end-end-radius:1px}
+._1pby1fw0{z-index:700}
+._1s1gt94y{border-start-start-radius:1px}
+._1yxnt94y{border-end-start-radius:1px}
 ._4t3io7ao{height:15px}
+._5fbct94y{border-start-end-radius:1px}
 ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
-._mrkbt94y{border-bottom-left-radius:1px}
-._qrwqt94y{border-top-right-radius:1px}
+._kqswh2mm{position:relative}
 ._t9ecjyd4{transform:rotate(45deg)}

package/dist/esm/ui/card/caret/index.js

@@ -5,15 +5,15 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useContext } from 'react';
 import { SpotlightContext } from '../../../controllers/context';
 var styles = {
-  root: "_1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
-  'top-start': "_1o0zt94y",
-  'top-end': "_1o0zt94y",
-  'bottom-start': "_13lit94y",
-  'bottom-end': "_13lit94y",
-  'right-start': "_mrkbt94y",
-  'right-end': "_mrkbt94y",
-  'left-start': "_qrwqt94y",
-  'left-end': "_qrwqt94y"
+  root: "_kqswh2mm _1pby1fw0 _1bsbo7ao _4t3io7ao _t9ecjyd4 _bfhkcdhy",
+  'top-start': "_1eint94y",
+  'top-end': "_1eint94y",
+  'bottom-start': "_1s1gt94y",
+  'bottom-end': "_1s1gt94y",
+  'right-start': "_1yxnt94y",
+  'right-end': "_1yxnt94y",
+  'left-start': "_5fbct94y",
+  'left-end': "_5fbct94y"
 };
 /**
  * __Caret__

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.2.6",
+	"version": "0.3.0",
 	"description": "A spotlight introduces users to various points of interest across Atlassian through focused messages or multi-step tours.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",