@spaced-out/ui-design-system 0.1.40 → 0.1.42

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.42](https://github.com/spaced-out/ui-design-system/compare/v0.1.41...v0.1.42) (2023-08-04)
+
+
+### Features
+
+* panel background interactivity and background for panel body ([#131](https://github.com/spaced-out/ui-design-system/issues/131)) ([223e692](https://github.com/spaced-out/ui-design-system/commit/223e6928d977cb326ac973fe9103415eeb86300a))
+
+### [0.1.41](https://github.com/spaced-out/ui-design-system/compare/v0.1.40...v0.1.41) (2023-08-02)
+
+
+### Bug Fixes
+
+* card padding fixes ([6cd15dc](https://github.com/spaced-out/ui-design-system/commit/6cd15dc489d790c450d1e146d17a0ecd4ce69411))
+
 ### [0.1.40](https://github.com/spaced-out/ui-design-system/compare/v0.1.39...v0.1.40) (2023-08-02)
 
 

package/lib/components/Card/Card.module.css

@@ -36,7 +36,8 @@
   min-height: size58;
   composes: subTitleSmall from '../../styles/typography.module.css';
   composes: borderBottomPrimary from '../../styles/border.module.css';
-  padding: spaceSmall spaceXSmall spaceSmall spaceSmall;
+  padding: spaceSmall var(--card-padding-right) spaceSmall
+    var(--card-padding-left);
   gap: spaceXSmall;
 }
 
@@ -48,7 +49,8 @@
   min-height: size58;
   composes: subTitleSmall from '../../styles/typography.module.css';
   composes: borderTopPrimary from '../../styles/border.module.css';
-  padding: spaceSmall spaceXSmall spaceSmall spaceSmall;
+  padding: spaceSmall var(--card-padding-right) spaceSmall
+    var(--card-padding-left);
   gap: spaceXSmall;
   margin-top: auto;
 }

package/lib/components/Card/index.js

@@ -3,16 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Card", {
-  enumerable: true,
-  get: function () {
-    return _Card.Card;
-  }
-});
-Object.defineProperty(exports, "ClickableCard", {
-  enumerable: true,
-  get: function () {
-    return _Card.ClickableCard;
-  }
-});
-var _Card = require("./Card");
+var _Card = require("./Card");
+Object.keys(_Card).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Card[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Card[key];
+    }
+  });
+});

package/lib/components/Card/index.js.flow

@@ -1,4 +1,3 @@
 // @flow strict
 
-export type {CardProps} from './Card';
-export {Card, ClickableCard} from './Card';
+export * from './Card';

package/lib/components/Modal/Modal.js

@@ -121,6 +121,7 @@ const Modal = _ref4 => {
     tapOutsideToClose = true,
     initialFocus = -1,
     customAnimation,
+    allowBackgroundInteraction = false,
     // Size is not set to default for backward compatibility. Don't change if you don't know this.
     size
   } = _ref4;
@@ -209,7 +210,7 @@ const Modal = _ref4 => {
       [_ModalModule.default.in]: isTransitioning,
       [_ModalModule.default.open]: isOpen
     }, classNames?.container)
-  }, /*#__PURE__*/React.createElement("div", {
+  }, !allowBackgroundInteraction && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ModalModule.default.backdrop, {
       [_ModalModule.default.darkBackdrop]: !hideBackdrop
     }, classNames?.backdrop),

package/lib/components/Modal/Modal.js.flow

@@ -52,6 +52,7 @@ export type ModalProps = {
   onClose?: ?(SyntheticEvent<HTMLElement>) => mixed,
   hideBackdrop?: boolean,
   tapOutsideToClose?: boolean,
+  allowBackgroundInteraction?: boolean,
   initialFocus?: number,
   customAnimation?: UseTransitionStylesProps,
 };
@@ -194,6 +195,7 @@ export const Modal = ({
   tapOutsideToClose = true,
   initialFocus = -1,
   customAnimation,
+  allowBackgroundInteraction = false,
   // Size is not set to default for backward compatibility. Don't change if you don't know this.
   size,
 }: BaseModalProps): React.Node => {
@@ -296,16 +298,19 @@ export const Modal = ({
           classNames?.container,
         )}
       >
-        <div
-          className={classify(
-            css.backdrop,
-            {
-              [css.darkBackdrop]: !hideBackdrop,
-            },
-            classNames?.backdrop,
-          )}
-          onClick={onBackdropClick}
-        />
+        {!allowBackgroundInteraction && (
+          <div
+            className={classify(
+              css.backdrop,
+              {
+                [css.darkBackdrop]: !hideBackdrop,
+              },
+              classNames?.backdrop,
+            )}
+            onClick={onBackdropClick}
+          />
+        )}
+
         {isMounted && (
           <div
             className={classify(

package/lib/components/Panel/Panel.js

@@ -86,6 +86,8 @@ const Panel = _ref4 => {
     hideBackdrop = true,
     classNames,
     customAnimation,
+    tapOutsideToClose = true,
+    allowBackgroundInteraction,
     ...restPanelProps
   } = _ref4;
   const isTransitioning = (0, _useMountTransition.default)(isOpen, parseInt(_motion.motionDurationNormal));
@@ -93,7 +95,9 @@ const Panel = _ref4 => {
   return /*#__PURE__*/React.createElement(_Modal.Modal, _extends({
     isOpen: isOpen,
     onClose: onClose,
-    hideBackdrop: hideBackdrop
+    hideBackdrop: hideBackdrop,
+    tapOutsideToClose: allowBackgroundInteraction ? false : tapOutsideToClose,
+    allowBackgroundInteraction: allowBackgroundInteraction
   }, restPanelProps, {
     classNames: {
       container: (0, _classify.default)(_PanelModule.default.panelContainer, {

package/lib/components/Panel/Panel.js.flow

@@ -49,6 +49,7 @@ export type PanelBodyProps = {
 
 export type PanelProps = {
   ...ModalProps,
+  allowBackgroundInteraction?: boolean,
   size?: PanelSize,
   anchor?: PanelAnchor,
 };
@@ -128,6 +129,8 @@ export const Panel = ({
   hideBackdrop = true,
   classNames,
   customAnimation,
+  tapOutsideToClose = true,
+  allowBackgroundInteraction,
   ...restPanelProps
 }: PanelProps): React.Node => {
   const isTransitioning = useMountTransition(
@@ -142,6 +145,8 @@ export const Panel = ({
       isOpen={isOpen}
       onClose={onClose}
       hideBackdrop={hideBackdrop}
+      tapOutsideToClose={allowBackgroundInteraction ? false : tapOutsideToClose}
+      allowBackgroundInteraction={allowBackgroundInteraction}
       {...restPanelProps}
       classNames={{
         container: classify(

package/lib/components/Panel/Panel.module.css

@@ -1,7 +1,7 @@
 @value (spaceNegFluid, spaceNone, spaceMedium, spaceSmall, spaceFluid) from '../../styles/variables/_space.css';
 @value (size4, size60, size480, size580, size720, sizeFluid) from '../../styles/variables/_size.css';
 @value (motionDurationNormal, motionEaseInEaseOut) from '../../styles/variables/_motion.css';
-@value (colorBackgroundTertiary, colorBackgroundPrimary) from '../../styles/variables/_color.css';
+@value (colorBackgroundTertiary, colorBackgroundPrimary, colorBackgroundSecondary) from '../../styles/variables/_color.css';
 @value (borderRadiusNone) from '../../styles/variables/_border.css';
 
 .panel {
@@ -51,6 +51,7 @@
   justify-content: space-between;
   align-items: center;
   gap: spaceMedium;
+  background-color: colorBackgroundTertiary;
 }
 
 .headerContent {
@@ -61,11 +62,12 @@
   padding: spaceMedium;
   height: sizeFluid;
   overflow: auto;
+  background-color: colorBackgroundSecondary;
 }
 
 .panelFooter {
   composes: borderTopPrimary from '../../styles/border.module.css';
-  background-color: colorBackgroundPrimary;
+  background-color: colorBackgroundTertiary;
   margin-top: auto;
   padding: spaceMedium;
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {