@atlaskit/panel 0.9.3 → 0.9.5

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 +12 -0
  2. package/dist/cjs/components/Panel/styledPanel.js +4 -4
  3. package/dist/es2019/components/Panel/styledPanel.js +4 -4
  4. package/dist/esm/components/Panel/styledPanel.js +5 -5
  5. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/panel
2
2
 
3
+ ## 0.9.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [`42f281b48b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/42f281b48b8) - Update hover state style to support dark theme.
8
+
9
+ ## 0.9.4
10
+
11
+ ### Patch Changes
12
+
13
+ - [`6900f89eb0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6900f89eb0e) - Internal changes to use space tokens. There is no expected visual or behaviour change.
14
+
3
15
  ## 0.9.3
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/components/Panel/styledPanel.js CHANGED
@@ -22,9 +22,9 @@ var ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_template
22
22
  return isHidden ? 0 : 1;
23
23
  }, transition);
24
24
  exports.ButtonWrapper = ButtonWrapper;
25
- var PanelHeader = (0, _reactFocusWithin.withFocusWithin)(_styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n display: flex;\n left: -", "px;\n margin-bottom: ", ";\n margin-top: ", ";\n padding: ", " ", "\n ", " ", ";\n position: relative;\n ", ";\n width: 100%;\n\n ", " {\n opacity: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n\n ", " {\n opacity: 1;\n }\n }\n"])), function (props) {
26
- return props.isFocused && _theme.colors.N20;
27
- }, "var(--ds-border-radius-100, 3px)", (0, _theme.gridSize)() * 3, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-025, 2px)", "var(--ds-space-300, 24px)", transition, ButtonWrapper, function (props) {
25
+ var PanelHeader = (0, _reactFocusWithin.withFocusWithin)(_styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n display: flex;\n left: ", ";\n margin-bottom: ", ";\n margin-top: ", ";\n padding: ", " ", "\n ", " ", ";\n position: relative;\n ", ";\n width: 100%;\n\n ", " {\n opacity: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n\n ", " {\n opacity: 1;\n }\n }\n"])), function (props) {
26
+ return props.isFocused && "var(--ds-surface-hovered, ".concat(_theme.colors.N20, ")");
27
+ }, "var(--ds-border-radius-100, 3px)", "var(--ds-space-negative-300, -24px)", "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-025, 2px)", "var(--ds-space-300, 24px)", transition, ButtonWrapper, function (props) {
28
28
  return props.isFocused && 1;
29
- }, _theme.colors.N20, ButtonWrapper));
29
+ }, "var(--ds-surface-hovered, ".concat(_theme.colors.N20, ")"), ButtonWrapper));
30
30
  exports.PanelHeader = PanelHeader;
package/dist/es2019/components/Panel/styledPanel.js CHANGED
@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
3
3
 
4
4
  // AFP-2532 TODO: Fix automatic suppressions below
5
5
  // eslint-disable-next-line @atlassian/tangerine/import/entry-points
6
- import { colors, gridSize } from '@atlaskit/theme';
6
+ import { colors } from '@atlaskit/theme';
7
7
  const transition = css`
8
8
  transition: all 200ms ease-in-out;
9
9
  `;
@@ -31,10 +31,10 @@ export const ButtonWrapper = styled.div`
31
31
  `;
32
32
  export const PanelHeader = withFocusWithin(styled.div`
33
33
  align-items: center;
34
- background-color: ${props => props.isFocused && colors.N20};
34
+ background-color: ${props => props.isFocused && `var(--ds-surface-hovered, ${colors.N20})`};
35
35
  border-radius: ${"var(--ds-border-radius-100, 3px)"};
36
36
  display: flex;
37
- left: -${gridSize() * 3}px;
37
+ left: ${"var(--ds-space-negative-300, -24px)"};
38
38
  margin-bottom: ${"var(--ds-space-100, 8px)"};
39
39
  margin-top: ${"var(--ds-space-200, 16px)"};
40
40
  padding: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-0, 0px)"}
@@ -48,7 +48,7 @@ export const PanelHeader = withFocusWithin(styled.div`
48
48
  }
49
49
 
50
50
  &:hover {
51
- background-color: ${colors.N20};
51
+ background-color: ${`var(--ds-surface-hovered, ${colors.N20})`};
52
52
  cursor: pointer;
53
53
 
54
54
  ${ButtonWrapper} {
package/dist/esm/components/Panel/styledPanel.js CHANGED
@@ -5,15 +5,15 @@ import styled, { css } from 'styled-components';
5
5
 
6
6
  // AFP-2532 TODO: Fix automatic suppressions below
7
7
  // eslint-disable-next-line @atlassian/tangerine/import/entry-points
8
- import { colors, gridSize } from '@atlaskit/theme';
8
+ import { colors } from '@atlaskit/theme';
9
9
  var transition = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n transition: all 200ms ease-in-out;\n"])));
10
10
  export var PanelWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin: 0 auto ", ";\n"])), "var(--ds-space-200, 16px)");
11
11
  export var ButtonWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n left: 0;\n line-height: 0;\n opacity: ", ";\n position: absolute;\n ", ";\n\n /* IE 11 needs these vertical positioning rules - the flexbox\n behavior for absolute-positioned children is not up to spec.\n https://googlechrome.github.io/samples/css-flexbox-abspos/ */\n top: 50%;\n transform: translateY(-50%);\n\n button {\n pointer-events: none;\n }\n"])), function (_ref) {
12
12
  var isHidden = _ref.isHidden;
13
13
  return isHidden ? 0 : 1;
14
14
  }, transition);
15
- export var PanelHeader = withFocusWithin(styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n display: flex;\n left: -", "px;\n margin-bottom: ", ";\n margin-top: ", ";\n padding: ", " ", "\n ", " ", ";\n position: relative;\n ", ";\n width: 100%;\n\n ", " {\n opacity: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n\n ", " {\n opacity: 1;\n }\n }\n"])), function (props) {
16
- return props.isFocused && colors.N20;
17
- }, "var(--ds-border-radius-100, 3px)", gridSize() * 3, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-025, 2px)", "var(--ds-space-300, 24px)", transition, ButtonWrapper, function (props) {
15
+ export var PanelHeader = withFocusWithin(styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n display: flex;\n left: ", ";\n margin-bottom: ", ";\n margin-top: ", ";\n padding: ", " ", "\n ", " ", ";\n position: relative;\n ", ";\n width: 100%;\n\n ", " {\n opacity: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n\n ", " {\n opacity: 1;\n }\n }\n"])), function (props) {
16
+ return props.isFocused && "var(--ds-surface-hovered, ".concat(colors.N20, ")");
17
+ }, "var(--ds-border-radius-100, 3px)", "var(--ds-space-negative-300, -24px)", "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-025, 2px)", "var(--ds-space-300, 24px)", transition, ButtonWrapper, function (props) {
18
18
  return props.isFocused && 1;
19
- }, colors.N20, ButtonWrapper));
19
+ }, "var(--ds-surface-hovered, ".concat(colors.N20, ")"), ButtonWrapper));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/panel",
3
- "version": "0.9.3",
3
+ "version": "0.9.5",
4
4
  "description": "A React component rendering a collapsible panel",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -30,10 +30,10 @@
30
30
  }
31
31
  },
32
32
  "dependencies": {
33
- "@atlaskit/button": "^16.9.0",
33
+ "@atlaskit/button": "^16.10.0",
34
34
  "@atlaskit/icon": "^21.12.0",
35
- "@atlaskit/theme": "^12.5.0",
36
- "@atlaskit/tokens": "^1.15.0",
35
+ "@atlaskit/theme": "^12.6.0",
36
+ "@atlaskit/tokens": "^1.22.0",
37
37
  "@babel/runtime": "^7.0.0",
38
38
  "react-animate-height": "^2.0.5",
39
39
  "react-focus-within": "^2.0.1",