@pingux/astro 2.27.1-alpha.1 → 2.28.0-alpha.0

package/lib/cjs/recipes/ConditionFilter.stories.js

@@ -16,6 +16,7 @@ exports["default"] = exports.Edit = exports.DisplaySectionHeader = exports.Displ
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
 var _TrashIcon = _interopRequireDefault(require("@pingux/mdi-react/TrashIcon"));
 var _index = require("../index");
 var _figmaLinks = require("../utils/designUtils/figmaLinks.js");
@@ -210,7 +211,8 @@ var Edit = function Edit() {
     "aria-label": "deleteButton",
     sx: {
       alignSelf: 'center'
-    }
+    },
+    ml: "sm"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _TrashIcon["default"],
     sx: {
@@ -230,8 +232,8 @@ var Edit = function Edit() {
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",
-    mb: "sm",
-    pr: "37px"
+    mb: "md",
+    pr: "42px"
   }, (0, _react2.jsx)(_index.RockerButtonGroup, {
     mr: "sm",
     defaultSelectedKey: "all"
@@ -260,13 +262,18 @@ var Edit = function Edit() {
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.defaultText
   }, "NONE"))), (0, _react2.jsx)(_index.Text, null, ofTheConditionsAreTrueCopy), (0, _react2.jsx)(_index.Button, {
-    variant: "inline",
-    width: "fit-content",
-    role: "button",
-    title: "Add Field Button",
     ml: "auto",
+    variant: "inlineWithIcon",
+    title: "Add Field Button",
     "aria-label": "add"
-  }, "+ Add")), (0, _map["default"])(allConditions).call(allConditions, function (item) {
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    mr: "xs",
+    size: 15,
+    title: {
+      name: 'Add Icon'
+    }
+  }), "Add")), (0, _map["default"])(allConditions).call(allConditions, function (item) {
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
       alignItems: "center",
@@ -286,12 +293,18 @@ var Edit = function Edit() {
           }
         }
       },
+      labelProps: {
+        mb: 0
+      },
       "aria-label": "temp-label"
     }), (0, _react2.jsx)(_index.SelectField, {
       hasNoStatusIndicator: true,
       selectedKey: "Equals",
       mr: "md",
       "aria-label": "temp-label",
+      labelProps: {
+        mb: 0
+      },
       width: "125px"
     }, (0, _react2.jsx)(_index.Item, {
       key: "Equals",
@@ -305,8 +318,10 @@ var Edit = function Edit() {
       hasNoStatusIndicator: true,
       width: "44%",
       value: item.field3,
-      mr: "xs",
-      "aria-label": "temp-label"
+      "aria-label": "temp-label",
+      labelProps: {
+        mb: 0
+      }
     })), trashButton);
   }), (0, _react2.jsx)(_index.Box, {
     isRow: true
@@ -316,13 +331,14 @@ var Edit = function Edit() {
       '&::after': {
         bg: 'decorative.4',
         width: '2px'
-      }
+      },
+      p: 'md'
     })
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",
-    mb: "sm",
-    pr: "37px"
+    mb: "md",
+    pr: "42px"
   }, (0, _react2.jsx)(_index.RockerButtonGroup, {
     mr: "sm",
     defaultSelectedKey: "any"
@@ -351,19 +367,22 @@ var Edit = function Edit() {
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.defaultText
   }, "NONE"))), (0, _react2.jsx)(_index.Text, null, ofTheConditionsAreTrueCopy), (0, _react2.jsx)(_index.Button, {
-    variant: "inline",
-    width: "fit-content",
-    role: "button",
-    title: "Add Field Button",
     ml: "auto",
+    variant: "inlineWithIcon",
+    title: "Add Field Button",
     "aria-label": "add"
-  }, "+ Add")), (0, _react2.jsx)(_index.Box, {
-    ml: "lg"
-  }, (0, _map["default"])(anyConditions).call(anyConditions, function (item) {
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    mr: "xs",
+    size: 15,
+    title: {
+      name: 'Add Icon'
+    }
+  }), "Add")), (0, _react2.jsx)(_index.Box, null, (0, _map["default"])(anyConditions).call(anyConditions, function (item, index) {
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
       alignItems: "center",
-      mb: "md",
+      mb: index + 1 === anyConditions.length ? 0 : 'md',
       key: item.key
     }, (0, _react2.jsx)(_index.Box, {
       isRow: true,
@@ -379,13 +398,19 @@ var Edit = function Edit() {
             bg: 'decorative.7'
           }
         }
+      },
+      labelProps: {
+        mb: 0
       }
     }), (0, _react2.jsx)(_index.SelectField, {
       "aria-label": "temp-label",
       hasNoStatusIndicator: true,
       selectedKey: "Equals",
       mr: "md",
-      width: "125px"
+      width: "125px",
+      labelProps: {
+        mb: 0
+      }
     }, (0, _react2.jsx)(_index.Item, {
       key: "Equals",
       textValue: "Equals",
@@ -399,7 +424,9 @@ var Edit = function Edit() {
       hasNoStatusIndicator: true,
       value: item.field3,
       width: "44%",
-      mr: "xs"
+      labelProps: {
+        mb: 0
+      }
     })), trashButton);
   }))), (0, _react2.jsx)(_index.Box, {
     alignSelf: "start"
@@ -412,13 +439,14 @@ var Edit = function Edit() {
       '&::after': {
         bg: 'decorative.4',
         width: '2px'
-      }
+      },
+      p: 'md'
     })
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center",
-    mb: "sm",
-    pr: "37px"
+    mb: "md",
+    pr: "42px"
   }, (0, _react2.jsx)(_index.RockerButtonGroup, {
     mr: "sm",
     defaultSelectedKey: "none"
@@ -447,19 +475,22 @@ var Edit = function Edit() {
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.defaultText
   }, "NONE"))), (0, _react2.jsx)(_index.Text, null, ofTheConditionsAreTrueCopy), (0, _react2.jsx)(_index.Button, {
-    variant: "inline",
-    width: "fit-content",
-    role: "button",
-    title: "Add Field Button",
     ml: "auto",
+    variant: "inlineWithIcon",
+    title: "Add Field Button",
     "aria-label": "add"
-  }, "+ Add")), (0, _react2.jsx)(_index.Box, {
-    ml: "lg"
-  }, (0, _map["default"])(noneConditions).call(noneConditions, function (item) {
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    mr: "xs",
+    size: 15,
+    title: {
+      name: 'Add Icon'
+    }
+  }), "Add")), (0, _react2.jsx)(_index.Box, null, (0, _map["default"])(noneConditions).call(noneConditions, function (item, index) {
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
       alignItems: "center",
-      mb: "md",
+      mb: index + 1 === anyConditions.length ? 0 : 'md',
       key: item.key
     }, (0, _react2.jsx)(_index.Box, {
       isRow: true,
@@ -475,13 +506,19 @@ var Edit = function Edit() {
             bg: 'accent.20'
           }
         }
+      },
+      labelProps: {
+        mb: 0
       }
     }), (0, _react2.jsx)(_index.SelectField, {
       "aria-label": "temp-label",
       hasNoStatusIndicator: true,
       selectedKey: "Equals",
       mr: "md",
-      width: "125px"
+      width: "125px",
+      labelProps: {
+        mb: 0
+      }
     }, (0, _react2.jsx)(_index.Item, {
       key: "Equals",
       textValue: "Equals",
@@ -493,9 +530,11 @@ var Edit = function Edit() {
     }, "Not Equal")), (0, _react2.jsx)(_index.TextField, {
       "aria-label": "temp-label",
       hasNoStatusIndicator: true,
+      labelProps: {
+        mb: 0
+      },
       value: item.field3,
-      width: "44%",
-      mr: "xs"
+      width: "44%"
     })), trashButton);
   }))), (0, _react2.jsx)(_index.Box, {
     alignSelf: "start"

package/lib/recipes/ConditionFilter.stories.js

@@ -11,6 +11,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
+import PlusIcon from '@pingux/mdi-react/PlusIcon';
 import TrashIcon from '@pingux/mdi-react/TrashIcon';
 import { Badge, Box, Bracket, Button, Icon, IconButton, Item, RockerButton, RockerButtonGroup, SelectField, Text, TextField } from '../index';
 import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
@@ -199,7 +200,8 @@ export var Edit = function Edit() {
     "aria-label": "deleteButton",
     sx: {
       alignSelf: 'center'
-    }
+    },
+    ml: "sm"
   }, ___EmotionJSX(Icon, {
     icon: TrashIcon,
     sx: {
@@ -219,8 +221,8 @@ export var Edit = function Edit() {
   }, ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center",
-    mb: "sm",
-    pr: "37px"
+    mb: "md",
+    pr: "42px"
   }, ___EmotionJSX(RockerButtonGroup, {
     mr: "sm",
     defaultSelectedKey: "all"
@@ -249,13 +251,18 @@ export var Edit = function Edit() {
   }, ___EmotionJSX(Text, {
     sx: sx.defaultText
   }, "NONE"))), ___EmotionJSX(Text, null, ofTheConditionsAreTrueCopy), ___EmotionJSX(Button, {
-    variant: "inline",
-    width: "fit-content",
-    role: "button",
-    title: "Add Field Button",
     ml: "auto",
+    variant: "inlineWithIcon",
+    title: "Add Field Button",
     "aria-label": "add"
-  }, "+ Add")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
+  }, ___EmotionJSX(Icon, {
+    icon: PlusIcon,
+    mr: "xs",
+    size: 15,
+    title: {
+      name: 'Add Icon'
+    }
+  }), "Add")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
     return ___EmotionJSX(Box, {
       isRow: true,
       alignItems: "center",
@@ -275,12 +282,18 @@ export var Edit = function Edit() {
           }
         }
       },
+      labelProps: {
+        mb: 0
+      },
       "aria-label": "temp-label"
     }), ___EmotionJSX(SelectField, {
       hasNoStatusIndicator: true,
       selectedKey: "Equals",
       mr: "md",
       "aria-label": "temp-label",
+      labelProps: {
+        mb: 0
+      },
       width: "125px"
     }, ___EmotionJSX(Item, {
       key: "Equals",
@@ -294,8 +307,10 @@ export var Edit = function Edit() {
       hasNoStatusIndicator: true,
       width: "44%",
       value: item.field3,
-      mr: "xs",
-      "aria-label": "temp-label"
+      "aria-label": "temp-label",
+      labelProps: {
+        mb: 0
+      }
     })), trashButton);
   }), ___EmotionJSX(Box, {
     isRow: true
@@ -305,13 +320,14 @@ export var Edit = function Edit() {
       '&::after': {
         bg: 'decorative.4',
         width: '2px'
-      }
+      },
+      p: 'md'
     })
   }, ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center",
-    mb: "sm",
-    pr: "37px"
+    mb: "md",
+    pr: "42px"
   }, ___EmotionJSX(RockerButtonGroup, {
     mr: "sm",
     defaultSelectedKey: "any"
@@ -340,19 +356,22 @@ export var Edit = function Edit() {
   }, ___EmotionJSX(Text, {
     sx: sx.defaultText
   }, "NONE"))), ___EmotionJSX(Text, null, ofTheConditionsAreTrueCopy), ___EmotionJSX(Button, {
-    variant: "inline",
-    width: "fit-content",
-    role: "button",
-    title: "Add Field Button",
     ml: "auto",
+    variant: "inlineWithIcon",
+    title: "Add Field Button",
     "aria-label": "add"
-  }, "+ Add")), ___EmotionJSX(Box, {
-    ml: "lg"
-  }, _mapInstanceProperty(anyConditions).call(anyConditions, function (item) {
+  }, ___EmotionJSX(Icon, {
+    icon: PlusIcon,
+    mr: "xs",
+    size: 15,
+    title: {
+      name: 'Add Icon'
+    }
+  }), "Add")), ___EmotionJSX(Box, null, _mapInstanceProperty(anyConditions).call(anyConditions, function (item, index) {
     return ___EmotionJSX(Box, {
       isRow: true,
       alignItems: "center",
-      mb: "md",
+      mb: index + 1 === anyConditions.length ? 0 : 'md',
       key: item.key
     }, ___EmotionJSX(Box, {
       isRow: true,
@@ -368,13 +387,19 @@ export var Edit = function Edit() {
             bg: 'decorative.7'
           }
         }
+      },
+      labelProps: {
+        mb: 0
       }
     }), ___EmotionJSX(SelectField, {
       "aria-label": "temp-label",
       hasNoStatusIndicator: true,
       selectedKey: "Equals",
       mr: "md",
-      width: "125px"
+      width: "125px",
+      labelProps: {
+        mb: 0
+      }
     }, ___EmotionJSX(Item, {
       key: "Equals",
       textValue: "Equals",
@@ -388,7 +413,9 @@ export var Edit = function Edit() {
       hasNoStatusIndicator: true,
       value: item.field3,
       width: "44%",
-      mr: "xs"
+      labelProps: {
+        mb: 0
+      }
     })), trashButton);
   }))), ___EmotionJSX(Box, {
     alignSelf: "start"
@@ -401,13 +428,14 @@ export var Edit = function Edit() {
       '&::after': {
         bg: 'decorative.4',
         width: '2px'
-      }
+      },
+      p: 'md'
     })
   }, ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center",
-    mb: "sm",
-    pr: "37px"
+    mb: "md",
+    pr: "42px"
   }, ___EmotionJSX(RockerButtonGroup, {
     mr: "sm",
     defaultSelectedKey: "none"
@@ -436,19 +464,22 @@ export var Edit = function Edit() {
   }, ___EmotionJSX(Text, {
     sx: sx.defaultText
   }, "NONE"))), ___EmotionJSX(Text, null, ofTheConditionsAreTrueCopy), ___EmotionJSX(Button, {
-    variant: "inline",
-    width: "fit-content",
-    role: "button",
-    title: "Add Field Button",
     ml: "auto",
+    variant: "inlineWithIcon",
+    title: "Add Field Button",
     "aria-label": "add"
-  }, "+ Add")), ___EmotionJSX(Box, {
-    ml: "lg"
-  }, _mapInstanceProperty(noneConditions).call(noneConditions, function (item) {
+  }, ___EmotionJSX(Icon, {
+    icon: PlusIcon,
+    mr: "xs",
+    size: 15,
+    title: {
+      name: 'Add Icon'
+    }
+  }), "Add")), ___EmotionJSX(Box, null, _mapInstanceProperty(noneConditions).call(noneConditions, function (item, index) {
     return ___EmotionJSX(Box, {
       isRow: true,
       alignItems: "center",
-      mb: "md",
+      mb: index + 1 === anyConditions.length ? 0 : 'md',
       key: item.key
     }, ___EmotionJSX(Box, {
       isRow: true,
@@ -464,13 +495,19 @@ export var Edit = function Edit() {
             bg: 'accent.20'
           }
         }
+      },
+      labelProps: {
+        mb: 0
       }
     }), ___EmotionJSX(SelectField, {
       "aria-label": "temp-label",
       hasNoStatusIndicator: true,
       selectedKey: "Equals",
       mr: "md",
-      width: "125px"
+      width: "125px",
+      labelProps: {
+        mb: 0
+      }
     }, ___EmotionJSX(Item, {
       key: "Equals",
       textValue: "Equals",
@@ -482,9 +519,11 @@ export var Edit = function Edit() {
     }, "Not Equal")), ___EmotionJSX(TextField, {
       "aria-label": "temp-label",
       hasNoStatusIndicator: true,
+      labelProps: {
+        mb: 0
+      },
       value: item.field3,
-      width: "44%",
-      mr: "xs"
+      width: "44%"
     })), trashButton);
   }))), ___EmotionJSX(Box, {
     alignSelf: "start"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.27.1-alpha.1",
+  "version": "2.28.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",