@pingux/astro 1.0.0-alpha.13 → 1.0.0-alpha.14

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.0.0-alpha.14](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.13...@pingux/astro@1.0.0-alpha.14) (2022-01-10)
+
+
+### Bug Fixes
+
+* [UIP-4953] Chip component cleanup ([d2f10ec](https://gitlab.corp.pingidentity.com/ux/pingux/commit/d2f10ece82749d723ac35b6262c1b918f81abba1))
+
+
+
+
+
 # [1.0.0-alpha.13](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.12...@pingux/astro@1.0.0-alpha.13) (2022-01-10)
 
 

package/lib/cjs/components/Chip/Chip.js

@@ -18,6 +18,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _ChipContext = require("./ChipContext");
+
 var _Box = _interopRequireDefault(require("../Box/Box"));
 
 var _Text = _interopRequireDefault(require("../Text/Text"));
@@ -32,21 +34,31 @@ var _react2 = require("@emotion/react");
  * available [props from Theme-UI](https://theme-ui.com/sx-prop).
 */
 var Chip = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  var children = props.children,
+  var bg = props.bg,
+      children = props.children,
       textColor = props.textColor,
       textProps = props.textProps,
-      label = props.label;
-  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+      label = props.label,
+      isUppercase = props.isUppercase;
+  return (0, _react2.jsx)(_ChipContext.ChipContext.Provider, {
+    value: {
+      bg: bg
+    }
+  }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     isRow: true,
     variant: "boxes.chip",
+    sx: isUppercase && {
+      paddingBottom: '3px'
+    },
     ref: ref
   }, props), (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
     variant: "label",
-    sx: {
-      textTransform: 'uppercase'
-    },
-    color: textColor
-  }, textProps), label), children);
+    color: textColor,
+    sx: isUppercase && {
+      textTransform: 'uppercase',
+      fontSize: '11px'
+    }
+  }, textProps), label), children));
 });
 
 Chip.propTypes = {
@@ -60,11 +72,15 @@ Chip.propTypes = {
   label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
 
   /** Props object that is spread directly into the textfield. */
-  textProps: _propTypes["default"].shape({})
+  textProps: _propTypes["default"].shape({}),
+
+  /** When true, display chip label as uppercase. */
+  isUppercase: _propTypes["default"].bool
 };
 Chip.defaultProps = {
   textColor: 'white',
-  bg: colors.neutral[10]
+  bg: colors.neutral[10],
+  isUppercase: false
 };
 var _default = Chip;
 exports["default"] = _default;

package/lib/cjs/components/Chip/Chip.stories.js

@@ -20,9 +20,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 
-var _Chip = _interopRequireDefault(require("../Chip/Chip"));
+var _ContentCopyIcon = _interopRequireDefault(require("mdi-react/ContentCopyIcon"));
 
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
+
+var _Chip = _interopRequireDefault(require("../Chip"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
 
 var _colors = require("../../styles/colors.js");
 
@@ -61,6 +67,12 @@ var _default = {
       control: {
         type: 'text'
       }
+    },
+    isUppercase: {
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
     }
   }
 };
@@ -87,15 +99,42 @@ var ChipWithCustomColors = function ChipWithCustomColors() {
 exports.ChipWithCustomColors = ChipWithCustomColors;
 
 var ChipWithIcon = function ChipWithIcon() {
-  return (0, _react2.jsx)(_Chip["default"], {
-    label: "Chip with Icon",
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Chip["default"], {
+    label: "Chip with Icon Button",
     bg: "navy"
+  }, (0, _react2.jsx)(_IconButton["default"], {
+    "aria-label": "Clear Chip with Icon Button",
+    variant: "inverted"
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _CloseIcon["default"],
     ml: "xs",
+    size: "14px"
+  }))), (0, _react2.jsx)("div", {
+    style: {
+      padding: '5px'
+    }
+  }), (0, _react2.jsx)(_Chip["default"], {
+    label: "Chip with Icon Button"
+  }, (0, _react2.jsx)(_IconButton["default"], {
+    "aria-label": "Clear Chip with Icon Button",
+    variant: "inverted"
+  }, (0, _react2.jsx)(_Icon["default"], {
+    icon: _EarthIcon["default"],
+    ml: "xs",
+    size: "14px"
+  }))), (0, _react2.jsx)("div", {
+    style: {
+      padding: '5px'
+    }
+  }), (0, _react2.jsx)(_Chip["default"], {
+    label: "Chip with Icon",
+    bg: "green"
+  }, (0, _react2.jsx)(_Icon["default"], {
+    icon: _ContentCopyIcon["default"],
+    ml: "xs",
     size: "14px",
     color: "white"
-  }));
+  })));
 };
 
 exports.ChipWithIcon = ChipWithIcon;

package/lib/cjs/components/Chip/Chip.test.js

@@ -45,4 +45,13 @@ test('renders children within Chip component', function () {
   var mockedChildren = _react2.screen.getByRole('button');
 
   expect(mockedChildren).toBeInTheDocument();
+});
+test('renders Chip component with uppercase', function () {
+  var label = 'uppercase';
+  var isUppercase = true;
+  getComponent({
+    label: label,
+    isUppercase: isUppercase
+  });
+  expect(_react2.screen.queryByText('uppercase')).toHaveStyleRule('text-transform', 'uppercase');
 });

package/lib/cjs/components/Chip/ChipContext.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.ChipContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var defaultValue = 'inherit';
+
+var ChipContext = /*#__PURE__*/_react["default"].createContext(defaultValue);
+
+exports.ChipContext = ChipContext;

package/lib/cjs/components/IconButton/IconButton.js

@@ -48,6 +48,8 @@ var _utils = require("@react-aria/utils");
 
 var _hooks = require("../../hooks");
 
+var _ChipContext = require("../Chip/ChipContext");
+
 var _TooltipTrigger = _interopRequireWildcard(require("../TooltipTrigger"));
 
 var _react2 = require("@emotion/react");
@@ -82,6 +84,9 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return buttonRef.current;
   });
 
+  var _useContext = (0, _react.useContext)(_ChipContext.ChipContext),
+      chipBg = _useContext.bg;
+
   var _usePress = (0, _interactions.usePress)(_objectSpread({
     ref: buttonRef
   }, props)),
@@ -110,7 +115,12 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     tabIndex: 0,
     ref: buttonRef,
     className: classNames,
-    "aria-label": ariaLabel || 'Icon Button'
+    "aria-label": ariaLabel || 'Icon Button',
+    sx: chipBg && isHovered && {
+      'path': {
+        fill: chipBg
+      }
+    }
   }, others, (0, _utils.mergeProps)(hoverProps, focusProps, pressProps)), children);
 
   if (title) {

package/lib/cjs/layouts/ListLayout.stories.js

@@ -301,7 +301,8 @@ var Default = function Default() {
     }, (0, _react2.jsx)(_index.Chip, {
       bg: "success.light",
       textColor: "success.dark",
-      label: "New"
+      label: "New",
+      isUppercase: true
     })) : null)), (0, _react2.jsx)(_index.Box, {
       isRow: true,
       alignSelf: "center"

package/lib/cjs/recipes/InputBoxWithLinkedChip.stories.js

@@ -52,7 +52,7 @@ var Default = function Default() {
     }, (0, _react2.jsx)(_Icon["default"], {
       icon: _LinkVariantIcon["default"],
       color: "#253746",
-      size: 15,
+      size: 12,
       alignSelf: "center",
       mr: "xs"
     }), (0, _react2.jsx)(_Text["default"], {

package/lib/cjs/styles/variants/boxes.js

@@ -123,14 +123,27 @@ var listBoxSectionTitle = {
 };
 var chip = {
   cursor: 'pointer',
-  height: '15px',
-  p: '10px',
+  p: '3px 5px 4px 5px',
   alignItems: 'center',
   justifyContent: 'center',
   minWidth: '50px',
   alignSelf: 'flex-start',
   display: 'inline-flex !important',
-  borderRadius: '5px'
+  borderRadius: '5px',
+  fontWeight: 1,
+  '& button': {
+    backgroundColor: 'transparent',
+    marginLeft: 'xs',
+    marginTop: '1px',
+    padding: '0',
+    '&.is-hovered': {
+      backgroundColor: 'white'
+    },
+    '& .mdi-icon': {
+      marginLeft: '0',
+      padding: '2px'
+    }
+  }
 };
 var inputInContainerSlot = {
   position: 'absolute',

package/lib/components/Chip/Chip.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
+import { ChipContext } from './ChipContext';
 import Box from '../Box/Box';
 import Text from '../Text/Text';
 import * as colors from '../../styles/colors';
@@ -12,21 +13,31 @@ import * as colors from '../../styles/colors';
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Chip = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
+  var bg = props.bg,
+      children = props.children,
       textColor = props.textColor,
       textProps = props.textProps,
-      label = props.label;
-  return ___EmotionJSX(Box, _extends({
+      label = props.label,
+      isUppercase = props.isUppercase;
+  return ___EmotionJSX(ChipContext.Provider, {
+    value: {
+      bg: bg
+    }
+  }, ___EmotionJSX(Box, _extends({
     isRow: true,
     variant: "boxes.chip",
+    sx: isUppercase && {
+      paddingBottom: '3px'
+    },
     ref: ref
   }, props), ___EmotionJSX(Text, _extends({
     variant: "label",
-    sx: {
-      textTransform: 'uppercase'
-    },
-    color: textColor
-  }, textProps), label), children);
+    color: textColor,
+    sx: isUppercase && {
+      textTransform: 'uppercase',
+      fontSize: '11px'
+    }
+  }, textProps), label), children));
 });
 Chip.propTypes = {
   /** The text color of the chip. */
@@ -39,10 +50,14 @@ Chip.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 
   /** Props object that is spread directly into the textfield. */
-  textProps: PropTypes.shape({})
+  textProps: PropTypes.shape({}),
+
+  /** When true, display chip label as uppercase. */
+  isUppercase: PropTypes.bool
 };
 Chip.defaultProps = {
   textColor: 'white',
-  bg: colors.neutral[10]
+  bg: colors.neutral[10],
+  isUppercase: false
 };
 export default Chip;

package/lib/components/Chip/Chip.stories.js

@@ -3,8 +3,11 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
 import Clear from 'mdi-react/CloseIcon';
-import Chip from '../Chip/Chip';
-import Icon from '../Icon/Icon';
+import ContentCopy from 'mdi-react/ContentCopyIcon';
+import Earth from 'mdi-react/EarthIcon';
+import Chip from '../Chip';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
 import { flatColorList } from '../../styles/colors.js';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -40,6 +43,12 @@ export default {
       control: {
         type: 'text'
       }
+    },
+    isUppercase: {
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
     }
   }
 };
@@ -59,13 +68,40 @@ export var ChipWithCustomColors = function ChipWithCustomColors() {
   });
 };
 export var ChipWithIcon = function ChipWithIcon() {
-  return ___EmotionJSX(Chip, {
-    label: "Chip with Icon",
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Chip, {
+    label: "Chip with Icon Button",
     bg: "navy"
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "Clear Chip with Icon Button",
+    variant: "inverted"
   }, ___EmotionJSX(Icon, {
     icon: Clear,
     ml: "xs",
+    size: "14px"
+  }))), ___EmotionJSX("div", {
+    style: {
+      padding: '5px'
+    }
+  }), ___EmotionJSX(Chip, {
+    label: "Chip with Icon Button"
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "Clear Chip with Icon Button",
+    variant: "inverted"
+  }, ___EmotionJSX(Icon, {
+    icon: Earth,
+    ml: "xs",
+    size: "14px"
+  }))), ___EmotionJSX("div", {
+    style: {
+      padding: '5px'
+    }
+  }), ___EmotionJSX(Chip, {
+    label: "Chip with Icon",
+    bg: "green"
+  }, ___EmotionJSX(Icon, {
+    icon: ContentCopy,
+    ml: "xs",
     size: "14px",
     color: "white"
-  }));
+  })));
 };

package/lib/components/Chip/Chip.test.js

@@ -31,4 +31,13 @@ test('renders children within Chip component', function () {
   });
   var mockedChildren = screen.getByRole('button');
   expect(mockedChildren).toBeInTheDocument();
+});
+test('renders Chip component with uppercase', function () {
+  var label = 'uppercase';
+  var isUppercase = true;
+  getComponent({
+    label: label,
+    isUppercase: isUppercase
+  });
+  expect(screen.queryByText('uppercase')).toHaveStyleRule('text-transform', 'uppercase');
 });

package/lib/components/Chip/ChipContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+var defaultValue = 'inherit';
+export var ChipContext = /*#__PURE__*/React.createContext(defaultValue);

package/lib/components/IconButton/IconButton.js

@@ -14,13 +14,14 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { IconButton as ThemeUIIconButton } from 'theme-ui';
 import { useFocusRing } from '@react-aria/focus';
 import { Pressable, useHover, usePress } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
+import { ChipContext } from '../Chip/ChipContext';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
 /**
  * Convenience wrapper for a Button + Icon. This component applies specific styles necessary for
@@ -51,6 +52,9 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
     return buttonRef.current;
   });
 
+  var _useContext = useContext(ChipContext),
+      chipBg = _useContext.bg;
+
   var _usePress = usePress(_objectSpread({
     ref: buttonRef
   }, props)),
@@ -80,7 +84,12 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
     tabIndex: 0,
     ref: buttonRef,
     className: classNames,
-    "aria-label": ariaLabel || 'Icon Button'
+    "aria-label": ariaLabel || 'Icon Button',
+    sx: chipBg && isHovered && {
+      'path': {
+        fill: chipBg
+      }
+    }
   }, others, mergeProps(hoverProps, focusProps, pressProps)), children);
 
   if (title) {

package/lib/layouts/ListLayout.stories.js

@@ -274,7 +274,8 @@ export var Default = function Default() {
     }, ___EmotionJSX(Chip, {
       bg: "success.light",
       textColor: "success.dark",
-      label: "New"
+      label: "New",
+      isUppercase: true
     })) : null)), ___EmotionJSX(Box, {
       isRow: true,
       alignSelf: "center"

package/lib/recipes/InputBoxWithLinkedChip.stories.js

@@ -30,7 +30,7 @@ export var Default = function Default() {
     }, ___EmotionJSX(Icon, {
       icon: Link,
       color: "#253746",
-      size: 15,
+      size: 12,
       alignSelf: "center",
       mr: "xs"
     }), ___EmotionJSX(Text, {

package/lib/styles/variants/boxes.js

@@ -102,14 +102,27 @@ var listBoxSectionTitle = {
 };
 var chip = {
   cursor: 'pointer',
-  height: '15px',
-  p: '10px',
+  p: '3px 5px 4px 5px',
   alignItems: 'center',
   justifyContent: 'center',
   minWidth: '50px',
   alignSelf: 'flex-start',
   display: 'inline-flex !important',
-  borderRadius: '5px'
+  borderRadius: '5px',
+  fontWeight: 1,
+  '& button': {
+    backgroundColor: 'transparent',
+    marginLeft: 'xs',
+    marginTop: '1px',
+    padding: '0',
+    '&.is-hovered': {
+      backgroundColor: 'white'
+    },
+    '& .mdi-icon': {
+      marginLeft: '0',
+      padding: '2px'
+    }
+  }
 };
 var inputInContainerSlot = {
   position: 'absolute',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.0.0-alpha.13",
+  "version": "1.0.0-alpha.14",
   "description": "PingUX themeable React component library",
   "author": "uxdev@pingidentity.com",
   "license": "Apache-2.0",