@atlaskit/panel 0.9.2 → 0.9.4

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/panel
2
2
 
3
+ ## 0.9.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [`6900f89eb0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6900f89eb0e) - Internal changes to use space tokens. There is no expected visual or behaviour change.
8
+
9
+ ## 0.9.3
10
+
11
+ ### Patch Changes
12
+
13
+ - [`fd6bb9c9184`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd6bb9c9184) - Delete version.json
14
+ - Updated dependencies
15
+
3
16
  ## 0.9.2
4
17
 
5
18
  ### Patch Changes
@@ -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) {
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
26
  return props.isFocused && _theme.colors.N20;
27
- }, "var(--ds-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) {
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
29
  }, _theme.colors.N20, ButtonWrapper));
30
30
  exports.PanelHeader = PanelHeader;
@@ -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
  `;
@@ -32,9 +32,9 @@ export const ButtonWrapper = styled.div`
32
32
  export const PanelHeader = withFocusWithin(styled.div`
33
33
  align-items: center;
34
34
  background-color: ${props => props.isFocused && colors.N20};
35
- border-radius: ${"var(--ds-radius-100, 3px)"};
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)"}
@@ -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) {
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
16
  return props.isFocused && colors.N20;
17
- }, "var(--ds-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) {
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
19
  }, colors.N20, ButtonWrapper));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/panel",
3
- "version": "0.9.2",
3
+ "version": "0.9.4",
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.7.0",
33
+ "@atlaskit/button": "^16.10.0",
34
34
  "@atlaskit/icon": "^21.12.0",
35
- "@atlaskit/theme": "^12.5.0",
36
- "@atlaskit/tokens": "^1.4.0",
35
+ "@atlaskit/theme": "^12.6.0",
36
+ "@atlaskit/tokens": "^1.21.0",
37
37
  "@babel/runtime": "^7.0.0",
38
38
  "react-animate-height": "^2.0.5",
39
39
  "react-focus-within": "^2.0.1",
@@ -44,8 +44,6 @@
44
44
  "styled-components": "^3.2.6"
45
45
  },
46
46
  "devDependencies": {
47
- "@atlaskit/docs": "*",
48
- "@atlaskit/page": "^12.3.0",
49
47
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
50
48
  "@testing-library/react": "^12.1.5",
51
49
  "@testing-library/user-event": "^14.4.3",
@@ -1,4 +0,0 @@
1
- {
2
- "name": "@atlaskit/panel",
3
- "version": "0.9.2"
4
- }
@@ -1,4 +0,0 @@
1
- {
2
- "name": "@atlaskit/panel",
3
- "version": "0.9.2"
4
- }
@@ -1,4 +0,0 @@
1
- {
2
- "name": "@atlaskit/panel",
3
- "version": "0.9.2"
4
- }