@spaced-out/ui-design-system 0.3.18 → 0.3.19

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.19](https://github.com/spaced-out/ui-design-system/compare/v0.3.18...v0.3.19) (2025-01-27)
+
+
+### Bug Fixes
+
+* chip outline ([#316](https://github.com/spaced-out/ui-design-system/issues/316)) ([18d8467](https://github.com/spaced-out/ui-design-system/commit/18d8467fbc077dcd9e99ec4d283447e0d31dfb70))
+
 ### [0.3.18](https://github.com/spaced-out/ui-design-system/compare/v0.3.17...v0.3.18) (2025-01-23)
 
 

package/lib/components/Chip/Chip.js

@@ -100,7 +100,10 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     type: iconType,
     size: "small"
   }), /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children), dismissable && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.CloseIcon, {
-    className: _ChipModule.default.dismissIcon,
+    classNames: {
+      icon: _ChipModule.default.dismissIcon,
+      button: _ChipModule.default.dismissIconWrapper
+    },
     type: iconType,
     size: "small",
     ariaLabel: "Dismiss",

package/lib/components/Chip/Chip.js.flow

@@ -159,7 +159,10 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
 
           {dismissable && size !== 'small' && (
             <CloseIcon
-              className={css.dismissIcon}
+              classNames={{
+                icon: css.dismissIcon,
+                button: css.dismissIconWrapper,
+              }}
               type={iconType}
               size="small"
               ariaLabel="Dismiss"

package/lib/components/Chip/Chip.module.css

@@ -133,7 +133,7 @@
   padding: spaceNone spaceXSmall spaceNone spaceSmall;
 }
 
-.dismissIcon {
+.dismissIconWrapper {
   margin-left: spaceXSmall;
   cursor: pointer;
 }

package/lib/components/Icon/ClickableIcon.js

@@ -19,6 +19,9 @@ const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     size = 'medium',
     ariaLabel,
     onClick,
+    className,
+    // Deprecated for Clickable Icon
+    classNames,
     ...props
   } = _ref;
   const onKeyDownHandler = e => {
@@ -35,10 +38,11 @@ const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_ClickableIconModule.default.small]: size === 'small',
       [_ClickableIconModule.default.medium]: size === 'medium',
       [_ClickableIconModule.default.large]: size === 'large'
-    }),
+    }, classNames?.button),
     ref: ref
   }), /*#__PURE__*/React.createElement(_.Icon, _extends({
-    size: size
+    size: size,
+    className: classNames?.icon || className
   }, props)));
 });
 exports.ClickableIcon = ClickableIcon;

package/lib/components/Icon/ClickableIcon.js.flow

@@ -13,11 +13,31 @@ import {Icon} from './';
 import css from './ClickableIcon.module.css';
 
 
+type ClassNames = $ReadOnly<{
+  icon?: string,
+  button?: string,
+}>;
+
+export type ClickableIconProps = {
+  ...IconProps,
+  classNames?: ClassNames,
+};
+
 export const ClickableIcon: React$AbstractComponent<
-  IconProps,
+  ClickableIconProps,
   HTMLButtonElement,
-> = React.forwardRef<IconProps, HTMLButtonElement>(
-  ({size = 'medium', ariaLabel, onClick, ...props}: IconProps, ref) => {
+> = React.forwardRef<ClickableIconProps, HTMLButtonElement>(
+  (
+    {
+      size = 'medium',
+      ariaLabel,
+      onClick,
+      className, // Deprecated for Clickable Icon
+      classNames,
+      ...props
+    }: ClickableIconProps,
+    ref,
+  ) => {
     const onKeyDownHandler = (e) => {
       if (e.key === 'Enter') {
         e.preventDefault();
@@ -30,14 +50,22 @@ export const ClickableIcon: React$AbstractComponent<
         onClick={onClick}
         onKeyDown={onKeyDownHandler}
         ariaLabel={ariaLabel}
-        className={classify(css.button, {
-          [css.small]: size === 'small',
-          [css.medium]: size === 'medium',
-          [css.large]: size === 'large',
-        })}
+        className={classify(
+          css.button,
+          {
+            [css.small]: size === 'small',
+            [css.medium]: size === 'medium',
+            [css.large]: size === 'large',
+          },
+          classNames?.button,
+        )}
         ref={ref}
       >
-        <Icon size={size} {...props} />
+        <Icon
+          size={size}
+          className={classNames?.icon || className}
+          {...props}
+        />
       </UnstyledButton>
     );
   },
@@ -48,8 +76,9 @@ export type CloseIconProps = {
   type?: IconType,
   color?: ColorTypes,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  className?: string,
+  className?: string, // Deprecated for Clickable Icon
   ariaLabel?: string,
+  classNames?: ClassNames,
 };
 
 export const CloseIcon: React$AbstractComponent<

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.18",
+  "version": "0.3.19",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {