@sproutsocial/racine 8.6.1 → 8.6.2

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 (8) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/__flow__/Collapsible/index.js +1 -0
  3. package/__flow__/Collapsible/styles.js +23 -24
  4. package/commonjs/Collapsible/index.js +1 -0
  5. package/commonjs/Collapsible/styles.js +5 -7
  6. package/lib/Collapsible/index.js +1 -0
  7. package/lib/Collapsible/styles.js +5 -7
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Change Log
2
2
 
3
+ ## 8.6.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 039da3f: Address visual bug on collapsible shadow
8
+
3
9
  ## 8.6.1
4
10
 
5
11
  ### Patch Changes
package/__flow__/Collapsible/index.js CHANGED
@@ -103,6 +103,7 @@ const Panel = ({ children, ...rest }) => {
103
103
 
104
104
  return (
105
105
  <CollapsingBox
106
+ hasShadow={collapsedHeight || openHeight > 0}
106
107
  scrollable={isOpen}
107
108
  maxHeight={isOpen ? maxHeight : collapsedHeight}
108
109
  minHeight={collapsedHeight}
package/__flow__/Collapsible/styles.js CHANGED
@@ -10,29 +10,28 @@ export const CollapsingBox = styled<typeof Box, TypeTheme, *>(Box)`
10
10
  will-change: max-height;
11
11
  position: relative;
12
12
  overflow: auto;
13
- background: /* Shadow covers */ linear-gradient(
14
- ${(p) => p.theme.colors.neutral[100]} 30%,
15
- rgba(255, 255, 255, 0)
16
- ),
17
- linear-gradient(
18
- rgba(255, 255, 255, 0),
19
- ${(p) => p.theme.colors.neutral[100]} 70%
20
- )
21
- 0 100%,
22
- /* Shadows */
23
- radial-gradient(
24
- farthest-side at 50% 0,
25
- rgb(39 51 51 / 5%),
26
- rgba(0, 0, 0, 0)
13
+ ${({ hasShadow, theme, scrollable }) =>
14
+ hasShadow
15
+ ? `background: /* Shadow covers */ linear-gradient(
16
+ transparent 30%,
17
+ rgba(255, 255, 255, 0)
27
18
  ),
28
- radial-gradient(
29
- farthest-side at 50% 100%,
30
- rgb(39 51 51 / 5%),
31
- rgba(0, 0, 0, 0)
32
- )
33
- 0 100%;
34
- background-repeat: no-repeat;
35
- background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
36
- background-attachment: local, local, scroll, scroll;
37
- ${({ scrollable }) => (scrollable ? `overflow: auto` : `overflow: hidden`)};
19
+ linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,
20
+ /* Shadows */
21
+ radial-gradient(
22
+ farthest-side at 50% 0,
23
+ rgb(39 51 51 / 5%),
24
+ rgba(0, 0, 0, 0)
25
+ ),
26
+ radial-gradient(
27
+ farthest-side at 50% 100%,
28
+ rgb(39 51 51 / 5%),
29
+ rgba(0, 0, 0, 0)
30
+ )
31
+ 0 100%;
32
+ background-repeat: no-repeat;
33
+ background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
34
+ background-attachment: local, local, scroll, scroll;
35
+ ${scrollable ? `overflow: auto` : `overflow: hidden`};`
36
+ : ""}
38
37
  `;
package/commonjs/Collapsible/index.js CHANGED
@@ -118,6 +118,7 @@ var Panel = function Panel(_ref3) {
118
118
  }
119
119
  }, [isOpen]);
120
120
  return /*#__PURE__*/React.createElement(_styles.CollapsingBox, _extends({
121
+ hasShadow: collapsedHeight || openHeight > 0,
121
122
  scrollable: isOpen,
122
123
  maxHeight: isOpen ? maxHeight : collapsedHeight,
123
124
  minHeight: collapsedHeight,
package/commonjs/Collapsible/styles.js CHANGED
@@ -12,16 +12,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
12
12
  var CollapsingBox = (0, _styledComponents.default)(_Box.default).withConfig({
13
13
  displayName: "styles__CollapsingBox",
14
14
  componentId: "sc-1xvfbl7-0"
15
- })(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;background:linear-gradient( ", " 30%,rgba(255,255,255,0) ),linear-gradient( rgba(255,255,255,0),", " 70% ) 0 100%,radial-gradient( farthest-side at 50% 0,rgb(39 51 51 / 5%),rgba(0,0,0,0) ),radial-gradient( farthest-side at 50% 100%,rgb(39 51 51 / 5%),rgba(0,0,0,0) ) 0 100%;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 14px,100% 14px;background-attachment:local,local,scroll,scroll;", ";"], function (p) {
15
+ })(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;", ""], function (p) {
16
16
  return p.theme.duration.medium;
17
17
  }, function (p) {
18
18
  return p.theme.easing.ease_inout;
19
- }, function (p) {
20
- return p.theme.colors.neutral[100];
21
- }, function (p) {
22
- return p.theme.colors.neutral[100];
23
19
  }, function (_ref) {
24
- var scrollable = _ref.scrollable;
25
- return scrollable ? "overflow: auto" : "overflow: hidden";
20
+ var hasShadow = _ref.hasShadow,
21
+ theme = _ref.theme,
22
+ scrollable = _ref.scrollable;
23
+ return hasShadow ? "background: /* Shadow covers */ linear-gradient(\n transparent 30%,\n rgba(255, 255, 255, 0)\n ),\n linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,\n /* Shadows */\n radial-gradient(\n farthest-side at 50% 0,\n rgb(39 51 51 / 5%),\n rgba(0, 0, 0, 0)\n ),\n radial-gradient(\n farthest-side at 50% 100%,\n rgb(39 51 51 / 5%),\n rgba(0, 0, 0, 0)\n )\n 0 100%;\n background-repeat: no-repeat;\n background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;\n background-attachment: local, local, scroll, scroll;\n " + (scrollable ? "overflow: auto" : "overflow: hidden") + ";" : "";
26
24
  });
27
25
  exports.CollapsingBox = CollapsingBox;
package/lib/Collapsible/index.js CHANGED
@@ -104,6 +104,7 @@ var Panel = function Panel(_ref3) {
104
104
  }
105
105
  }, [isOpen]);
106
106
  return /*#__PURE__*/React.createElement(CollapsingBox, _extends({
107
+ hasShadow: collapsedHeight || openHeight > 0,
107
108
  scrollable: isOpen,
108
109
  maxHeight: isOpen ? maxHeight : collapsedHeight,
109
110
  minHeight: collapsedHeight,
package/lib/Collapsible/styles.js CHANGED
@@ -3,15 +3,13 @@ import Box from "../Box";
3
3
  export var CollapsingBox = styled(Box).withConfig({
4
4
  displayName: "styles__CollapsingBox",
5
5
  componentId: "sc-1xvfbl7-0"
6
- })(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;background:linear-gradient( ", " 30%,rgba(255,255,255,0) ),linear-gradient( rgba(255,255,255,0),", " 70% ) 0 100%,radial-gradient( farthest-side at 50% 0,rgb(39 51 51 / 5%),rgba(0,0,0,0) ),radial-gradient( farthest-side at 50% 100%,rgb(39 51 51 / 5%),rgba(0,0,0,0) ) 0 100%;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 14px,100% 14px;background-attachment:local,local,scroll,scroll;", ";"], function (p) {
6
+ })(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;", ""], function (p) {
7
7
  return p.theme.duration.medium;
8
8
  }, function (p) {
9
9
  return p.theme.easing.ease_inout;
10
- }, function (p) {
11
- return p.theme.colors.neutral[100];
12
- }, function (p) {
13
- return p.theme.colors.neutral[100];
14
10
  }, function (_ref) {
15
- var scrollable = _ref.scrollable;
16
- return scrollable ? "overflow: auto" : "overflow: hidden";
11
+ var hasShadow = _ref.hasShadow,
12
+ theme = _ref.theme,
13
+ scrollable = _ref.scrollable;
14
+ return hasShadow ? "background: /* Shadow covers */ linear-gradient(\n transparent 30%,\n rgba(255, 255, 255, 0)\n ),\n linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,\n /* Shadows */\n radial-gradient(\n farthest-side at 50% 0,\n rgb(39 51 51 / 5%),\n rgba(0, 0, 0, 0)\n ),\n radial-gradient(\n farthest-side at 50% 100%,\n rgb(39 51 51 / 5%),\n rgba(0, 0, 0, 0)\n )\n 0 100%;\n background-repeat: no-repeat;\n background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;\n background-attachment: local, local, scroll, scroll;\n " + (scrollable ? "overflow: auto" : "overflow: hidden") + ";" : "";
17
15
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/racine",
3
- "version": "8.6.1",
3
+ "version": "8.6.2",
4
4
  "license": "MIT",
5
5
  "files": [
6
6
  "__flow__",