@spaced-out/ui-design-system 0.3.41 → 0.3.43

package/lib/components/DateRangePicker/DateRangeWrapper.js.flow

@@ -18,6 +18,7 @@ import classify from '../../utils/classify';
 import {
   addTimezoneEndOfDay,
   addTimezoneStartOfDay,
+  getFormattedDate,
   isAfter,
   isSameOrAfter,
   isSameOrBefore,
@@ -33,7 +34,8 @@ import {
 } from '../Card';
 import {Dropdown, SimpleDropdown} from '../Dropdown';
 import {FocusManager} from '../FocusManager';
-import {ClickableIcon} from '../Icon';
+import {ClickableIcon, Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
+import {BodySmall, TEXT_COLORS} from '../Text';
 
 import {Calendar} from './Calendar.js';
 
@@ -79,6 +81,8 @@ type DateRangeWrapperProps = {
     ) => void,
   },
   today: string,
+  startDateLabel?: string,
+  endDateLabel?: string,
 };
 
 const CalendarHeader = ({
@@ -184,6 +188,8 @@ export const DateRangeWrapper: React$AbstractComponent<
       cardWrapperClass,
       hideTimezone,
       today,
+      startDateLabel = 'Start Date',
+      endDateLabel = 'End Date',
     }: DateRangeWrapperProps,
     ref,
   ): React.Node => {
@@ -228,6 +234,35 @@ export const DateRangeWrapper: React$AbstractComponent<
           ref={ref}
         >
           <CardHeader className={css.cardHeader}>
+            <BodySmall
+              className={css.selectedDate}
+              color={TEXT_COLORS.secondary}
+            >
+              {`${startDateLabel}: ${getFormattedDate(
+                MARKERS.DATE_RANGE_START,
+                dateRange,
+              )}`}
+            </BodySmall>
+
+            <Icon
+              name="minus"
+              size={ICON_SIZE.small}
+              type={ICON_TYPE.regular}
+              color={TEXT_COLORS.secondary}
+            />
+
+            <BodySmall
+              className={css.selectedDate}
+              color={TEXT_COLORS.secondary}
+            >
+              {`${endDateLabel}: ${getFormattedDate(
+                MARKERS.DATE_RANGE_END,
+                dateRange,
+              )}`}
+            </BodySmall>
+          </CardHeader>
+
+          <div className={css.calendarMenuContainer}>
             <CalendarHeader
               marker={MARKERS.DATE_RANGE_START}
               rangeStartMonth={rangeStartMonth}
@@ -268,7 +303,8 @@ export const DateRangeWrapper: React$AbstractComponent<
                 onMonthNavigate(MARKERS.DATE_RANGE_END, NAVIGATION_ACTION.PREV)
               }
             />
-          </CardHeader>
+          </div>
+
           <CardContent className={css.dateRangeCalendars}>
             <Calendar
               marker={MARKERS.DATE_RANGE_START}
@@ -282,7 +318,7 @@ export const DateRangeWrapper: React$AbstractComponent<
               {...commonProps}
             />
           </CardContent>
-          <CardFooter>
+          <CardFooter className={css.cardFooter}>
             <CardTitle className={css.timezoneDropdownContainer}>
               {!hideTimezone && (
                 <SimpleDropdown

package/lib/components/DateRangePicker/DateRangeWrapper.module.css

@@ -6,8 +6,11 @@
 @value (
   spaceNone, 
   spaceSmall,
-  spaceXSmall
+  spaceXSmall,
+  spaceMedium
 ) from '../../styles/variables/_space.css';
+@value (borderRadiusMedium) from '../../styles/variables/_border.css';
+@value (colorBackgroundPrimary) from '../../styles/variables/_color.css';
 
 .dateRangeWrapper {
   display: flex;
@@ -18,6 +21,15 @@
   width: sizeFluid;
   padding: spaceXSmall;
   gap: spaceSmall;
+  background-color: colorBackgroundPrimary;
+  border-top-left-radius: borderRadiusMedium;
+  border-top-right-radius: borderRadiusMedium;
+}
+
+.cardFooter {
+  background-color: colorBackgroundPrimary;
+  border-bottom-left-radius: borderRadiusMedium;
+  border-bottom-right-radius: borderRadiusMedium;
 }
 
 .calendarHeader {
@@ -62,3 +74,22 @@
 .mainContainer {
   width: sizeFluid;
 }
+
+.selectedDateContainer {
+  display: flex;
+  gap: spaceMedium;
+  padding: spaceXSmall spaceSmall;
+}
+
+.selectedDate {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+.calendarMenuContainer {
+  display: flex;
+  gap: spaceSmall;
+  width: sizeFluid;
+  padding: spaceXSmall;
+}

package/lib/components/EmptyState/EmptyImages/ChartEmptyImage.d.ts

@@ -183,8 +183,8 @@ export const ChartEmptyImage = (): React.ReactNode => (
     <path
       d="M120 68.2411C120 82.6282 113.908 96.1623 104.213 105L25.7991 104.496C24.7996 104.496 24 103.674 24 102.647V35.8498C24 34.8221 24.7996 34 25.7991 34L104 34.5C112.796 43.0295 120 54.6762 120 68.2411Z"
       stroke="#D3D2E0"
-      stroke-width="2"
-      stroke-miterlimit="10"
+      strokeWidth="2"
+      strokeMiterlimit="10"
     />
     <path
       d="M29.5054 29.1312C32.3772 29.1312 34.7054 26.8031 34.7054 23.9312C34.7054 21.0593 32.3772 18.7312 29.5054 18.7312C26.6335 18.7312 24.3054 21.0593 24.3054 23.9312C24.3054 26.8031 26.6335 29.1312 29.5054 29.1312Z"

package/lib/components/EmptyState/EmptyImages/ChartEmptyImage.js

@@ -167,8 +167,8 @@ const ChartEmptyImage = () => /*#__PURE__*/React.createElement("svg", {
 }), /*#__PURE__*/React.createElement("path", {
   d: "M120 68.2411C120 82.6282 113.908 96.1623 104.213 105L25.7991 104.496C24.7996 104.496 24 103.674 24 102.647V35.8498C24 34.8221 24.7996 34 25.7991 34L104 34.5C112.796 43.0295 120 54.6762 120 68.2411Z",
   stroke: "#D3D2E0",
-  "stroke-width": "2",
-  "stroke-miterlimit": "10"
+  strokeWidth: "2",
+  strokeMiterlimit: "10"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M29.5054 29.1312C32.3772 29.1312 34.7054 26.8031 34.7054 23.9312C34.7054 21.0593 32.3772 18.7312 29.5054 18.7312C26.6335 18.7312 24.3054 21.0593 24.3054 23.9312C24.3054 26.8031 26.6335 29.1312 29.5054 29.1312Z",
   fill: "#9F9FBC"

package/lib/components/EmptyState/EmptyImages/ChartEmptyImage.js.flow

@@ -187,8 +187,8 @@ export const ChartEmptyImage = (): React.Node => (
     <path
       d="M120 68.2411C120 82.6282 113.908 96.1623 104.213 105L25.7991 104.496C24.7996 104.496 24 103.674 24 102.647V35.8498C24 34.8221 24.7996 34 25.7991 34L104 34.5C112.796 43.0295 120 54.6762 120 68.2411Z"
       stroke="#D3D2E0"
-      stroke-width="2"
-      stroke-miterlimit="10"
+      strokeWidth="2"
+      strokeMiterlimit="10"
     />
     <path
       d="M29.5054 29.1312C32.3772 29.1312 34.7054 26.8031 34.7054 23.9312C34.7054 21.0593 32.3772 18.7312 29.5054 18.7312C26.6335 18.7312 24.3054 21.0593 24.3054 23.9312C24.3054 26.8031 26.6335 29.1312 29.5054 29.1312Z"

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.d.ts

@@ -0,0 +1,130 @@
+import {$ReadOnly, $Diff} from 'utility-types';
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate, // $FlowFixMe[untyped-import]
+  flip, // $FlowFixMe[untyped-import]
+  offset, // $FlowFixMe[untyped-import]
+  shift, // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+import {sizeFluid} from '../../styles/variables/_size';
+import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import type {ClickAwayRefType} from '../../utils';
+import {ClickAway, mergeRefs} from '../../utils';
+import classify from '../../utils/classify';
+import type {ButtonProps, ButtonSize} from '../Button';
+import {Button} from '../Button';
+import type {AnchorType, Strategy} from '../ButtonDropdown';
+import {ANCHOR_POSITION_TYPE, STRATEGY_TYPE} from '../ButtonDropdown';
+import css from './FilterButtonOverlay.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+  overlayContainer?: string;
+}>;
+export type FilterButtonOverlaySizeTypes = 'medium' | 'small';
+export type NewButtonProps = $Diff<
+  ButtonProps,
+  {
+    children?: React.ReactNode;
+  }
+>;
+export type FilterButtonOverlayProps = NewButtonProps & {
+  classNames?: ClassNames;
+  children: React.ReactNode;
+  positionStrategy?: Strategy;
+  anchorPosition?: AnchorType;
+  clickAwayRef?: ClickAwayRefType;
+  isFluid?: boolean;
+  size?: FilterButtonOverlaySizeTypes;
+  buttonLabel?: React.ReactNode;
+  buttonSize?: ButtonSize;
+  buttonIsFluid?: boolean;
+};
+export const FilterButtonOverlay: React$AbstractComponent<
+  FilterButtonOverlayProps,
+  HTMLDivElement
+> = React.forwardRef<FilterButtonOverlayProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      anchorPosition = ANCHOR_POSITION_TYPE.bottomStart,
+      positionStrategy = STRATEGY_TYPE.absolute,
+      clickAwayRef,
+      size,
+      children,
+      isFluid,
+      buttonLabel,
+      buttonIsFluid,
+      buttonSize,
+      ...restProps
+    }: FilterButtonOverlayProps,
+    ref,
+  ) => {
+    const {x, y, refs, strategy} = useFloating({
+      open: true,
+      strategy: positionStrategy,
+      placement: anchorPosition,
+      whileElementsMounted: autoUpdate,
+      middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
+    });
+    return (
+      <ClickAway clickAwayRef={clickAwayRef} closeOnEscapeKeypress>
+        {({isOpen, onOpen, boundaryRef, triggerRef}) => (
+          <div
+            data-testid="FilterButtonOverlay"
+            className={classify(
+              {
+                [css.isFluid]: buttonIsFluid,
+              },
+              classNames?.wrapper,
+            )}
+            ref={ref}
+          >
+            <Button
+              {...restProps}
+              ref={mergeRefs([refs.setReference, triggerRef])}
+              onClick={(e) => {
+                e.stopPropagation();
+                onOpen();
+              }}
+              isFluid={buttonIsFluid}
+              size={buttonSize}
+            >
+              {buttonLabel}
+            </Button>
+
+            {isOpen && (
+              <div
+                ref={mergeRefs([refs.setFloating, boundaryRef])}
+                style={{
+                  display: 'flex',
+                  position: strategy,
+                  top: y ?? spaceNone,
+                  left: x ?? spaceNone,
+                  ...(isFluid && {
+                    width: sizeFluid,
+                  }),
+                }}
+              >
+                <div
+                  className={classify(
+                    css.overlayWrapper,
+                    {
+                      [css.fluid]: isFluid,
+                      [css.medium]: size === 'medium',
+                      [css.small]: size === 'small',
+                    },
+                    classNames?.overlayContainer,
+                  )}
+                >
+                  {children}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </ClickAway>
+    );
+  },
+);

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FilterButtonOverlay = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@floating-ui/react");
+var _size = require("../../styles/variables/_size");
+var _space = require("../../styles/variables/_space");
+var _utils = require("../../utils");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _ButtonDropdown = require("../ButtonDropdown");
+var _FilterButtonOverlayModule = _interopRequireDefault(require("./FilterButtonOverlay.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const FilterButtonOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    anchorPosition = _ButtonDropdown.ANCHOR_POSITION_TYPE.bottomStart,
+    positionStrategy = _ButtonDropdown.STRATEGY_TYPE.absolute,
+    clickAwayRef,
+    size,
+    children,
+    isFluid,
+    buttonLabel,
+    buttonIsFluid,
+    buttonSize,
+    ...restProps
+  } = _ref;
+  const {
+    x,
+    y,
+    refs,
+    strategy
+  } = (0, _react2.useFloating)({
+    open: true,
+    strategy: positionStrategy,
+    placement: anchorPosition,
+    whileElementsMounted: _react2.autoUpdate,
+    middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
+  });
+  return /*#__PURE__*/React.createElement(_utils.ClickAway, {
+    clickAwayRef: clickAwayRef,
+    closeOnEscapeKeypress: true
+  }, _ref2 => {
+    let {
+      isOpen,
+      onOpen,
+      boundaryRef,
+      triggerRef
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "FilterButtonOverlay",
+      className: (0, _classify.default)({
+        [_FilterButtonOverlayModule.default.isFluid]: buttonIsFluid
+      }, classNames?.wrapper),
+      ref: ref
+    }, /*#__PURE__*/React.createElement(_Button.Button, _extends({}, restProps, {
+      ref: (0, _utils.mergeRefs)([refs.setReference, triggerRef]),
+      onClick: e => {
+        e.stopPropagation();
+        onOpen();
+      },
+      isFluid: buttonIsFluid,
+      size: buttonSize
+    }), buttonLabel), isOpen && /*#__PURE__*/React.createElement("div", {
+      ref: (0, _utils.mergeRefs)([refs.setFloating, boundaryRef]),
+      style: {
+        display: 'flex',
+        position: strategy,
+        top: y ?? _space.spaceNone,
+        left: x ?? _space.spaceNone,
+        ...(isFluid && {
+          width: _size.sizeFluid
+        })
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: (0, _classify.default)(_FilterButtonOverlayModule.default.overlayWrapper, {
+        [_FilterButtonOverlayModule.default.fluid]: isFluid,
+        [_FilterButtonOverlayModule.default.medium]: size === 'medium',
+        [_FilterButtonOverlayModule.default.small]: size === 'small'
+      }, classNames?.overlayContainer)
+    }, children)));
+  });
+});
+exports.FilterButtonOverlay = FilterButtonOverlay;

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.js.flow

@@ -0,0 +1,135 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate,
+  // $FlowFixMe[untyped-import]
+  flip,
+  // $FlowFixMe[untyped-import]
+  offset,
+  // $FlowFixMe[untyped-import]
+  shift,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+
+import {sizeFluid} from '../../styles/variables/_size';
+import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import type {ClickAwayRefType} from '../../utils';
+import {ClickAway, mergeRefs} from '../../utils';
+import classify from '../../utils/classify';
+import type {ButtonProps, ButtonSize} from '../Button';
+import {Button} from '../Button';
+import type {AnchorType, Strategy} from '../ButtonDropdown';
+import {ANCHOR_POSITION_TYPE, STRATEGY_TYPE} from '../ButtonDropdown';
+
+import css from './FilterButtonOverlay.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string, overlayContainer?: string}>;
+export type FilterButtonOverlaySizeTypes = 'medium' | 'small';
+
+export type NewButtonProps = $Diff<ButtonProps, {children?: React.Node}>;
+
+export type FilterButtonOverlayProps = {
+  ...NewButtonProps,
+  classNames?: ClassNames,
+  children: React.Node,
+  positionStrategy?: Strategy,
+  anchorPosition?: AnchorType,
+  clickAwayRef?: ClickAwayRefType,
+  isFluid?: boolean,
+  size?: FilterButtonOverlaySizeTypes,
+  buttonLabel?: React.Node,
+  buttonSize?: ButtonSize,
+  buttonIsFluid?: boolean,
+  ...
+};
+
+export const FilterButtonOverlay: React$AbstractComponent<
+  FilterButtonOverlayProps,
+  HTMLDivElement,
+> = React.forwardRef<FilterButtonOverlayProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      anchorPosition = ANCHOR_POSITION_TYPE.bottomStart,
+      positionStrategy = STRATEGY_TYPE.absolute,
+      clickAwayRef,
+      size,
+      children,
+      isFluid,
+      buttonLabel,
+      buttonIsFluid,
+      buttonSize,
+      ...restProps
+    }: FilterButtonOverlayProps,
+    ref,
+  ) => {
+    const {x, y, refs, strategy} = useFloating({
+      open: true,
+      strategy: positionStrategy,
+      placement: anchorPosition,
+      whileElementsMounted: autoUpdate,
+      middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
+    });
+
+    return (
+      <ClickAway clickAwayRef={clickAwayRef} closeOnEscapeKeypress>
+        {({isOpen, onOpen, boundaryRef, triggerRef}) => (
+          <div
+            data-testid="FilterButtonOverlay"
+            className={classify(
+              {
+                [css.isFluid]: buttonIsFluid,
+              },
+              classNames?.wrapper,
+            )}
+            ref={ref}
+          >
+            <Button
+              {...restProps}
+              ref={mergeRefs([refs.setReference, triggerRef])}
+              onClick={(e) => {
+                e.stopPropagation();
+                onOpen();
+              }}
+              isFluid={buttonIsFluid}
+              size={buttonSize}
+            >
+              {buttonLabel}
+            </Button>
+
+            {isOpen && (
+              <div
+                ref={mergeRefs([refs.setFloating, boundaryRef])}
+                style={{
+                  display: 'flex',
+                  position: strategy,
+                  top: y ?? spaceNone,
+                  left: x ?? spaceNone,
+                  ...(isFluid && {width: sizeFluid}),
+                }}
+              >
+                <div
+                  className={classify(
+                    css.overlayWrapper,
+                    {
+                      [css.fluid]: isFluid,
+                      [css.medium]: size === 'medium',
+                      [css.small]: size === 'small',
+                    },
+                    classNames?.overlayContainer,
+                  )}
+                >
+                  {children}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </ClickAway>
+    );
+  },
+);

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.module.css

@@ -0,0 +1,35 @@
+@value (colorBackgroundTertiary) from '../../styles/variables/_color.css';
+@value (size160, sizeFluid, size300, size240) from '../../styles/variables/_size.css';
+@value (borderRadiusMedium) from '../../styles/variables/_border.css';
+@value (elevationMenu) from '../../styles/variables/_elevation.css';
+
+.overlayWrapper {
+  position: relative;
+  composes: boxShadow2 from '../../styles/shadow.module.css';
+  composes: borderPrimary from '../../styles/border.module.css';
+  background-color: colorBackgroundTertiary;
+  display: flex;
+  flex-flow: column;
+  min-width: size160;
+  border-radius: borderRadiusMedium;
+  z-index: elevationMenu;
+}
+
+.fluid {
+  width: sizeFluid;
+  min-width: size160;
+}
+
+.medium {
+  width: size300;
+  min-width: size300;
+}
+
+.small {
+  width: size240;
+  min-width: size240;
+}
+
+.isFluid {
+  width: sizeFluid;
+}

package/lib/components/FilterButtonOverlay/index.d.ts

@@ -0,0 +1 @@
+export * from './FilterButtonOverlay';

package/lib/components/FilterButtonOverlay/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _FilterButtonOverlay = require("./FilterButtonOverlay");
+Object.keys(_FilterButtonOverlay).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FilterButtonOverlay[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FilterButtonOverlay[key];
+    }
+  });
+});

package/lib/components/FilterButtonOverlay/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './FilterButtonOverlay';

package/lib/components/Icon/ClickableIcon.d.ts

@@ -58,9 +58,10 @@ export const ClickableIcon: React$AbstractComponent<
         ref={ref}
       >
         <Icon
+          {...props}
           size={size}
+          color={disabled ? TEXT_COLORS.disabled : props.color}
           className={classNames?.icon || className}
-          {...props}
         />
       </UnstyledButton>
     );

package/lib/components/Icon/ClickableIcon.js

@@ -42,10 +42,11 @@ const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_ClickableIconModule.default.large]: size === 'large'
     }, classNames?.button),
     ref: ref
-  }), /*#__PURE__*/React.createElement(_.Icon, _extends({
+  }), /*#__PURE__*/React.createElement(_.Icon, _extends({}, props, {
     size: size,
+    color: disabled ? _Text.TEXT_COLORS.disabled : props.color,
     className: classNames?.icon || className
-  }, props)));
+  })));
 });
 exports.ClickableIcon = ClickableIcon;
 const CloseIcon = /*#__PURE__*/React.forwardRef((_ref2, ref) => {

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

@@ -65,9 +65,10 @@ export const ClickableIcon: React$AbstractComponent<
         ref={ref}
       >
         <Icon
+          {...props}
           size={size}
+          color={disabled ? TEXT_COLORS.disabled : props.color}
           className={classNames?.icon || className}
-          {...props}
         />
       </UnstyledButton>
     );

package/lib/components/Icon/ClickableIcon.module.css

@@ -54,12 +54,12 @@ button {
   border-radius: borderRadiusXSmall;
 }
 
-.button:focus {
+.button:focus-visible:not(:disabled) {
   box-shadow: borderWidthNone borderWidthNone borderWidthNone
     borderWidthTertiary colorFocusPrimary;
 }
 
-.button:hover {
+.button:hover:not(:disabled) {
   background-color: colorButtonFillGhostPressed;
   color: colorTextPrimary;
 }

package/lib/components/Icon/Icon.docs.d.ts

@@ -100,6 +100,20 @@ export const ICON_DOCS = {
         },
       },
     },
+    disabled: {
+      description: 'If **true**, the clickable icon is disabled',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
     ariaLabel: {
       control: {
         type: 'text',
@@ -114,8 +128,8 @@ export const ICON_DOCS = {
     },
   },
   parameters: {
-    componentSubtitle: 'Generates a Icon component',
     docs: {
+      subtitle: 'Generates a Icon component',
       description: {
         component: `
 \`\`\`js