@itcase/ui 1.0.57 → 1.0.58

package/dist/components/Chips.js

@@ -30,8 +30,15 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+const chipsConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    chipsConfig.appearance = newComponent;
+  }
+};
 function Chips(props) {
   const {
+    appearance,
     children,
     className,
     label,
@@ -52,6 +59,10 @@ function Chips(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
   const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'chips_size_',
     propsKey: 'size'
@@ -72,13 +83,13 @@ function Chips(props) {
     styles: chipsStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'chips', fillClass, shapeClass, borderClass, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && `chips_type_${type}`),
+    className: clsx__default.default(className, 'chips', fillClass || chipsConfig.appearance[appearance] && `fill_${chipsConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || chipsConfig.appearance[appearance] && `fill_hover_${chipsConfig.appearance[appearance].fillHoverClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && `chips_type_${type}`),
     style: chipsStyles
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "chips__inner"
   }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "chips__label",
-    textColor: labelTextColor,
+    textColor: labelTextColor || chipsConfig.appearance[appearance] && chipsConfig.appearance[appearance].labelTextColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
     textWeight: labelTextWeight,
     size: labelSize
   }, label) : /*#__PURE__*/React__default.default.createElement("div", {
@@ -116,7 +127,8 @@ Chips.propTypes = {
   type: PropTypes__default.default.string
 };
 Chips.defaultProps = {
-  label: ''
+  label: 'Chips'
 };
 
 exports.Chips = Chips;
+exports.chipsConfig = chipsConfig;

package/dist/components/Group.js

@@ -85,6 +85,10 @@ function Group(props) {
     prefix: 'width_',
     propsKey: 'width'
   });
+  const heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'height_',
+    propsKey: 'height'
+  });
   const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
@@ -110,7 +114,7 @@ function Group(props) {
     wrapper: groupWrapperStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, fillHoverClass, set && `group_set_${set}`, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
+    className: clsx__default.default(className, 'group', widthClass, heightClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, fillHoverClass, set && `group_set_${set}`, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
     "data-tour": dataTour,
     id: id,
     style: Object.assign({}, groupStyles, style),

package/dist/css/components/Choice/Choice.css

@@ -10,13 +10,15 @@
   &_shape {
     &_rounded {
       border-radius: 8px;
-      ^^&__item:first-child {
-        border-top-left-radius: 8px;
-        border-bottom-left-radius: 8px;
-      }
-      ^^&__item:last-child {
-        border-top-right-radius: 8px;
-        border-bottom-right-radius: 8px;
+      ^^&__wrapper {
+        ^^^&__item:first-child {
+          border-top-left-radius: 8px;
+          border-bottom-left-radius: 8px;
+        }
+        ^^^&__item:last-child {
+          border-top-right-radius: 8px;
+          border-bottom-right-radius: 8px;
+        }
       }
     }
     &_circular {
@@ -50,7 +52,8 @@
   &:last-child {
     border-right: 0;
   }
-  &_state_active {
+  &_active {
+    background: var(--choice-item-background-active);
   }
   & input {
     width: 100%;
@@ -75,4 +78,5 @@
 }
 :root {
   --choice-item-background-hover: var(--color-surface-secondary);
+  --choice-item-background-active: var(--color-surface-active);
 }

package/dist/css/components/Choice/css/__item/choice__item.css

@@ -11,7 +11,8 @@
   &:last-child {
     border-right: 0;
   }
-  &_state_active {
+  &_active {
+    background: var(--choice-item-background-active);
   }
   & input {
     width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.57",
+  "version": "1.0.58",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",