@planningcenter/tapestry-react 2.2.0 → 2.4.0

package/dist/cjs/Button/Button.js

@@ -68,7 +68,7 @@ function Button(_ref) {
 
   var buttonProps = {
     alignment: 'center',
-    as: restProps.href || to ? 'a' : 'div',
+    as: restProps.href || to ? 'a' : 'button',
     axis: 'horizontal',
     distribution: 'center',
     fontSize: fontSize,
@@ -77,7 +77,6 @@ function Button(_ref) {
     lineHeight: lineHeight,
     position: 'relative',
     radius: 3,
-    role: 'button',
     strokeAlign: 'inside',
     strokeWeight: 1,
     userSelect: 'none',
@@ -192,7 +191,6 @@ function Button(_ref) {
     };
     buttonProps.cursor = 'pointer';
     buttonProps.touchAction = 'manipulation';
-    buttonProps.tabIndex = 0;
     buttonProps.onClick = onClick;
 
     buttonProps.onKeyDown = function (event) {
@@ -232,6 +230,11 @@ function Button(_ref) {
 
   if (restProps.as) {
     buttonProps.to = to;
+  } // set button type to prevent nested buttons from unintentionally submiting forms 
+
+
+  if (buttonProps.as === "button") {
+    buttonProps.type = "button";
   }
 
   if (process.env.NODE_ENV !== 'production') {

package/dist/cjs/Scrim/Scrim.js

@@ -30,7 +30,7 @@ var Scrim = /*#__PURE__*/React.forwardRef(function (props, _ref) {
     zIndex: 10000,
     overflow: "auto" // @ts-ignore
     ,
-    backgroundColor: "hsla(0,0%,0%,0.74)"
+    backgroundColor: "hsla(0,0%,0%,0.4)"
   }, props));
 });
 exports.Scrim = Scrim;

package/dist/cjs/Sidebar/Sidebar.js

@@ -42,7 +42,7 @@ function Sidebar(_ref) {
   }, restProps), (0, _react.jsx)(_reactStickyBox["default"], {
     css: flexColumnCss
   }, _react2.Children.map(children, function (child) {
-    if (child && child.type !== Sidebar.List || child && child.type !== Sidebar.Item) {
+    if (child && child.type !== Sidebar.List && child.type !== Sidebar.Item) {
       console.warn("Invalid component nesting. " + child.type + " cannot appear as a child of <Sidebar>. Only <Sidebar.List/> or <Sidebar.Item/> may be used.");
     }
 

package/dist/esm/Button/Button.js

@@ -61,7 +61,7 @@ export function Button(_ref) {
 
   var buttonProps = {
     alignment: 'center',
-    as: restProps.href || to ? 'a' : 'div',
+    as: restProps.href || to ? 'a' : 'button',
     axis: 'horizontal',
     distribution: 'center',
     fontSize: fontSize,
@@ -70,7 +70,6 @@ export function Button(_ref) {
     lineHeight: lineHeight,
     position: 'relative',
     radius: 3,
-    role: 'button',
     strokeAlign: 'inside',
     strokeWeight: 1,
     userSelect: 'none',
@@ -185,7 +184,6 @@ export function Button(_ref) {
     };
     buttonProps.cursor = 'pointer';
     buttonProps.touchAction = 'manipulation';
-    buttonProps.tabIndex = 0;
     buttonProps.onClick = onClick;
 
     buttonProps.onKeyDown = function (event) {
@@ -225,6 +223,11 @@ export function Button(_ref) {
 
   if (restProps.as) {
     buttonProps.to = to;
+  } // set button type to prevent nested buttons from unintentionally submiting forms 
+
+
+  if (buttonProps.as === "button") {
+    buttonProps.type = "button";
   }
 
   if (process.env.NODE_ENV !== 'production') {

package/dist/esm/Scrim/Scrim.js

@@ -18,7 +18,7 @@ var Scrim = /*#__PURE__*/React.forwardRef(function (props, _ref) {
     zIndex: 10000,
     overflow: "auto" // @ts-ignore
     ,
-    backgroundColor: "hsla(0,0%,0%,0.74)"
+    backgroundColor: "hsla(0,0%,0%,0.4)"
   }, props));
 });
 export { Scrim };

package/dist/esm/Sidebar/Sidebar.js

@@ -28,7 +28,7 @@ function Sidebar(_ref) {
   }, restProps), jsx(StickyBox, {
     css: flexColumnCss
   }, Children.map(children, function (child) {
-    if (child && child.type !== Sidebar.List || child && child.type !== Sidebar.Item) {
+    if (child && child.type !== Sidebar.List && child.type !== Sidebar.Item) {
       console.warn("Invalid component nesting. " + child.type + " cannot appear as a child of <Sidebar>. Only <Sidebar.List/> or <Sidebar.Item/> may be used.");
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",
@@ -88,7 +88,7 @@
     "typescript": "^4.1.5"
   },
   "dependencies": {
-    "@planningcenter/icons": "^14.0.0",
+    "@planningcenter/icons": "^14.11.0",
     "@planningcenter/react-beautiful-dnd": "^13.2.1",
     "@popmotion/popcorn": "^0.4.4",
     "@popperjs/core": "^2.11.6",

package/src/Button/Button.tsx

@@ -140,7 +140,7 @@ export function Button({
 
   let buttonProps: any = {
     alignment: 'center',
-    as: (restProps as any).href || to ? 'a' : 'div',
+    as: (restProps as any).href || to ? 'a' : 'button',
     axis: 'horizontal',
     distribution: 'center',
     fontSize,
@@ -149,7 +149,6 @@ export function Button({
     lineHeight,
     position: 'relative',
     radius: 3,
-    role: 'button',
     strokeAlign: 'inside',
     strokeWeight: 1,
     userSelect: 'none',
@@ -258,7 +257,6 @@ export function Button({
     buttonProps.focus = { zIndex: 5 }
     buttonProps.cursor = 'pointer'
     buttonProps.touchAction = 'manipulation'
-    buttonProps.tabIndex = 0
     buttonProps.onClick = onClick
     buttonProps.onKeyDown = (event) => {
       if (onClick && (event.key === 'Enter' || event.key === ' ')) {
@@ -300,6 +298,11 @@ export function Button({
     buttonProps.to = to
   }
 
+  // set button type to prevent nested buttons from unintentionally submiting forms 
+  if (buttonProps.as === "button") {
+    buttonProps.type = "button"
+  }
+
   if (process.env.NODE_ENV !== 'production') {
     if (icon && !(title || (tooltip && (tooltip as any).title))) {
       const { tooltipProps, wrapperProps } = useAccessibilityViolation(

package/src/Scrim/Scrim.tsx

@@ -26,7 +26,7 @@ const Scrim = React.forwardRef(function (props: ScrimProps, _ref: any) {
       zIndex={10000}
       overflow="auto"
       // @ts-ignore
-      backgroundColor="hsla(0,0%,0%,0.74)"
+      backgroundColor="hsla(0,0%,0%,0.4)"
       {...props}
     />
   )

package/src/Sidebar/Sidebar.js

@@ -30,8 +30,9 @@ function Sidebar({ children, ...restProps }: Props) {
       <StickyBox css={flexColumnCss}>
         {Children.map(children, (child) => {
           if (
-            (child && child.type !== Sidebar.List) ||
-            (child && child.type !== Sidebar.Item)
+            child &&
+            child.type !== Sidebar.List &&
+            child.type !== Sidebar.Item
           ) {
             console.warn(
               `Invalid component nesting. ${child.type} cannot appear as a child of <Sidebar>. Only <Sidebar.List/> or <Sidebar.Item/> may be used.`