@spaced-out/ui-design-system 0.1.117 → 0.1.119

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.1.119](https://github.com/spaced-out/ui-design-system/compare/v0.1.118...v0.1.119) (2024-08-16)
+
+
+### Bug Fixes
+
+* disabled state fix for link with icon ([a0c3a2a](https://github.com/spaced-out/ui-design-system/commit/a0c3a2aa035e0639a625d51c95c3e96dabd2a7fa))
+
+### [0.1.118](https://github.com/spaced-out/ui-design-system/compare/v0.1.117...v0.1.118) (2024-08-05)
+
+
+### Features
+
+* 🍪 chip enhancements ([#250](https://github.com/spaced-out/ui-design-system/issues/250)) ([a18fae8](https://github.com/spaced-out/ui-design-system/commit/a18fae893703092d6221f09043e62cc86308ae67))
+
 ### [0.1.117](https://github.com/spaced-out/ui-design-system/compare/v0.1.116...v0.1.117) (2024-07-30)
 
 

package/lib/components/Chip/Chip.js

@@ -32,16 +32,42 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     iconName = '',
     iconType = 'regular',
     showStatusIndicator,
-    disableHoverState = false,
     dismissable = false,
     onDismiss = () => null,
     onClick,
     disabled,
-    ...rest
+    disableHoverState = !onClick,
+    // There is no reason for hover state to be active when there is no click handler attached
+    ...restProps
   } = _ref;
+  /**
+   * Note (Nishant): Why we are using a `div` to render a onclick element instead of a `button`?
+   *
+   * Rendering the `Chip` component as a button directly would have been ideal, as it would
+   * have naturally handled interactivity and accessibility for clickable chips(which has an onClick). However,
+   * the `Chip` component includes a `CloseIcon`, which itself is a button. Nesting a `<button>`
+   * inside another `<button>` is semantically incorrect and would lead to improper HTML structure.
+   *
+   * Instead, we use a `<div>` with `role="button"` to maintain proper semantic behavior and
+   * avoid nesting buttons. While `role="button"` provides the appropriate semantics, it does
+   * not automatically handle keyboard interactions. Therefore, we manually handle `Enter`
+   * and `Space` key events to ensure the component is fully accessible and keyboard-compliant.
+   *
+   * Although this method might seem less conventional, it simplifies implementation and ensures
+   * backward compatibility while adhering to accessibility standards.
+   */
+  const handleKeyDown = event => {
+    const {
+      key
+    } = event;
+    if (key === 'Enter' || key === ' ') {
+      event.preventDefault(); // Prevent default action for Enter and Space keys
+      onClick?.(event);
+    }
+  };
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-testid": "Chip"
-  }, rest, {
+  }, restProps, {
     ref: ref,
     className: (0, _classify.classify)(_ChipModule.default.chipWrapper, {
       [_ChipModule.default.primary]: semantic === CHIP_SEMANTIC.primary,
@@ -57,7 +83,10 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_ChipModule.default.disabled]: disabled,
       [_ChipModule.default.noHoverState]: showStatusIndicator || disableHoverState
     }, classNames?.wrapper),
-    onClick: onClick
+    onClick: onClick,
+    onKeyDown: handleKeyDown,
+    tabIndex: showStatusIndicator || disableHoverState ? undefined : 0,
+    role: showStatusIndicator || disableHoverState ? undefined : 'button'
   }), showStatusIndicator && size !== 'small' && /*#__PURE__*/React.createElement(_StatusIndicator.StatusIndicator, {
     status: semantic,
     classNames: {

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

@@ -55,6 +55,7 @@ export type SmallChipProps = {
 };
 
 export type ChipProps = MediumChipProps | SmallChipProps;
+
 export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
   React.forwardRef<ChipProps, HTMLDivElement>(
     (
@@ -66,76 +67,105 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
         iconName = '',
         iconType = 'regular',
         showStatusIndicator,
-        disableHoverState = false,
         dismissable = false,
         onDismiss = () => null,
         onClick,
         disabled,
-        ...rest
+        disableHoverState = !onClick, // There is no reason for hover state to be active when there is no click handler attached
+        ...restProps
       }: ChipProps,
       ref,
-    ): React.Node => (
-      <div
-        data-testid="Chip"
-        {...rest}
-        ref={ref}
-        className={classify(
-          css.chipWrapper,
-          {
-            [css.primary]: semantic === CHIP_SEMANTIC.primary,
-            [css.information]: semantic === CHIP_SEMANTIC.information,
-            [css.success]: semantic === CHIP_SEMANTIC.success,
-            [css.warning]: semantic === CHIP_SEMANTIC.warning,
-            [css.danger]: semantic === CHIP_SEMANTIC.danger,
-            [css.secondary]: semantic === CHIP_SEMANTIC.secondary,
-            [css.medium]: size === 'medium',
-            [css.small]: size === 'small',
-            [css.dismissable]: dismissable,
-            [css.withIcon]: !!iconName && size !== 'small',
-            [css.disabled]: disabled,
-            [css.noHoverState]: showStatusIndicator || disableHoverState,
-          },
-          classNames?.wrapper,
-        )}
-        onClick={onClick}
-      >
-        {showStatusIndicator && size !== 'small' && (
-          <StatusIndicator
-            status={semantic}
-            classNames={{
-              wrapper: classify(
-                css.statusIndicatorBlock,
-                classNames?.statusIndicator,
-              ),
-            }}
-            disabled={disabled}
-          />
-        )}
+    ): React.Node => {
+      /**
+       * Note (Nishant): Why we are using a `div` to render a onclick element instead of a `button`?
+       *
+       * Rendering the `Chip` component as a button directly would have been ideal, as it would
+       * have naturally handled interactivity and accessibility for clickable chips(which has an onClick). However,
+       * the `Chip` component includes a `CloseIcon`, which itself is a button. Nesting a `<button>`
+       * inside another `<button>` is semantically incorrect and would lead to improper HTML structure.
+       *
+       * Instead, we use a `<div>` with `role="button"` to maintain proper semantic behavior and
+       * avoid nesting buttons. While `role="button"` provides the appropriate semantics, it does
+       * not automatically handle keyboard interactions. Therefore, we manually handle `Enter`
+       * and `Space` key events to ensure the component is fully accessible and keyboard-compliant.
+       *
+       * Although this method might seem less conventional, it simplifies implementation and ensures
+       * backward compatibility while adhering to accessibility standards.
+       */
+      const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLElement>) => {
+        const {key} = event;
+        if (key === 'Enter' || key === ' ') {
+          event.preventDefault(); // Prevent default action for Enter and Space keys
+          onClick?.(event);
+        }
+      };
+
+      return (
+        <div
+          data-testid="Chip"
+          {...restProps}
+          ref={ref}
+          className={classify(
+            css.chipWrapper,
+            {
+              [css.primary]: semantic === CHIP_SEMANTIC.primary,
+              [css.information]: semantic === CHIP_SEMANTIC.information,
+              [css.success]: semantic === CHIP_SEMANTIC.success,
+              [css.warning]: semantic === CHIP_SEMANTIC.warning,
+              [css.danger]: semantic === CHIP_SEMANTIC.danger,
+              [css.secondary]: semantic === CHIP_SEMANTIC.secondary,
+              [css.medium]: size === 'medium',
+              [css.small]: size === 'small',
+              [css.dismissable]: dismissable,
+              [css.withIcon]: !!iconName && size !== 'small',
+              [css.disabled]: disabled,
+              [css.noHoverState]: showStatusIndicator || disableHoverState,
+            },
+            classNames?.wrapper,
+          )}
+          onClick={onClick}
+          onKeyDown={handleKeyDown}
+          tabIndex={showStatusIndicator || disableHoverState ? undefined : 0}
+          role={showStatusIndicator || disableHoverState ? undefined : 'button'}
+        >
+          {showStatusIndicator && size !== 'small' && (
+            <StatusIndicator
+              status={semantic}
+              classNames={{
+                wrapper: classify(
+                  css.statusIndicatorBlock,
+                  classNames?.statusIndicator,
+                ),
+              }}
+              disabled={disabled}
+            />
+          )}
 
-        {iconName && size !== 'small' && (
-          <Icon
-            className={classify(css.chipIcon, classNames?.icon)}
-            name={iconName}
-            type={iconType}
-            size="small"
-          />
-        )}
-        <Truncate>{children}</Truncate>
+          {iconName && size !== 'small' && (
+            <Icon
+              className={classify(css.chipIcon, classNames?.icon)}
+              name={iconName}
+              type={iconType}
+              size="small"
+            />
+          )}
+          <Truncate>{children}</Truncate>
 
-        {dismissable && size !== 'small' && (
-          <CloseIcon
-            className={css.dismissIcon}
-            type={iconType}
-            size="small"
-            ariaLabel="Dismiss"
-            onClick={(event) => {
-              event.stopPropagation();
-              if (!disabled && onDismiss) {
-                onDismiss(event);
-              }
-            }}
-          />
-        )}
-      </div>
-    ),
+          {dismissable && size !== 'small' && (
+            <CloseIcon
+              className={css.dismissIcon}
+              type={iconType}
+              size="small"
+              ariaLabel="Dismiss"
+              onClick={(event) => {
+                event.stopPropagation();
+                if (!disabled && onDismiss) {
+                  onDismiss(event);
+                }
+              }}
+            />
+          )}
+        </div>
+      );
+    },
   );

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

@@ -12,7 +12,8 @@
   colorGrayLightest,
   colorFillNone,
   colorTextDisabled,
-  colorFillDisabled
+  colorFillDisabled,
+  colorFocusPrimary
 ) from '../../styles/variables/_color.css';
 @value (
   spaceNone,
@@ -28,6 +29,11 @@
   size26
 ) from '../../styles/variables/_size.css';
 
+@value (
+  borderWidthNone,
+  borderWidthTertiary
+) from '../../styles/variables/_border.css';
+
 .chipWrapper {
   composes: formLabelSmall from '../../styles/typography.module.css';
   composes: motionEaseInEaseOut from '../../styles/animation.module.css';
@@ -41,6 +47,12 @@
   cursor: pointer;
 }
 
+.chipWrapper:focus {
+  outline: none;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
 .medium {
   height: size26;
   min-height: size26;

package/lib/components/Link/Link.js

@@ -115,7 +115,9 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     name: iconLeftName,
     size: iconLeftSize,
     type: iconLeftType,
-    className: _typographyModule.default[color]
+    className: (0, _classify.default)(_typographyModule.default[color], {
+      [_typographyModule.default.disabled]: disabled
+    })
   }), /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
     condition: Boolean(iconLeftName || iconRightName),
     wrapper: children => /*#__PURE__*/React.createElement("span", {

package/lib/components/Link/Link.js.flow

@@ -186,7 +186,7 @@ export const Link: React$AbstractComponent<LinkProps, ?HTMLAnchorElement> =
               name={iconLeftName}
               size={iconLeftSize}
               type={iconLeftType}
-              className={css[color]}
+              className={classify(css[color], {[css.disabled]: disabled})}
             />
           )}
 

package/package.json

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