@zendeskgarden/react-tags 9.1.0 → 9.1.2

package/dist/esm/elements/Tag.js

@@ -15,15 +15,21 @@ import { Avatar } from './Avatar.js';
 
 const TagComponent = forwardRef((_ref, ref) => {
   let {
+    isPill,
+    isRound,
+    isRegular,
     size,
     hue,
-    ...otherProps
+    ...other
   } = _ref;
   return React__default.createElement(StyledTag, Object.assign({
-    ref: ref,
-    size: size,
-    hue: hue
-  }, otherProps));
+    $hue: hue,
+    $isPill: isPill,
+    $isRegular: isRegular,
+    $isRound: isRound,
+    $size: size,
+    ref: ref
+  }, other));
 });
 TagComponent.displayName = 'Tag';
 TagComponent.propTypes = {

package/dist/esm/styled/StyledAvatar.js

@@ -10,7 +10,7 @@ import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-th
 const COMPONENT_ID = 'tags.avatar';
 const StyledAvatar = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.0'
+  'data-garden-version': '9.1.2'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-3kdmgt-0"

package/dist/esm/styled/StyledClose.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'tags.close';
 const StyledClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.0'
+  'data-garden-version': '9.1.2'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-d6lrpn-0"

package/dist/esm/styled/StyledTag.js

@@ -14,16 +14,16 @@ const COMPONENT_ID = 'tags.tag_view';
 const colorStyles = _ref => {
   let {
     theme,
-    hue
+    $hue
   } = _ref;
   let backgroundColor;
   let foregroundColor;
-  if (hue) {
+  if ($hue) {
     foregroundColor = getColor({
       theme,
       variable: 'foreground.onEmphasis'
     });
-    switch (hue) {
+    switch ($hue) {
       case 'grey':
       case 'neutralHue':
         backgroundColor = getColor({
@@ -101,7 +101,7 @@ const colorStyles = _ref => {
           const variable = 'foreground.onEmphasis';
           backgroundColor = getColor({
             theme,
-            hue
+            hue: $hue
           });
           foregroundColor = readableColor(backgroundColor, getColor({
             theme: darkTheme,
@@ -135,63 +135,69 @@ const colorStyles = _ref => {
     selector: '&:focus'
   }));
 };
-const sizeStyles = props => {
+const sizeStyles = _ref2 => {
+  let {
+    $isPill,
+    $isRound,
+    $size,
+    theme
+  } = _ref2;
   let borderRadius;
   let padding;
   let height;
   let fontSize;
   let minWidth;
   let avatarSize;
-  if (props.size === 'small') {
-    borderRadius = props.theme.borderRadii.sm;
-    padding = props.theme.space.base;
-    height = props.theme.space.base * 4;
-    fontSize = props.theme.fontSizes.xs;
+  if ($size === 'small') {
+    borderRadius = theme.borderRadii.sm;
+    padding = theme.space.base;
+    height = theme.space.base * 4;
+    fontSize = theme.fontSizes.xs;
     avatarSize = 0;
-  } else if (props.size === 'large') {
-    borderRadius = props.theme.borderRadii.md;
-    padding = props.theme.space.base * 3;
-    height = props.theme.space.base * 8;
-    fontSize = props.theme.fontSizes.sm;
-    avatarSize = props.theme.space.base * 6;
+  } else if ($size === 'large') {
+    borderRadius = theme.borderRadii.md;
+    padding = theme.space.base * 3;
+    height = theme.space.base * 8;
+    fontSize = theme.fontSizes.sm;
+    avatarSize = theme.space.base * 6;
   } else {
-    borderRadius = props.theme.borderRadii.sm;
-    padding = props.theme.space.base * 2;
-    height = props.theme.space.base * 5;
-    fontSize = props.theme.fontSizes.sm;
-    avatarSize = props.theme.space.base * 4;
+    borderRadius = theme.borderRadii.sm;
+    padding = theme.space.base * 2;
+    height = theme.space.base * 5;
+    fontSize = theme.fontSizes.sm;
+    avatarSize = theme.space.base * 4;
   }
-  let avatarBorderRadius = props.size === 'large' ? math(`${borderRadius} - 1`) : borderRadius;
+  let avatarBorderRadius = $size === 'large' ? math(`${borderRadius} - 1`) : borderRadius;
   const avatarMargin = (height - avatarSize) / 2;
-  const avatarTextMargin = props.isRound ? avatarMargin : avatarMargin * 2;
-  if (props.isRound) {
+  const avatarTextMargin = $isRound ? avatarMargin : avatarMargin * 2;
+  if ($isRound) {
     borderRadius = '50%';
     padding = 0;
     minWidth = height;
     avatarBorderRadius = '50%';
-  } else if (props.isPill) {
+  } else if ($isPill) {
     borderRadius = '100px';
     avatarBorderRadius = '50%';
-    if (props.size === 'small') {
-      padding = props.theme.space.base * 1.5;
-      minWidth = props.theme.space.base * 6;
-    } else if (props.size === 'large') {
-      minWidth = props.theme.space.base * 12;
+    if ($size === 'small') {
+      padding = theme.space.base * 1.5;
+      minWidth = theme.space.base * 6;
+    } else if ($size === 'large') {
+      minWidth = theme.space.base * 12;
     } else {
-      minWidth = props.theme.space.base * 7.5;
+      minWidth = theme.space.base * 7.5;
     }
   }
-  return css(["border-radius:", ";padding:0 ", "px;min-width:", ";height:", "px;line-height:", ";font-size:", ";& > *{width:100%;min-width:", ";}& ", "{margin-", ":-", "px;margin-", ":", "px;border-radius:", ";width:", "px;min-width:", "px;height:", "px;}& ", "{margin-", ":-", "px;border-radius:", ";width:", "px;height:", "px;}"], borderRadius, padding, minWidth ? `${minWidth}px` : `calc(${padding * 2}px + 1ch)`, height, getLineHeight(height, fontSize), fontSize, minWidth ? `${minWidth - padding * 2}px` : '1ch', StyledAvatar, props.theme.rtl ? 'right' : 'left', padding - avatarMargin, props.theme.rtl ? 'left' : 'right', avatarTextMargin, avatarBorderRadius, avatarSize, avatarSize, avatarSize, StyledClose, props.theme.rtl ? 'left' : 'right', padding, borderRadius, height, height);
+  return css(["border-radius:", ";padding:0 ", "px;min-width:", ";height:", "px;line-height:", ";font-size:", ";& > *{width:100%;min-width:", ";}& ", "{margin-", ":-", "px;margin-", ":", "px;border-radius:", ";width:", "px;min-width:", "px;height:", "px;}& ", "{margin-", ":-", "px;border-radius:", ";width:", "px;height:", "px;}"], borderRadius, padding, minWidth ? `${minWidth}px` : `calc(${padding * 2}px + 1ch)`, height, getLineHeight(height, fontSize), fontSize, minWidth ? `${minWidth - padding * 2}px` : '1ch', StyledAvatar, theme.rtl ? 'right' : 'left', padding - avatarMargin, theme.rtl ? 'left' : 'right', avatarTextMargin, avatarBorderRadius, avatarSize, avatarSize, avatarSize, StyledClose, theme.rtl ? 'left' : 'right', padding, borderRadius, height, height);
 };
 const StyledTag = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.0'
+  'data-garden-version': '9.1.2'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1jvbe03-0"
-})(["display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:", ";transition:box-shadow 0.1s ease-in-out;box-sizing:border-box;border:0;max-width:100%;overflow:hidden;vertical-align:middle;text-decoration:none;white-space:nowrap;font-weight:", ";direction:", ";", ";&:hover{cursor:default;text-decoration:none;}&:link:hover,&:visited:hover{cursor:pointer;}&:any-link:hover{cursor:pointer;}", "{text-decoration:none;}", ";& > *{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;}& b{font-weight:", ";}& ", "{display:", ";}& ", "{display:", ";}", ";"], props => props.isRound && 'center', props => !props.isRegular && props.theme.fontWeights.semibold, props => props.theme.rtl ? 'rtl' : 'ltr', props => sizeStyles(props), SELECTOR_FOCUS_VISIBLE, props => colorStyles(props), props => props.theme.fontWeights.semibold, StyledAvatar, props => (props.isRound || props.size === 'small') && 'none', StyledClose, props => props.isRound && 'none', props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:", ";transition:box-shadow 0.1s ease-in-out;box-sizing:border-box;border:0;max-width:100%;overflow:hidden;vertical-align:middle;text-decoration:none;white-space:nowrap;font-weight:", ";direction:", ";", ";&:hover{cursor:default;text-decoration:none;}&:link:hover,&:visited:hover{cursor:pointer;}&:any-link:hover{cursor:pointer;}", "{text-decoration:none;}", ";& > *{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;}& b{font-weight:", ";}& ", "{display:", ";}& ", "{display:", ";}", ";"], props => props.$isRound && 'center', props => !props.$isRegular && props.theme.fontWeights.semibold, props => props.theme.rtl ? 'rtl' : 'ltr', props => sizeStyles(props), SELECTOR_FOCUS_VISIBLE, props => colorStyles(props), props => props.theme.fontWeights.semibold, StyledAvatar, props => (props.$isRound || props.$size === 'small') && 'none', StyledClose, props => props.$isRound && 'none', props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledTag.defaultProps = {
-  size: 'medium',
+  $size: 'medium',
   theme: DEFAULT_THEME
 };
 

package/dist/index.cjs.js

@@ -41,7 +41,7 @@ const SIZE = ['small', 'medium', 'large'];
 const COMPONENT_ID$2 = 'tags.avatar';
 const StyledAvatar = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.1.0'
+  'data-garden-version': '9.1.2'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-3kdmgt-0"
@@ -50,7 +50,7 @@ const StyledAvatar = styled__default.default(reactTheming.StyledBaseIcon).attrs(
 const COMPONENT_ID$1 = 'tags.close';
 const StyledClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.1.0'
+  'data-garden-version': '9.1.2'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-d6lrpn-0"
@@ -60,16 +60,16 @@ const COMPONENT_ID = 'tags.tag_view';
 const colorStyles = _ref => {
   let {
     theme,
-    hue
+    $hue
   } = _ref;
   let backgroundColor;
   let foregroundColor;
-  if (hue) {
+  if ($hue) {
     foregroundColor = reactTheming.getColor({
       theme,
       variable: 'foreground.onEmphasis'
     });
-    switch (hue) {
+    switch ($hue) {
       case 'grey':
       case 'neutralHue':
         backgroundColor = reactTheming.getColor({
@@ -147,7 +147,7 @@ const colorStyles = _ref => {
           const variable = 'foreground.onEmphasis';
           backgroundColor = reactTheming.getColor({
             theme,
-            hue
+            hue: $hue
           });
           foregroundColor = polished.readableColor(backgroundColor, reactTheming.getColor({
             theme: darkTheme,
@@ -181,63 +181,69 @@ const colorStyles = _ref => {
     selector: '&:focus'
   }));
 };
-const sizeStyles = props => {
+const sizeStyles = _ref2 => {
+  let {
+    $isPill,
+    $isRound,
+    $size,
+    theme
+  } = _ref2;
   let borderRadius;
   let padding;
   let height;
   let fontSize;
   let minWidth;
   let avatarSize;
-  if (props.size === 'small') {
-    borderRadius = props.theme.borderRadii.sm;
-    padding = props.theme.space.base;
-    height = props.theme.space.base * 4;
-    fontSize = props.theme.fontSizes.xs;
+  if ($size === 'small') {
+    borderRadius = theme.borderRadii.sm;
+    padding = theme.space.base;
+    height = theme.space.base * 4;
+    fontSize = theme.fontSizes.xs;
     avatarSize = 0;
-  } else if (props.size === 'large') {
-    borderRadius = props.theme.borderRadii.md;
-    padding = props.theme.space.base * 3;
-    height = props.theme.space.base * 8;
-    fontSize = props.theme.fontSizes.sm;
-    avatarSize = props.theme.space.base * 6;
+  } else if ($size === 'large') {
+    borderRadius = theme.borderRadii.md;
+    padding = theme.space.base * 3;
+    height = theme.space.base * 8;
+    fontSize = theme.fontSizes.sm;
+    avatarSize = theme.space.base * 6;
   } else {
-    borderRadius = props.theme.borderRadii.sm;
-    padding = props.theme.space.base * 2;
-    height = props.theme.space.base * 5;
-    fontSize = props.theme.fontSizes.sm;
-    avatarSize = props.theme.space.base * 4;
+    borderRadius = theme.borderRadii.sm;
+    padding = theme.space.base * 2;
+    height = theme.space.base * 5;
+    fontSize = theme.fontSizes.sm;
+    avatarSize = theme.space.base * 4;
   }
-  let avatarBorderRadius = props.size === 'large' ? polished.math(`${borderRadius} - 1`) : borderRadius;
+  let avatarBorderRadius = $size === 'large' ? polished.math(`${borderRadius} - 1`) : borderRadius;
   const avatarMargin = (height - avatarSize) / 2;
-  const avatarTextMargin = props.isRound ? avatarMargin : avatarMargin * 2;
-  if (props.isRound) {
+  const avatarTextMargin = $isRound ? avatarMargin : avatarMargin * 2;
+  if ($isRound) {
     borderRadius = '50%';
     padding = 0;
     minWidth = height;
     avatarBorderRadius = '50%';
-  } else if (props.isPill) {
+  } else if ($isPill) {
     borderRadius = '100px';
     avatarBorderRadius = '50%';
-    if (props.size === 'small') {
-      padding = props.theme.space.base * 1.5;
-      minWidth = props.theme.space.base * 6;
-    } else if (props.size === 'large') {
-      minWidth = props.theme.space.base * 12;
+    if ($size === 'small') {
+      padding = theme.space.base * 1.5;
+      minWidth = theme.space.base * 6;
+    } else if ($size === 'large') {
+      minWidth = theme.space.base * 12;
     } else {
-      minWidth = props.theme.space.base * 7.5;
+      minWidth = theme.space.base * 7.5;
     }
   }
-  return styled.css(["border-radius:", ";padding:0 ", "px;min-width:", ";height:", "px;line-height:", ";font-size:", ";& > *{width:100%;min-width:", ";}& ", "{margin-", ":-", "px;margin-", ":", "px;border-radius:", ";width:", "px;min-width:", "px;height:", "px;}& ", "{margin-", ":-", "px;border-radius:", ";width:", "px;height:", "px;}"], borderRadius, padding, minWidth ? `${minWidth}px` : `calc(${padding * 2}px + 1ch)`, height, reactTheming.getLineHeight(height, fontSize), fontSize, minWidth ? `${minWidth - padding * 2}px` : '1ch', StyledAvatar, props.theme.rtl ? 'right' : 'left', padding - avatarMargin, props.theme.rtl ? 'left' : 'right', avatarTextMargin, avatarBorderRadius, avatarSize, avatarSize, avatarSize, StyledClose, props.theme.rtl ? 'left' : 'right', padding, borderRadius, height, height);
+  return styled.css(["border-radius:", ";padding:0 ", "px;min-width:", ";height:", "px;line-height:", ";font-size:", ";& > *{width:100%;min-width:", ";}& ", "{margin-", ":-", "px;margin-", ":", "px;border-radius:", ";width:", "px;min-width:", "px;height:", "px;}& ", "{margin-", ":-", "px;border-radius:", ";width:", "px;height:", "px;}"], borderRadius, padding, minWidth ? `${minWidth}px` : `calc(${padding * 2}px + 1ch)`, height, reactTheming.getLineHeight(height, fontSize), fontSize, minWidth ? `${minWidth - padding * 2}px` : '1ch', StyledAvatar, theme.rtl ? 'right' : 'left', padding - avatarMargin, theme.rtl ? 'left' : 'right', avatarTextMargin, avatarBorderRadius, avatarSize, avatarSize, avatarSize, StyledClose, theme.rtl ? 'left' : 'right', padding, borderRadius, height, height);
 };
 const StyledTag = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.0'
+  'data-garden-version': '9.1.2'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1jvbe03-0"
-})(["display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:", ";transition:box-shadow 0.1s ease-in-out;box-sizing:border-box;border:0;max-width:100%;overflow:hidden;vertical-align:middle;text-decoration:none;white-space:nowrap;font-weight:", ";direction:", ";", ";&:hover{cursor:default;text-decoration:none;}&:link:hover,&:visited:hover{cursor:pointer;}&:any-link:hover{cursor:pointer;}", "{text-decoration:none;}", ";& > *{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;}& b{font-weight:", ";}& ", "{display:", ";}& ", "{display:", ";}", ";"], props => props.isRound && 'center', props => !props.isRegular && props.theme.fontWeights.semibold, props => props.theme.rtl ? 'rtl' : 'ltr', props => sizeStyles(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => colorStyles(props), props => props.theme.fontWeights.semibold, StyledAvatar, props => (props.isRound || props.size === 'small') && 'none', StyledClose, props => props.isRound && 'none', props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:", ";transition:box-shadow 0.1s ease-in-out;box-sizing:border-box;border:0;max-width:100%;overflow:hidden;vertical-align:middle;text-decoration:none;white-space:nowrap;font-weight:", ";direction:", ";", ";&:hover{cursor:default;text-decoration:none;}&:link:hover,&:visited:hover{cursor:pointer;}&:any-link:hover{cursor:pointer;}", "{text-decoration:none;}", ";& > *{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;}& b{font-weight:", ";}& ", "{display:", ";}& ", "{display:", ";}", ";"], props => props.$isRound && 'center', props => !props.$isRegular && props.theme.fontWeights.semibold, props => props.theme.rtl ? 'rtl' : 'ltr', props => sizeStyles(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => colorStyles(props), props => props.theme.fontWeights.semibold, StyledAvatar, props => (props.$isRound || props.$size === 'small') && 'none', StyledClose, props => props.$isRound && 'none', props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledTag.defaultProps = {
-  size: 'medium',
+  $size: 'medium',
   theme: reactTheming.DEFAULT_THEME
 };
 
@@ -277,15 +283,21 @@ const Avatar = AvatarComponent;
 
 const TagComponent = React.forwardRef((_ref, ref) => {
   let {
+    isPill,
+    isRound,
+    isRegular,
     size,
     hue,
-    ...otherProps
+    ...other
   } = _ref;
   return React__namespace.default.createElement(StyledTag, Object.assign({
-    ref: ref,
-    size: size,
-    hue: hue
-  }, otherProps));
+    $hue: hue,
+    $isPill: isPill,
+    $isRegular: isRegular,
+    $isRound: isRound,
+    $size: size,
+    ref: ref
+  }, other));
 });
 TagComponent.displayName = 'Tag';
 TagComponent.propTypes = {

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

@@ -4,6 +4,14 @@
  * 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 { DefaultTheme } from 'styled-components';
+import { ThemeProps, DefaultTheme } from 'styled-components';
 import { ITagProps } from '../types';
-export declare const StyledTag: import("styled-components").StyledComponent<"div", DefaultTheme, ITagProps, never>;
+interface IStyledTagProps extends ThemeProps<DefaultTheme> {
+    $hue?: ITagProps['hue'];
+    $isPill?: ITagProps['isPill'];
+    $isRegular?: ITagProps['isRegular'];
+    $isRound?: ITagProps['isRound'];
+    $size?: ITagProps['size'];
+}
+export declare const StyledTag: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledTagProps, never>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tags",
-  "version": "9.1.0",
+  "version": "9.1.2",
   "description": "Components relating to tags in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -26,13 +26,13 @@
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": ">=9.0.0-next",
+    "@zendeskgarden/react-theming": ">=9.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.1.0",
+    "@zendeskgarden/react-theming": "^9.1.2",
     "@zendeskgarden/svg-icons": "7.3.0"
   },
   "keywords": [
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a2842d18615ad057d75988fde4df5a0c79d2714e"
+  "gitHead": "dd7b2e7fb6747ef39a028b4e7b9924c2098deea0"
 }