@zendeskgarden/react-buttons 9.0.0-next.6 → 9.0.0-next.8

package/dist/esm/styled/StyledIconButton.js

@@ -0,0 +1,39 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledButton, getHeight } from './StyledButton.js';
+import { StyledIcon } from './StyledIcon.js';
+
+const COMPONENT_ID = 'buttons.icon_button';
+const iconColorStyles = props => {
+  const shade = 600;
+  const baseColor = getColorV8('neutralHue', shade, props.theme);
+  const hoverColor = getColorV8('neutralHue', shade + 100, props.theme);
+  const activeColor = getColorV8('neutralHue', shade + 200, props.theme);
+  return css(["color:", ";&:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}"], baseColor, hoverColor, activeColor);
+};
+const iconButtonStyles = props => {
+  const width = getHeight(props);
+  return css(["border:", ";padding:0;width:", ";min-width:", ";", ";&:disabled{background-color:", ";}"], props.isBasic && 'none', width, width, props.isBasic && !(props.isPrimary || props.isDanger || props.disabled) && iconColorStyles(props), !props.isPrimary && 'transparent');
+};
+const iconStyles = props => {
+  const size = props.theme.iconSizes.md;
+  return css(["width:", ";height:", ";& > svg{transition:opacity 0.15s ease-in-out;}"], size, size);
+};
+const StyledIconButton = styled(StyledButton).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledIconButton",
+  componentId: "sc-1t0ughp-0"
+})(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledIconButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledIconButton };

package/dist/esm/styled/StyledSplitButton.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'buttons.button_group_view';
+const StyledSplitButton = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledSplitButton",
+  componentId: "sc-1u4v04v-0"
+})(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledSplitButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledSplitButton };

package/dist/esm/types/index.js

@@ -0,0 +1,9 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const SIZE = ['small', 'medium', 'large'];
+
+export { SIZE };

package/dist/esm/utils/useSplitButtonContext.js

@@ -0,0 +1,14 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { createContext, useContext } from 'react';
+
+const SplitButtonContext = createContext(undefined);
+const useSplitButtonContext = () => {
+  return useContext(SplitButtonContext);
+};
+
+export { SplitButtonContext, useSplitButtonContext };

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
 'use strict';
 
 var React = require('react');
@@ -37,27 +36,12 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-function _extends$2() {
-  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$2.apply(this, arguments);
-}
-
 const SIZE = ['small', 'medium', 'large'];
 
 const COMPONENT_ID$5 = 'buttons.button_group_view';
 const StyledSplitButton = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledSplitButton",
   componentId: "sc-1u4v04v-0"
@@ -86,7 +70,7 @@ const StyledIcon = styled__default.default(_ref => {
   return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -154,13 +138,13 @@ const colorStyles = props => {
     const foregroundColor = props.isNeutral ? reactTheming.getColorV8('foreground', 600 , props.theme) : baseColor;
     const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
     const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
-    retVal = styled.css(["outline-color:transparent;border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&:focus-visible ", ",&[data-garden-focus-visible] ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], !props.isBasic && borderColor, foregroundColor, !props.isBasic && hoverBorderColor, polished.rgba(baseColor, 0.08), hoverForegroundColor, reactTheming.focusStyles({
+    retVal = styled.css(["outline-color:transparent;border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&:focus-visible ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], !props.isBasic && borderColor, foregroundColor, !props.isBasic && hoverBorderColor, polished.rgba(baseColor, 0.08), hoverForegroundColor, reactTheming.focusStyles({
       theme: props.theme,
       inset: props.focusInset,
       styles: props.isNeutral ? {
         borderColor: baseColor
       } : undefined
-    }), !props.isBasic && activeColor, polished.rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && reactTheming.getColorV8('neutralHue', shade, props.theme), StyledIcon, StyledIcon, StyledIcon, props.isNeutral && reactTheming.getColorV8('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
+    }), !props.isBasic && activeColor, polished.rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && reactTheming.getColorV8('neutralHue', shade, props.theme), StyledIcon, StyledIcon, props.isNeutral && reactTheming.getColorV8('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
   }
   return retVal;
 };
@@ -188,8 +172,12 @@ const groupStyles = props => {
   const focusBoxShadow = isBasic && !isPrimary && reactTheming.getFocusBoxShadow({
     theme,
     inset: focusInset,
-    spacerHue: focusColor,
-    hue: 'transparent'
+    spacerColor: {
+      hue: focusColor
+    },
+    color: {
+      hue: 'transparent'
+    }
   });
   return styled.css(["position:relative;transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,margin-", " 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;border:", " ", ";", "{border-color:", ";box-shadow:", ";}&:hover,&:active,", "{z-index:1;}&:disabled{z-index:-1;background-color:", ";}&:not(:first-of-type){margin-", ":", ";}&:not(:first-of-type):disabled{margin-", ":", ";}&:not(:first-of-type):not(:last-of-type){border-radius:0;}&:first-of-type:not(:last-of-type){border-top-", "-radius:0;border-bottom-", "-radius:0;}&:last-of-type:not(:first-of-type){border-top-", "-radius:0;border-bottom-", "-radius:0;}&:first-of-type:not(:last-of-type) ", "{margin-", ":", ";}&:last-of-type:not(:first-of-type) ", "{margin-", ":", ";}"], startPosition, borders.sm, borderColor, reactTheming.SELECTOR_FOCUS_VISIBLE, focusColor, focusBoxShadow, reactTheming.SELECTOR_FOCUS_VISIBLE, disabledBackgroundColor, startPosition, marginDisplacement, startPosition, marginOffset, endPosition, endPosition, startPosition, startPosition, StyledIcon, endPosition, iconMarginDisplacement, StyledIcon, startPosition, iconMarginDisplacement);
 };
@@ -223,7 +211,7 @@ const sizeStyles = props => {
 };
 const StyledButton = styled__default.default.button.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.6',
+  'data-garden-version': '9.0.0-next.8',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
@@ -236,7 +224,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID$2 = 'buttons.anchor';
 const StyledAnchor = styled__default.default(StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.6',
+  'data-garden-version': '9.0.0-next.8',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -270,7 +258,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
 const COMPONENT_ID$1 = 'buttons.external_icon';
 const StyledExternalIcon = styled__default.default(SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -297,7 +285,7 @@ const iconStyles = props => {
 };
 const StyledIconButton = styled__default.default(StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.6'
+  'data-garden-version': '9.0.0-next.8'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
@@ -311,13 +299,13 @@ const useSplitButtonContext = () => {
   return React.useContext(SplitButtonContext);
 };
 
-const StartIconComponent = props => React__namespace.default.createElement(StyledIcon, _extends$2({
+const StartIconComponent = props => React__namespace.default.createElement(StyledIcon, Object.assign({
   position: "start"
 }, props));
 StartIconComponent.displayName = 'Button.StartIcon';
 const StartIcon = StartIconComponent;
 
-const EndIconComponent = props => React__namespace.default.createElement(StyledIcon, _extends$2({
+const EndIconComponent = props => React__namespace.default.createElement(StyledIcon, Object.assign({
   position: "end"
 }, props));
 EndIconComponent.displayName = 'Button.EndIcon';
@@ -329,7 +317,7 @@ const ButtonComponent = React.forwardRef((props, ref) => {
     ...props,
     focusInset: props.focusInset || splitButtonContext
   };
-  return React__namespace.default.createElement(StyledButton, _extends$2({}, computedProps, {
+  return React__namespace.default.createElement(StyledButton, Object.assign({}, computedProps, {
     ref: ref
   }));
 });
@@ -373,7 +361,7 @@ const Anchor = React.forwardRef((_ref, ref) => {
     noIconLabel: 'true'
   };
   const iconAriaLabel = reactTheming.useText(Anchor, checkProps, isExternal ? 'externalIconLabel' : 'noIconLabel', '(opens in a new tab)');
-  return React__namespace.default.createElement(StyledAnchor, _extends$2({
+  return React__namespace.default.createElement(StyledAnchor, Object.assign({
     ref: ref
   }, anchorProps), children, isExternal &&
   React__namespace.default.createElement(StyledExternalIcon, {
@@ -396,7 +384,7 @@ const IconButton = React.forwardRef((_ref, ref) => {
     ...otherProps
   } = _ref;
   const focusInset = useSplitButtonContext();
-  return React__namespace.default.createElement(StyledIconButton, _extends$2({
+  return React__namespace.default.createElement(StyledIconButton, Object.assign({
     ref: ref
   }, otherProps, {
     focusInset: otherProps.focusInset || focusInset
@@ -441,7 +429,7 @@ const ChevronButton = React.forwardRef((_ref, ref) => {
   let {
     ...buttonProps
   } = _ref;
-  return React__namespace.default.createElement(IconButton, _extends$2({
+  return React__namespace.default.createElement(IconButton, Object.assign({
     ref: ref
   }, buttonProps), React__namespace.default.createElement(SvgChevronDownStroke, null));
 });
@@ -460,7 +448,7 @@ const SplitButton = React.forwardRef((_ref, ref) => {
   } = _ref;
   return React__namespace.default.createElement(SplitButtonContext.Provider, {
     value: true
-  }, React__namespace.default.createElement(StyledSplitButton, _extends$2({
+  }, React__namespace.default.createElement(StyledSplitButton, Object.assign({
     ref: ref
   }, other), children));
 });
@@ -471,7 +459,7 @@ const ToggleButton = React.forwardRef((_ref, ref) => {
     isPressed,
     ...otherProps
   } = _ref;
-  return React__namespace.default.createElement(Button, _extends$2({
+  return React__namespace.default.createElement(Button, Object.assign({
     "aria-pressed": isPressed,
     ref: ref
   }, otherProps));
@@ -490,7 +478,7 @@ const ToggleIconButton = React.forwardRef((_ref, ref) => {
     isPressed,
     ...otherProps
   } = _ref;
-  return React__namespace.default.createElement(IconButton, _extends$2({
+  return React__namespace.default.createElement(IconButton, Object.assign({
     "aria-pressed": isPressed,
     ref: ref
   }, otherProps));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-buttons",
-  "version": "9.0.0-next.6",
+  "version": "9.0.0-next.8",
   "description": "Components relating to buttons in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -27,13 +27,13 @@
     "react-merge-refs": "^2.0.0"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0",
+    "@zendeskgarden/react-theming": ">=9.0.0-next",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.6",
+    "@zendeskgarden/react-theming": "^9.0.0-next.8",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "45c56ad1c73af40afba8e5415f529a2c9601c83f"
+  "gitHead": "a3d6534843d5a4f5cb60b52bc67264f3230f2da0"
 }