@flodesk/grain 11.41.0 → 11.42.0

package/es/components/icon-button.js

@@ -16,14 +16,20 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 
 const getTrimSideStyles = _ref => {
   let {
+    trimSide,
     iconWidth,
-    trimSide
+    iconHeight
   } = _ref;
-  const offset = "calc((var(--grn-clearbutton-height) - ".concat(iconWidth, "px) / -2)");
-  if (!trimSide) return '';
-  if (trimSide === 'left') return "margin-left: ".concat(offset, ";");
-  if (trimSide === 'right') return "margin-right: ".concat(offset, ";");
-  if (trimSide === 'x') return "margin-inline: ".concat(offset, ";");
+  const xOffset = "calc((var(--grn-clearbutton-height) - ".concat(iconWidth, "px) / -2)");
+  const yOffset = "calc((var(--grn-clearbutton-height) - ".concat(iconHeight, "px) / -2)");
+  const trimSidesCss = [];
+  if (trimSide.includes('left')) trimSidesCss.push("margin-left: ".concat(xOffset, ";"));
+  if (trimSide.includes('right')) trimSidesCss.push("margin-right: ".concat(xOffset, ";"));
+  if (trimSide.includes('x')) trimSidesCss.push("margin-inline: ".concat(xOffset, ";"));
+  if (trimSide.includes('y')) trimSidesCss.push("margin-block: ".concat(yOffset, ";"));
+  if (trimSide.includes('top')) trimSidesCss.push("margin-top: ".concat(yOffset, ";"));
+  if (trimSide.includes('bottom')) trimSidesCss.push("margin-bottom: ".concat(yOffset, ";"));
+  return trimSidesCss.join(' ');
 };
 
 const Wrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
@@ -34,13 +40,15 @@ const Wrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "product
 })(p => p.clearButtonStyles.box, ";min-width:var(--grn-clearbutton-height);padding-left:8px;padding-right:8px;", _ref2 => {
   let {
     trimSide,
-    iconWidth
+    iconWidth,
+    iconHeight
   } = _ref2;
   return trimSide && getTrimSideStyles({
+    trimSide,
     iconWidth,
-    trimSide
+    iconHeight
   });
-}, ";.Icon{", p => p.clearButtonStyles.icon, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tYnV0dG9uLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQjZCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tYnV0dG9uLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEljb24gfSBmcm9tICcuL2ljb24nO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBnZXRDbGVhckJ1dHRvblN0eWxlcyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5cbmNvbnN0IGdldFRyaW1TaWRlU3R5bGVzID0gKHsgaWNvbldpZHRoLCB0cmltU2lkZSB9KSA9PiB7XG4gIGNvbnN0IG9mZnNldCA9IGBjYWxjKCh2YXIoLS1ncm4tY2xlYXJidXR0b24taGVpZ2h0KSAtICR7aWNvbldpZHRofXB4KSAvIC0yKWA7XG5cbiAgaWYgKCF0cmltU2lkZSkgcmV0dXJuICcnO1xuXG4gIGlmICh0cmltU2lkZSA9PT0gJ2xlZnQnKSByZXR1cm4gYG1hcmdpbi1sZWZ0OiAke29mZnNldH07YDtcbiAgaWYgKHRyaW1TaWRlID09PSAncmlnaHQnKSByZXR1cm4gYG1hcmdpbi1yaWdodDogJHtvZmZzZXR9O2A7XG4gIGlmICh0cmltU2lkZSA9PT0gJ3gnKSByZXR1cm4gYG1hcmdpbi1pbmxpbmU6ICR7b2Zmc2V0fTtgO1xufTtcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5idXR0b25gXG4gICR7cCA9PiBwLmNsZWFyQnV0dG9uU3R5bGVzLmJveH07XG4gIG1pbi13aWR0aDogdmFyKC0tZ3JuLWNsZWFyYnV0dG9uLWhlaWdodCk7XG4gIHBhZGRpbmctbGVmdDogOHB4O1xuICBwYWRkaW5nLXJpZ2h0OiA4cHg7XG4gICR7KHsgdHJpbVNpZGUsIGljb25XaWR0aCB9KSA9PiB0cmltU2lkZSAmJiBnZXRUcmltU2lkZVN0eWxlcyh7IGljb25XaWR0aCwgdHJpbVNpZGUgfSl9O1xuXG4gIC5JY29uIHtcbiAgICAke3AgPT4gcC5jbGVhckJ1dHRvblN0eWxlcy5pY29ufTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEljb25CdXR0b24gPSBmb3J3YXJkUmVmKFxuICAoXG4gICAge1xuICAgICAgY2hpbGRyZW4sXG4gICAgICBpc0Rpc2FibGVkLFxuICAgICAgaWNvbixcbiAgICAgIGNvbG9yLFxuICAgICAgdmFyaWFudCA9ICduZXV0cmFsJyxcbiAgICAgIHR5cGUgPSAnYnV0dG9uJyxcbiAgICAgIGlzQWN0aXZlLFxuICAgICAgdGFnID0gJ2J1dHRvbicsXG4gICAgICB0cmltU2lkZSxcbiAgICAgIC4uLnByb3BzXG4gICAgfSxcbiAgICByZWYsXG4gICkgPT4ge1xuICAgIGNvbnN0IGNsZWFyQnV0dG9uU3R5bGVzID0gZ2V0Q2xlYXJCdXR0b25TdHlsZXMoeyB2YXJpYW50LCBpc0Rpc2FibGVkLCBpc0FjdGl2ZSB9KTtcbiAgICBjb25zdCBpY29uV2lkdGggPSBpY29uPy50eXBlPy52aWV3Qm94V2lkdGggLyAyIHx8IDE2O1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxXcmFwcGVyXG4gICAgICAgIHR5cGU9e3R5cGV9XG4gICAgICAgIGRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICBpY29uPXtpY29ufVxuICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgdmFyaWFudD17dmFyaWFudH1cbiAgICAgICAgY2xlYXJCdXR0b25TdHlsZXM9e2NsZWFyQnV0dG9uU3R5bGVzfVxuICAgICAgICBhcz17dGFnfVxuICAgICAgICBpY29uV2lkdGg9e2ljb25XaWR0aH1cbiAgICAgICAgdHJpbVNpZGU9e3RyaW1TaWRlfVxuICAgICAgICB7Li4ucHJvcHN9XG4gICAgICA+XG4gICAgICAgIHtpY29uICYmIDxJY29uIGljb249e2ljb259IC8+fVxuICAgICAgICB7Y2hpbGRyZW4gJiYgY2hpbGRyZW59XG4gICAgICA8L1dyYXBwZXI+XG4gICAgKTtcbiAgfSxcbik7XG5cbkljb25CdXR0b24ucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIGljb246IFByb3BUeXBlcy5ub2RlLFxuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLmJvb2wsXG4gIGlzQWN0aXZlOiBQcm9wVHlwZXMuYm9vbCxcbiAgdmFyaWFudDogdHlwZXMuY2xlYXJCdXR0b25WYXJpYW50LFxuICB0eXBlOiB0eXBlcy5idXR0b25UeXBlLFxuICB0YWc6IHR5cGVzLmJ1dHRvblRhZyxcbiAgdHJpbVNpZGU6IFByb3BUeXBlcy5vbmVPZihbJ2xlZnQnLCAncmlnaHQnLCAneCddKSxcbn07XG4iXX0= */"));
+}, ";.Icon{", p => p.clearButtonStyles.icon, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tYnV0dG9uLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1QjZCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tYnV0dG9uLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEljb24gfSBmcm9tICcuL2ljb24nO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBnZXRDbGVhckJ1dHRvblN0eWxlcyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5cbmNvbnN0IGdldFRyaW1TaWRlU3R5bGVzID0gKHsgdHJpbVNpZGUsIGljb25XaWR0aCwgaWNvbkhlaWdodCB9KSA9PiB7XG4gIGNvbnN0IHhPZmZzZXQgPSBgY2FsYygodmFyKC0tZ3JuLWNsZWFyYnV0dG9uLWhlaWdodCkgLSAke2ljb25XaWR0aH1weCkgLyAtMilgO1xuICBjb25zdCB5T2Zmc2V0ID0gYGNhbGMoKHZhcigtLWdybi1jbGVhcmJ1dHRvbi1oZWlnaHQpIC0gJHtpY29uSGVpZ2h0fXB4KSAvIC0yKWA7XG5cbiAgY29uc3QgdHJpbVNpZGVzQ3NzID0gW107XG5cbiAgaWYgKHRyaW1TaWRlLmluY2x1ZGVzKCdsZWZ0JykpIHRyaW1TaWRlc0Nzcy5wdXNoKGBtYXJnaW4tbGVmdDogJHt4T2Zmc2V0fTtgKTtcbiAgaWYgKHRyaW1TaWRlLmluY2x1ZGVzKCdyaWdodCcpKSB0cmltU2lkZXNDc3MucHVzaChgbWFyZ2luLXJpZ2h0OiAke3hPZmZzZXR9O2ApO1xuICBpZiAodHJpbVNpZGUuaW5jbHVkZXMoJ3gnKSkgdHJpbVNpZGVzQ3NzLnB1c2goYG1hcmdpbi1pbmxpbmU6ICR7eE9mZnNldH07YCk7XG4gIGlmICh0cmltU2lkZS5pbmNsdWRlcygneScpKSB0cmltU2lkZXNDc3MucHVzaChgbWFyZ2luLWJsb2NrOiAke3lPZmZzZXR9O2ApO1xuICBpZiAodHJpbVNpZGUuaW5jbHVkZXMoJ3RvcCcpKSB0cmltU2lkZXNDc3MucHVzaChgbWFyZ2luLXRvcDogJHt5T2Zmc2V0fTtgKTtcbiAgaWYgKHRyaW1TaWRlLmluY2x1ZGVzKCdib3R0b20nKSkgdHJpbVNpZGVzQ3NzLnB1c2goYG1hcmdpbi1ib3R0b206ICR7eU9mZnNldH07YCk7XG5cbiAgcmV0dXJuIHRyaW1TaWRlc0Nzcy5qb2luKCcgJyk7XG59O1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmJ1dHRvbmBcbiAgJHtwID0+IHAuY2xlYXJCdXR0b25TdHlsZXMuYm94fTtcbiAgbWluLXdpZHRoOiB2YXIoLS1ncm4tY2xlYXJidXR0b24taGVpZ2h0KTtcbiAgcGFkZGluZy1sZWZ0OiA4cHg7XG4gIHBhZGRpbmctcmlnaHQ6IDhweDtcbiAgJHsoeyB0cmltU2lkZSwgaWNvbldpZHRoLCBpY29uSGVpZ2h0IH0pID0+XG4gICAgdHJpbVNpZGUgJiYgZ2V0VHJpbVNpZGVTdHlsZXMoeyB0cmltU2lkZSwgaWNvbldpZHRoLCBpY29uSGVpZ2h0IH0pfTtcblxuICAuSWNvbiB7XG4gICAgJHtwID0+IHAuY2xlYXJCdXR0b25TdHlsZXMuaWNvbn07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBJY29uQnV0dG9uID0gZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgaXNEaXNhYmxlZCxcbiAgICAgIGljb24sXG4gICAgICBjb2xvcixcbiAgICAgIHZhcmlhbnQgPSAnbmV1dHJhbCcsXG4gICAgICB0eXBlID0gJ2J1dHRvbicsXG4gICAgICBpc0FjdGl2ZSxcbiAgICAgIHRhZyA9ICdidXR0b24nLFxuICAgICAgdHJpbVNpZGUsXG4gICAgICAuLi5wcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IHtcbiAgICBjb25zdCBjbGVhckJ1dHRvblN0eWxlcyA9IGdldENsZWFyQnV0dG9uU3R5bGVzKHsgdmFyaWFudCwgaXNEaXNhYmxlZCwgaXNBY3RpdmUgfSk7XG4gICAgY29uc3QgaWNvbldpZHRoID0gaWNvbj8udHlwZT8udmlld0JveFdpZHRoIC8gMiB8fCAxNjtcbiAgICBjb25zdCBpY29uSGVpZ2h0ID0gMTY7XG5cbiAgICBjb25zdCB0cmltU2lkZUFycmF5ID0gQXJyYXkuaXNBcnJheSh0cmltU2lkZSkgPyB0cmltU2lkZSA6IFt0cmltU2lkZV07XG5cbiAgICByZXR1cm4gKFxuICAgICAgPFdyYXBwZXJcbiAgICAgICAgdHlwZT17dHlwZX1cbiAgICAgICAgZGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgIGljb249e2ljb259XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgICB2YXJpYW50PXt2YXJpYW50fVxuICAgICAgICBjbGVhckJ1dHRvblN0eWxlcz17Y2xlYXJCdXR0b25TdHlsZXN9XG4gICAgICAgIGFzPXt0YWd9XG4gICAgICAgIGljb25XaWR0aD17aWNvbldpZHRofVxuICAgICAgICBpY29uSGVpZ2h0PXtpY29uSGVpZ2h0fVxuICAgICAgICB0cmltU2lkZT17dHJpbVNpZGVBcnJheX1cbiAgICAgICAgey4uLnByb3BzfVxuICAgICAgPlxuICAgICAgICB7aWNvbiAmJiA8SWNvbiBpY29uPXtpY29ufSAvPn1cbiAgICAgICAge2NoaWxkcmVuICYmIGNoaWxkcmVufVxuICAgICAgPC9XcmFwcGVyPlxuICAgICk7XG4gIH0sXG4pO1xuXG5JY29uQnV0dG9uLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBpY29uOiBQcm9wVHlwZXMubm9kZSxcbiAgb25DbGljazogUHJvcFR5cGVzLmZ1bmMsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICBpc0FjdGl2ZTogUHJvcFR5cGVzLmJvb2wsXG4gIHZhcmlhbnQ6IHR5cGVzLmNsZWFyQnV0dG9uVmFyaWFudCxcbiAgdHlwZTogdHlwZXMuYnV0dG9uVHlwZSxcbiAgdGFnOiB0eXBlcy5idXR0b25UYWcsXG4gIHRyaW1TaWRlOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtcbiAgICBQcm9wVHlwZXMub25lT2YoWydsZWZ0JywgJ3JpZ2h0JywgJ3gnLCAneScsICd0b3AnLCAnYm90dG9tJ10pLFxuICAgIFByb3BUeXBlcy5hcnJheSxcbiAgXSksXG59O1xuIl19 */"));
 
 export const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
   var _icon$type;
@@ -64,6 +72,8 @@ export const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
     isActive
   });
   const iconWidth = (icon === null || icon === void 0 ? void 0 : (_icon$type = icon.type) === null || _icon$type === void 0 ? void 0 : _icon$type.viewBoxWidth) / 2 || 16;
+  const iconHeight = 16;
+  const trimSideArray = Array.isArray(trimSide) ? trimSide : [trimSide];
   return ___EmotionJSX(Wrapper, _extends({
     type: type,
     disabled: isDisabled,
@@ -73,7 +83,8 @@ export const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
     clearButtonStyles: clearButtonStyles,
     as: tag,
     iconWidth: iconWidth,
-    trimSide: trimSide
+    iconHeight: iconHeight,
+    trimSide: trimSideArray
   }, props), icon && ___EmotionJSX(Icon, {
     icon: icon
   }), children && children);
@@ -87,5 +98,5 @@ IconButton.propTypes = {
   variant: types.clearButtonVariant,
   type: types.buttonType,
   tag: types.buttonTag,
-  trimSide: PropTypes.oneOf(['left', 'right', 'x'])
+  trimSide: PropTypes.oneOfType([PropTypes.oneOf(['left', 'right', 'x', 'y', 'top', 'bottom']), PropTypes.array])
 };

package/es/types/components/icon-button.d.ts

@@ -11,6 +11,7 @@ export interface IconButtonProps
   type?: 'button' | 'submit' | 'reset';
   isActive?: boolean;
   tag?: 'button' | 'a' | 'span';
+  trimSide?: 'left' | 'right' | 'x';
 }
 
 export const IconButton: FC<IconButtonProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "11.41.0",
+  "version": "11.42.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "types": "es/types/index.d.ts",