@drivy/cobalt 2.9.2 → 2.10.0

package/components/Buttons/Button/index.js

@@ -5,7 +5,7 @@ import { ButtonLinkBase, ButtonBase } from './ButtonComponent.js';
 import '../../Icon/index.js';
 import ChevronRightIcon from '../../Icon/__generated__/ChevronRightIcon.js';
 
-const getComputedClassName = ({ className, variant, size, destructive, primary, text, isIconOnly, fullWidth, }) => {
+const getComputedClassName = ({ className, variant, size, destructive, primary, text, isIconOnly, fullWidth, selected, }) => {
     return cx(className, "cobalt-button", {
         "cobalt-button--primary": primary,
         "cobalt-button--destructive": destructive,
@@ -19,11 +19,12 @@ const getComputedClassName = ({ className, variant, size, destructive, primary,
         "cobalt-button--business": variant === "business",
         "cobalt-button--success": variant === "success",
         "cobalt-button--neutral": variant === "neutral",
+        "cobalt-button--selected": selected,
         "c-w-full": fullWidth,
     });
 };
 const Button = forwardRef((props, ref) => {
-    const { children, className, variant, size, destructive, primary, text, icon, fullWidth, ...restProps } = props;
+    const { children, className, variant, size, destructive, primary, text, icon, fullWidth, selected, ...restProps } = props;
     const computedClassName = getComputedClassName({
         className,
         variant,
@@ -32,6 +33,7 @@ const Button = forwardRef((props, ref) => {
         primary,
         text,
         fullWidth,
+        selected,
         isIconOnly: !!icon && !children,
     });
     const content = (React.createElement(React.Fragment, null,

package/components/Buttons/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Buttons/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\nimport {\n  ButtonComponentProps,\n  ButtonLinkComponentProps,\n  ButtonProps,\n  isLinkProps,\n} from \"./type\"\nimport { ButtonLinkBase, ButtonBase } from \"./ButtonComponent\"\nimport { ChevronRightIcon } from \"../../Icon\"\n\nconst getComputedClassName = ({\n  className,\n  variant,\n  size,\n  destructive,\n  primary,\n  text,\n  isIconOnly,\n  fullWidth,\n}: {\n  className?: ButtonProps[\"className\"]\n  variant?: ButtonProps[\"variant\"]\n  size?: ButtonProps[\"size\"]\n  destructive?: ButtonProps[\"destructive\"]\n  primary?: ButtonProps[\"primary\"]\n  text?: ButtonProps[\"text\"]\n  isIconOnly?: boolean\n  fullWidth?: ButtonProps[\"fullWidth\"]\n}) => {\n  return cx(className, \"cobalt-button\", {\n    \"cobalt-button--primary\": primary,\n    \"cobalt-button--destructive\": destructive,\n    \"cobalt-button--text\": text,\n    \"cobalt-button--icon-only\": isIconOnly,\n    \"cobalt-button--small\": size === \"small\",\n    \"cobalt-button--large\": size === \"large\",\n    \"cobalt-button--warning\": variant === \"warning\",\n    \"cobalt-button--secondary\": variant === \"secondary\",\n    \"cobalt-button--tertiary\": variant === \"tertiary\",\n    \"cobalt-button--business\": variant === \"business\",\n    \"cobalt-button--success\": variant === \"success\",\n    \"cobalt-button--neutral\": variant === \"neutral\",\n    \"c-w-full\": fullWidth,\n  })\n}\n\ninterface ButtonOverloads {\n  (\n    props: Exclude<ButtonProps, ButtonComponentProps> &\n      React.RefAttributes<HTMLAnchorElement>\n  ): React.ReactElement\n  (\n    props: Exclude<ButtonProps, ButtonLinkComponentProps> &\n      React.RefAttributes<HTMLButtonElement>\n  ): React.ReactElement\n  displayName?: string\n}\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n  (props, ref) => {\n    const {\n      children,\n      className,\n      variant,\n      size,\n      destructive,\n      primary,\n      text,\n      icon,\n      fullWidth,\n      ...restProps\n    } = props\n\n    const computedClassName = getComputedClassName({\n      className,\n      variant,\n      size,\n      destructive,\n      primary,\n      text,\n      fullWidth,\n      isIconOnly: !!icon && !children,\n    })\n\n    const content = (\n      <>\n        {icon}\n        {children && <span>{children}</span>}\n        {text && children ? <ChevronRightIcon /> : null}\n      </>\n    )\n\n    if (isLinkProps(restProps)) {\n      return (\n        <ButtonLinkBase\n          {...(restProps as ButtonLinkComponentProps)}\n          className={computedClassName}\n          ref={ref as React.ForwardedRef<HTMLAnchorElement>}\n        >\n          {content}\n        </ButtonLinkBase>\n      )\n    }\n\n    return (\n      <ButtonBase\n        {...(restProps as ButtonComponentProps)}\n        className={computedClassName}\n        ref={ref as React.ForwardedRef<HTMLButtonElement>}\n      >\n        {content}\n      </ButtonBase>\n    )\n  }\n) as ButtonOverloads\n\nButton.displayName = \"Button\"\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;AAWA,MAAM,oBAAoB,GAAG,CAAC,EAC5B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,IAAI,EACJ,UAAU,EACV,SAAS,GAUV,KAAI;AACH,IAAA,OAAO,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE;AACpC,QAAA,wBAAwB,EAAE,OAAO;AACjC,QAAA,4BAA4B,EAAE,WAAW;AACzC,QAAA,qBAAqB,EAAE,IAAI;AAC3B,QAAA,0BAA0B,EAAE,UAAU;QACtC,sBAAsB,EAAE,IAAI,KAAK,OAAO;QACxC,sBAAsB,EAAE,IAAI,KAAK,OAAO;QACxC,wBAAwB,EAAE,OAAO,KAAK,SAAS;QAC/C,0BAA0B,EAAE,OAAO,KAAK,WAAW;QACnD,yBAAyB,EAAE,OAAO,KAAK,UAAU;QACjD,yBAAyB,EAAE,OAAO,KAAK,UAAU;QACjD,wBAAwB,EAAE,OAAO,KAAK,SAAS;QAC/C,wBAAwB,EAAE,OAAO,KAAK,SAAS;AAC/C,QAAA,UAAU,EAAE,SAAS;AACtB,KAAA,CAAC,CAAA;AACJ,CAAC,CAAA;AAcK,MAAA,MAAM,GAAG,UAAU,CACvB,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IAET,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;QAC7C,SAAS;QACT,OAAO;QACP,IAAI;QACJ,WAAW;QACX,OAAO;QACP,IAAI;QACJ,SAAS;AACT,QAAA,UAAU,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ;AAChC,KAAA,CAAC,CAAA;IAEF,MAAM,OAAO,IACX,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACG,IAAI;QACJ,QAAQ,IAAI,KAAO,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,QAAQ,CAAQ;AACnC,QAAA,IAAI,IAAI,QAAQ,GAAG,KAAC,CAAA,aAAA,CAAA,gBAAgB,EAAG,IAAA,CAAA,GAAG,IAAI,CAC9C,CACJ,CAAA;AAED,IAAA,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE;AAC1B,QAAA,QACE,KAAC,CAAA,aAAA,CAAA,cAAc,EACR,EAAA,GAAA,SAAsC,EAC3C,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAA4C,IAEhD,OAAO,CACO,EAClB;KACF;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,UAAU,EACJ,EAAA,GAAA,SAAkC,EACvC,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAA4C,IAEhD,OAAO,CACG,EACd;AACH,CAAC,EACiB;AAEpB,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Buttons/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\nimport {\n  ButtonComponentProps,\n  ButtonLinkComponentProps,\n  ButtonProps,\n  isLinkProps,\n} from \"./type\"\nimport { ButtonLinkBase, ButtonBase } from \"./ButtonComponent\"\nimport { ChevronRightIcon } from \"../../Icon\"\n\nconst getComputedClassName = ({\n  className,\n  variant,\n  size,\n  destructive,\n  primary,\n  text,\n  isIconOnly,\n  fullWidth,\n  selected,\n}: {\n  className?: ButtonProps[\"className\"]\n  variant?: ButtonProps[\"variant\"]\n  size?: ButtonProps[\"size\"]\n  destructive?: ButtonProps[\"destructive\"]\n  primary?: ButtonProps[\"primary\"]\n  text?: ButtonProps[\"text\"]\n  isIconOnly?: boolean\n  fullWidth?: ButtonProps[\"fullWidth\"]\n  selected?: ButtonProps[\"selected\"]\n}) => {\n  return cx(className, \"cobalt-button\", {\n    \"cobalt-button--primary\": primary,\n    \"cobalt-button--destructive\": destructive,\n    \"cobalt-button--text\": text,\n    \"cobalt-button--icon-only\": isIconOnly,\n    \"cobalt-button--small\": size === \"small\",\n    \"cobalt-button--large\": size === \"large\",\n    \"cobalt-button--warning\": variant === \"warning\",\n    \"cobalt-button--secondary\": variant === \"secondary\",\n    \"cobalt-button--tertiary\": variant === \"tertiary\",\n    \"cobalt-button--business\": variant === \"business\",\n    \"cobalt-button--success\": variant === \"success\",\n    \"cobalt-button--neutral\": variant === \"neutral\",\n    \"cobalt-button--selected\": selected,\n    \"c-w-full\": fullWidth,\n  })\n}\n\ninterface ButtonOverloads {\n  (\n    props: Exclude<ButtonProps, ButtonComponentProps> &\n      React.RefAttributes<HTMLAnchorElement>\n  ): React.ReactElement\n  (\n    props: Exclude<ButtonProps, ButtonLinkComponentProps> &\n      React.RefAttributes<HTMLButtonElement>\n  ): React.ReactElement\n  displayName?: string\n}\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n  (props, ref) => {\n    const {\n      children,\n      className,\n      variant,\n      size,\n      destructive,\n      primary,\n      text,\n      icon,\n      fullWidth,\n      selected,\n      ...restProps\n    } = props\n\n    const computedClassName = getComputedClassName({\n      className,\n      variant,\n      size,\n      destructive,\n      primary,\n      text,\n      fullWidth,\n      selected,\n      isIconOnly: !!icon && !children,\n    })\n\n    const content = (\n      <>\n        {icon}\n        {children && <span>{children}</span>}\n        {text && children ? <ChevronRightIcon /> : null}\n      </>\n    )\n\n    if (isLinkProps(restProps)) {\n      return (\n        <ButtonLinkBase\n          {...(restProps as ButtonLinkComponentProps)}\n          className={computedClassName}\n          ref={ref as React.ForwardedRef<HTMLAnchorElement>}\n        >\n          {content}\n        </ButtonLinkBase>\n      )\n    }\n\n    return (\n      <ButtonBase\n        {...(restProps as ButtonComponentProps)}\n        className={computedClassName}\n        ref={ref as React.ForwardedRef<HTMLButtonElement>}\n      >\n        {content}\n      </ButtonBase>\n    )\n  }\n) as ButtonOverloads\n\nButton.displayName = \"Button\"\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;AAWA,MAAM,oBAAoB,GAAG,CAAC,EAC5B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,IAAI,EACJ,UAAU,EACV,SAAS,EACT,QAAQ,GAWT,KAAI;AACH,IAAA,OAAO,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE;AACpC,QAAA,wBAAwB,EAAE,OAAO;AACjC,QAAA,4BAA4B,EAAE,WAAW;AACzC,QAAA,qBAAqB,EAAE,IAAI;AAC3B,QAAA,0BAA0B,EAAE,UAAU;QACtC,sBAAsB,EAAE,IAAI,KAAK,OAAO;QACxC,sBAAsB,EAAE,IAAI,KAAK,OAAO;QACxC,wBAAwB,EAAE,OAAO,KAAK,SAAS;QAC/C,0BAA0B,EAAE,OAAO,KAAK,WAAW;QACnD,yBAAyB,EAAE,OAAO,KAAK,UAAU;QACjD,yBAAyB,EAAE,OAAO,KAAK,UAAU;QACjD,wBAAwB,EAAE,OAAO,KAAK,SAAS;QAC/C,wBAAwB,EAAE,OAAO,KAAK,SAAS;AAC/C,QAAA,yBAAyB,EAAE,QAAQ;AACnC,QAAA,UAAU,EAAE,SAAS;AACtB,KAAA,CAAC,CAAA;AACJ,CAAC,CAAA;AAcK,MAAA,MAAM,GAAG,UAAU,CACvB,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IAET,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;QAC7C,SAAS;QACT,OAAO;QACP,IAAI;QACJ,WAAW;QACX,OAAO;QACP,IAAI;QACJ,SAAS;QACT,QAAQ;AACR,QAAA,UAAU,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ;AAChC,KAAA,CAAC,CAAA;IAEF,MAAM,OAAO,IACX,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACG,IAAI;QACJ,QAAQ,IAAI,KAAO,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,QAAQ,CAAQ;AACnC,QAAA,IAAI,IAAI,QAAQ,GAAG,KAAC,CAAA,aAAA,CAAA,gBAAgB,EAAG,IAAA,CAAA,GAAG,IAAI,CAC9C,CACJ,CAAA;AAED,IAAA,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE;AAC1B,QAAA,QACE,KAAC,CAAA,aAAA,CAAA,cAAc,EACR,EAAA,GAAA,SAAsC,EAC3C,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAA4C,IAEhD,OAAO,CACO,EAClB;KACF;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,UAAU,EACJ,EAAA,GAAA,SAAkC,EACvC,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAA4C,IAEhD,OAAO,CACG,EACd;AACH,CAAC,EACiB;AAEpB,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/components/Buttons/Button/type.js.map

@@ -1 +1 @@
-{"version":3,"file":"type.js","sources":["../../../../src/components/Buttons/Button/type.ts"],"sourcesContent":["type SharedButtonApiProps = {\n  loading?: boolean\n  disabled?: boolean\n  primary?: boolean\n  destructive?: boolean\n  icon?: React.ReactNode\n  text?: boolean\n  fullWidth?: boolean\n  // React.HTMLAttributes allows color to be passed in, but we don't want to allow it\n  color?: never\n}\n\ntype SharedConditionalTextProps =\n  | {\n      text: true\n      icon: React.ReactNode\n      children?: never | false | undefined | null\n      fullWidth?: never | false\n    }\n  | {\n      text: true\n      icon?: never\n      fullWidth?: never | false\n    }\n  | {\n      text?: false\n    }\n\ntype SharedConditionalVariantProps =\n  | {\n      size?: \"large\"\n      variant?: never\n    }\n  | {\n      size: \"small\"\n      destructive?: false\n      primary?: false\n      // Those variants are only available for small buttons\n      variant:\n        | \"warning\"\n        | \"secondary\"\n        | \"tertiary\"\n        | \"business\"\n        | \"success\"\n        | \"neutral\"\n    }\n  | {\n      size: \"small\"\n      variant?: never\n    }\n\n// Button props\nexport type ButtonComponentProps =\n  React.ButtonHTMLAttributes<HTMLButtonElement> & {\n    loading?: SharedButtonApiProps[\"loading\"]\n    disabled?: SharedButtonApiProps[\"disabled\"]\n    href?: never\n  }\n\n// Link props\nexport type ButtonLinkComponentProps =\n  React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    loading?: SharedButtonApiProps[\"loading\"]\n    disabled?: SharedButtonApiProps[\"disabled\"]\n    href?: string\n  }\n\nexport const isLinkProps = (\n  props: ButtonComponentProps | ButtonLinkComponentProps\n): props is ButtonLinkComponentProps => \"href\" in props && !!props.href\n\nexport type ButtonProps = (ButtonComponentProps | ButtonLinkComponentProps) &\n  SharedButtonApiProps &\n  SharedConditionalVariantProps &\n  SharedConditionalTextProps\n"],"names":[],"mappings":"AAmEa,MAAA,WAAW,GAAG,CACzB,KAAsD,KAChB,MAAM,IAAI,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC;;;;"}
+{"version":3,"file":"type.js","sources":["../../../../src/components/Buttons/Button/type.ts"],"sourcesContent":["type SharedButtonApiProps = {\n  loading?: boolean\n  disabled?: boolean\n  primary?: boolean\n  destructive?: boolean\n  icon?: React.ReactNode\n  text?: boolean\n  fullWidth?: boolean\n  selected?: boolean\n  // React.HTMLAttributes allows color to be passed in, but we don't want to allow it\n  color?: never\n}\n\ntype SharedConditionalTextProps =\n  | {\n      text: true\n      icon: React.ReactNode\n      children?: never | false | undefined | null\n      fullWidth?: never | false\n    }\n  | {\n      text: true\n      icon?: never\n      fullWidth?: never | false\n    }\n  | {\n      text?: false\n    }\n\ntype SharedConditionalVariantProps =\n  | {\n      size?: \"large\"\n      variant?: never\n    }\n  | {\n      size: \"small\"\n      destructive?: false\n      primary?: false\n      selected?: false\n      // Those variants are only available for small buttons\n      variant:\n        | \"warning\"\n        | \"secondary\"\n        | \"tertiary\"\n        | \"business\"\n        | \"success\"\n        | \"neutral\"\n    }\n  | {\n      size: \"small\"\n      variant?: never\n    }\n\n// Button props\nexport type ButtonComponentProps =\n  React.ButtonHTMLAttributes<HTMLButtonElement> & {\n    loading?: SharedButtonApiProps[\"loading\"]\n    disabled?: SharedButtonApiProps[\"disabled\"]\n    href?: never\n  }\n\n// Link props\nexport type ButtonLinkComponentProps =\n  React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    loading?: SharedButtonApiProps[\"loading\"]\n    disabled?: SharedButtonApiProps[\"disabled\"]\n    href?: string\n  }\n\nexport const isLinkProps = (\n  props: ButtonComponentProps | ButtonLinkComponentProps\n): props is ButtonLinkComponentProps => \"href\" in props && !!props.href\n\nexport type ButtonProps = (ButtonComponentProps | ButtonLinkComponentProps) &\n  SharedButtonApiProps &\n  SharedConditionalVariantProps &\n  SharedConditionalTextProps\n"],"names":[],"mappings":"AAqEa,MAAA,WAAW,GAAG,CACzB,KAAsD,KAChB,MAAM,IAAI,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "2.9.2",
+  "version": "2.10.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",
@@ -19,7 +19,7 @@
     "url": "https://github.com/TimPetricola"
   },
   "dependencies": {
-    "@ark-ui/react": "5.26.2",
+    "@ark-ui/react": "5.30.0",
     "@juggle/resize-observer": "3.4.0",
     "@lottiefiles/react-lottie-player": "3.6.0",
     "@tippyjs/react": "4.2.6",
@@ -45,14 +45,14 @@
     "@rollup/plugin-commonjs": "28.0.6",
     "@rollup/plugin-json": "6.1.0",
     "@rushstack/eslint-patch": "1.12.0",
-    "@storybook/addon-essentials": "7.6.20",
+    "@storybook/addon-essentials": "7.6.21",
     "@storybook/addons": "7.6.17",
-    "@storybook/blocks": "7.6.20",
-    "@storybook/react": "7.6.20",
-    "@storybook/react-webpack5": "7.6.20",
+    "@storybook/blocks": "7.6.21",
+    "@storybook/react": "7.6.21",
+    "@storybook/react-webpack5": "7.6.21",
     "@svgr/cli": "7.0.0",
     "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "16.3.0",
+    "@testing-library/react": "16.3.1",
     "@testing-library/react-hooks": "8.0.1",
     "@types/fs-extra": "11.0.4",
     "@types/jest": "29.5.14",
@@ -61,13 +61,13 @@
     "@types/node": "22.14.1",
     "@types/react": "18.3.24",
     "@types/react-dom": "18.3.7",
-    "autoprefixer": "10.4.22",
+    "autoprefixer": "10.4.23",
     "core-js": "3.47.0",
     "css-loader": "7.1.2",
     "eslint": "8.57.1",
     "eslint-plugin-storybook": "^0.12.0",
     "file-loader": "6.2.0",
-    "fs-extra": "11.3.2",
+    "fs-extra": "11.3.3",
     "html-entities": "2.6.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
@@ -88,10 +88,10 @@
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-svgo": "2.0.0",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.96.0",
+    "sass": "1.97.2",
     "sass-loader": "13.3.3",
     "sharp-cli": "5.2.0",
-    "storybook": "7.6.20",
+    "storybook": "7.6.21",
     "style-loader": "4.0.0",
     "stylelint": "15.11.0",
     "svg2vectordrawable": "2.9.1",

package/styles/components/Buttons/Button/index.scss

@@ -17,7 +17,7 @@
   user-select: none;
   appearance: none;
 
-  &:active {
+  &:active:not([disabled]) {
     transform: scale(0.97);
   }
 
@@ -25,6 +25,8 @@
     width: 24px;
     height: 24px;
 
+    margin: initial;
+
     flex-shrink: 0;
   }
 
@@ -102,9 +104,16 @@
     @apply c-text-error;
   }
 
-  &[disabled][aria-disabled]:not([aria-disabled="false"]):not(
-      [aria-busy="true"]
-    ) {
+  &.cobalt-button--selected {
+    @apply c-bg-primaryContainer c-text-onPrimaryContainer c-border-onPrimaryContainer;
+  }
+
+  &[href][aria-disabled="true"] {
+    pointer-events: none;
+  }
+
+  &[disabled]:not([aria-busy="true"]),
+  &[href][aria-disabled="true"]:not([aria-busy="true"]) {
     @apply c-state-none c-text-onSurfaceDisabled c-drop-shadow-none hover:c-no-underline;
     opacity: 1;
     cursor: not-allowed;
@@ -131,10 +140,16 @@
   .cobalt-button__loading-icon {
     position: absolute;
 
+    display: none;
+
     margin: auto;
   }
 
   &[aria-busy="true"] > *:not(.cobalt-button__loading-icon) {
     color: transparent;
   }
+
+  &[aria-busy="true"] > .cobalt-button__loading-icon {
+    display: inline-block;
+  }
 }

package/types/src/components/Buttons/Button/type.d.ts

@@ -7,6 +7,7 @@ type SharedButtonApiProps = {
     icon?: React.ReactNode;
     text?: boolean;
     fullWidth?: boolean;
+    selected?: boolean;
     color?: never;
 };
 type SharedConditionalTextProps = {
@@ -28,6 +29,7 @@ type SharedConditionalVariantProps = {
     size: "small";
     destructive?: false;
     primary?: false;
+    selected?: false;
     variant: "warning" | "secondary" | "tertiary" | "business" | "success" | "neutral";
 } | {
     size: "small";

package/utilities.css

@@ -67,4 +67,36 @@
     inherits: false;
     initial-value: transparent;
   }
+
+  .c-state-interactive-halo {
+    position: relative;
+    z-index: 1;
+
+    cursor: pointer;
+  }
+
+  .c-state-interactive-halo:hover::after {
+    @apply c--m-xs c-rounded-xl c-state-interactive;
+
+    position: absolute;
+
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    z-index: -1;
+
+    display: inline-block;
+
+    content: "";
+  }
+
+  .c-state-interactive-with-images {
+    cursor: pointer;
+  }
+
+  .c-state-interactive-with-images:hover .c-state-interactive-image {
+    filter: brightness(90%);
+  }
 }