@zendeskgarden/react-buttons 9.0.0-next.18 → 9.0.0-next.19

package/dist/esm/elements/Anchor.js

@@ -19,6 +19,7 @@ const Anchor = forwardRef((_ref, ref) => {
     children,
     isExternal,
     externalIconLabel,
+    isUnderlined = true,
     ...otherProps
   } = _ref;
   let anchorProps = otherProps;
@@ -36,7 +37,8 @@ const Anchor = forwardRef((_ref, ref) => {
   };
   const iconAriaLabel = useText(Anchor, checkProps, isExternal ? 'externalIconLabel' : 'noIconLabel', '(opens in a new tab)');
   return React__default.createElement(StyledAnchor, Object.assign({
-    ref: ref
+    ref: ref,
+    $isUnderlined: isUnderlined
   }, anchorProps), children, isExternal &&
   React__default.createElement(StyledExternalIcon, {
     role: "img",
@@ -48,6 +50,7 @@ Anchor.displayName = 'Anchor';
 Anchor.propTypes = {
   isExternal: PropTypes.bool,
   isDanger: PropTypes.bool,
+  isUnderlined: PropTypes.bool,
   externalIconLabel: PropTypes.string
 };
 

package/dist/esm/elements/Button.js

@@ -21,7 +21,8 @@ const ButtonComponent = forwardRef((props, ref) => {
   const splitButtonContext = useSplitButtonContext();
   const computedProps = {
     ...props,
-    focusInset: props.focusInset || splitButtonContext
+    focusInset: props.focusInset || splitButtonContext,
+    $isUnderlined: props.isLink
   };
   return React__default.createElement(StyledButton, Object.assign({}, computedProps, {
     ref: ref

package/dist/esm/styled/StyledAnchor.js

@@ -11,7 +11,7 @@ import { StyledButton } from './StyledButton.js';
 const COMPONENT_ID = 'buttons.anchor';
 const StyledAnchor = styled(StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,

package/dist/esm/styled/StyledButton.js

@@ -308,12 +308,12 @@ const sizeStyles = props => {
 };
 const StyledButton = styled.button.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
   componentId: "sc-qe3ace-0"
-})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{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,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", "}", ""], props => props.isLink ? 'inline' : 'inline-flex', props => !props.isLink && 'center', props => !props.isLink && 'center', props => `${props.isLink ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.isStretched ? '100%' : '', props => !props.isLink && 'nowrap', props => props.isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.isLink && 'none', props => sizeStyles(props), SELECTOR_FOCUS_VISIBLE, props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => colorStyles(props), props => props.isLink && 'none', StyledIcon, props => iconStyles(props), StyledSplitButton, props => groupStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:", ";text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{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,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", "}", ""], props => props.isLink ? 'inline' : 'inline-flex', props => !props.isLink && 'center', props => !props.isLink && 'center', props => `${props.isLink ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.isStretched ? '100%' : '', props => props.$isUnderlined ? 'underline' : 'none', props => !props.isLink && 'nowrap', props => props.isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.isLink && 'none', props => sizeStyles(props), SELECTOR_FOCUS_VISIBLE, props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => colorStyles(props), props => props.isLink && 'none', StyledIcon, props => iconStyles(props), StyledSplitButton, props => groupStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledButton.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledExternalIcon.js

@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'buttons.external_icon';
 const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"

package/dist/esm/styled/StyledIcon.js

@@ -19,7 +19,7 @@ const sizeStyles = props => {
 };
 const StyledIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"

package/dist/esm/styled/StyledIconButton.js

@@ -51,7 +51,7 @@ const StyledIconButton = styled(StyledButton).attrs(props => {
   const externalId = props['data-garden-id'];
   return {
     'data-garden-id': externalId && externalId !== COMPONENT_ID$1 ? externalId : COMPONENT_ID,
-    'data-garden-version': '9.0.0-next.18'
+    'data-garden-version': '9.0.0-next.19'
   };
 }).withConfig({
   displayName: "StyledIconButton",

package/dist/esm/styled/StyledSplitButton.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'buttons.button_group_view';
 const StyledSplitButton = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledSplitButton",
   componentId: "sc-1u4v04v-0"

package/dist/index.cjs.js

@@ -41,7 +41,7 @@ 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.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledSplitButton",
   componentId: "sc-1u4v04v-0"
@@ -62,7 +62,7 @@ const sizeStyles$1 = props => {
 };
 const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -369,12 +369,12 @@ const sizeStyles = props => {
 };
 const StyledButton = styled__default.default.button.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
   componentId: "sc-qe3ace-0"
-})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{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,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", "}", ""], props => props.isLink ? 'inline' : 'inline-flex', props => !props.isLink && 'center', props => !props.isLink && 'center', props => `${props.isLink ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.isStretched ? '100%' : '', props => !props.isLink && 'nowrap', props => props.isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.isLink && 'none', props => sizeStyles(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => colorStyles(props), props => props.isLink && 'none', StyledIcon, props => iconStyles$1(props), StyledSplitButton, props => groupStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:", ";text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{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,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", "}", ""], props => props.isLink ? 'inline' : 'inline-flex', props => !props.isLink && 'center', props => !props.isLink && 'center', props => `${props.isLink ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.isStretched ? '100%' : '', props => props.$isUnderlined ? 'underline' : 'none', props => !props.isLink && 'nowrap', props => props.isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.isLink && 'none', props => sizeStyles(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => colorStyles(props), props => props.isLink && 'none', StyledIcon, props => iconStyles$1(props), StyledSplitButton, props => groupStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -382,7 +382,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.18',
+  'data-garden-version': '9.0.0-next.19',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -416,7 +416,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.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -467,7 +467,7 @@ const StyledIconButton = styled__default.default(StyledButton).attrs(props => {
   const externalId = props['data-garden-id'];
   return {
     'data-garden-id': externalId && externalId !== COMPONENT_ID$3 ? externalId : COMPONENT_ID,
-    'data-garden-version': '9.0.0-next.18'
+    'data-garden-version': '9.0.0-next.19'
   };
 }).withConfig({
   displayName: "StyledIconButton",
@@ -512,7 +512,8 @@ const ButtonComponent = React.forwardRef((props, ref) => {
   const splitButtonContext = useSplitButtonContext();
   const computedProps = {
     ...props,
-    focusInset: props.focusInset || splitButtonContext
+    focusInset: props.focusInset || splitButtonContext,
+    $isUnderlined: props.isLink
   };
   return React__namespace.default.createElement(StyledButton, Object.assign({}, computedProps, {
     ref: ref
@@ -542,6 +543,7 @@ const Anchor = React.forwardRef((_ref, ref) => {
     children,
     isExternal,
     externalIconLabel,
+    isUnderlined = true,
     ...otherProps
   } = _ref;
   let anchorProps = otherProps;
@@ -559,7 +561,8 @@ const Anchor = React.forwardRef((_ref, ref) => {
   };
   const iconAriaLabel = reactTheming.useText(Anchor, checkProps, isExternal ? 'externalIconLabel' : 'noIconLabel', '(opens in a new tab)');
   return React__namespace.default.createElement(StyledAnchor, Object.assign({
-    ref: ref
+    ref: ref,
+    $isUnderlined: isUnderlined
   }, anchorProps), children, isExternal &&
   React__namespace.default.createElement(StyledExternalIcon, {
     role: "img",
@@ -571,6 +574,7 @@ Anchor.displayName = 'Anchor';
 Anchor.propTypes = {
   isExternal: PropTypes__default.default.bool,
   isDanger: PropTypes__default.default.bool,
+  isUnderlined: PropTypes__default.default.bool,
   externalIconLabel: PropTypes__default.default.string
 };
 

package/dist/typings/styled/StyledAnchor.d.ts

@@ -7,4 +7,4 @@
 /**
  * Accepts all `<a>` props
  */
-export declare const StyledAnchor: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("./../types").IButtonProps, never>;
+export declare const StyledAnchor: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("./StyledButton").IStyledButtonProps, never>;

package/dist/typings/styled/StyledButton.d.ts

@@ -7,10 +7,8 @@
 import { DefaultTheme, ThemeProps } from 'styled-components';
 import { IButtonProps } from '../types';
 export declare const COMPONENT_ID = "buttons.button";
-export declare const getHeight: (props: IButtonProps & ThemeProps<DefaultTheme>) => string;
-/**
- * 1. FF <input type="submit"> fix
- * 2. <a> element reset
- * 3. Shifting :focus-visible from LVHFA order to preserve `text-decoration` on hover
- */
-export declare const StyledButton: import("styled-components").StyledComponent<"button", DefaultTheme, IButtonProps, never>;
+export interface IStyledButtonProps extends IButtonProps {
+    $isUnderlined?: boolean;
+}
+export declare const getHeight: (props: IStyledButtonProps & ThemeProps<DefaultTheme>) => string;
+export declare const StyledButton: import("styled-components").StyledComponent<"button", DefaultTheme, IStyledButtonProps, never>;

package/dist/typings/styled/StyledIconButton.d.ts

@@ -5,6 +5,5 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { DefaultTheme } from 'styled-components';
-import { IButtonProps } from '../types';
 export declare const COMPONENT_ID = "buttons.icon_button";
-export declare const StyledIconButton: import("styled-components").StyledComponent<"button", DefaultTheme, IButtonProps, never>;
+export declare const StyledIconButton: import("styled-components").StyledComponent<"button", DefaultTheme, import("./StyledButton").IStyledButtonProps, never>;

package/dist/typings/types/index.d.ts

@@ -53,4 +53,6 @@ export interface IAnchorProps extends Pick<IButtonProps, 'isDanger'>, AnchorHTML
      * making that icon accessible to assistive technology
      **/
     externalIconLabel?: string;
+    /** Determines if the anchor has underline styling */
+    isUnderlined?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-buttons",
-  "version": "9.0.0-next.18",
+  "version": "9.0.0-next.19",
   "description": "Components relating to buttons in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,7 +33,7 @@
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.18",
+    "@zendeskgarden/react-theming": "^9.0.0-next.19",
     "@zendeskgarden/svg-icons": "7.1.1"
   },
   "keywords": [
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "31680e30a7c9b1f2bd1f8f711f540dfaaf4ee4ec"
+  "gitHead": "3f18fec721a25bebc274de6af38cd88ab4e63a79"
 }