palantir · adidahiya · Oct 10, 2023 · Oct 6, 2023 · Oct 6, 2023 · Oct 6, 2023
diff --git a/packages/core/src/components/card-list/card-list.scss b/packages/core/src/components/card-list/card-list.scss
@@ -26,6 +26,16 @@
       }
     }
 
+    &.#{$ns}-selected {
+      background-color: $light-gray4;
+      box-shadow: none;
+
+      .#{$ns}-dark & {
+        background-color: $dark-gray5;
+        box-shadow: none;
+      }
+    }
+
     &:not(:last-child) {
       border-bottom: $card-list-border-width solid $pt-divider-black-muted;
 

diff --git a/packages/core/src/components/card/_card.scss b/packages/core/src/components/card/_card.scss
@@ -72,9 +72,17 @@ Styleguide card
     }
   }
 
+  &.#{$ns}-selected {
+    box-shadow: 0 0 0 3px rgba($blue4, 0.2), 0 0 0 1px $blue4;
+
+    &.#{$ns}-dark,
+    .#{$ns}-dark & {
+      box-shadow: 0 0 0 3px rgba($blue5, 0.4), 0 0 0 1px $blue5;
+    }
+  }
+
   &:active {
     box-shadow: $pt-elevation-shadow-1;
-    opacity: 0.9;
     transition-duration: 0;
 
     &.#{$ns}-dark,

diff --git a/packages/core/src/components/card/card.tsx b/packages/core/src/components/card/card.tsx
@@ -41,6 +41,13 @@ export interface CardProps extends Props, HTMLDivProps, React.RefAttributes<HTML
      */
     interactive?: boolean;
 
+    /**
+     * Whether this card should appear selected.
+     *
+     * @default undefined
+     */
+    selected?: boolean;
+
     /**
      * Whether this component should use compact styles with reduced visual padding.
      *
@@ -61,13 +68,12 @@ export interface CardProps extends Props, HTMLDivProps, React.RefAttributes<HTML
  * @see https://blueprintjs.com/docs/#core/components/card
  */
 export const Card: React.FC<CardProps> = React.forwardRef((props, ref) => {
-    const { className, elevation, interactive, compact, ...htmlProps } = props;
-    const classes = classNames(
-        Classes.CARD,
-        { [Classes.INTERACTIVE]: interactive, [Classes.COMPACT]: compact },
-        Classes.elevationClass(elevation!),
-        className,
-    );
+    const { className, elevation, interactive, selected, compact, ...htmlProps } = props;
+    const classes = classNames(className, Classes.CARD, Classes.elevationClass(elevation!), {
+        [Classes.INTERACTIVE]: interactive,
+        [Classes.COMPACT]: compact,
+        [Classes.SELECTED]: selected,
+    });
     return <div className={classes} ref={ref} {...htmlProps} />;
 });
 Card.defaultProps = {

diff --git a/packages/core/src/components/control-card/control-card.md b/packages/core/src/components/control-card/control-card.md
@@ -14,6 +14,9 @@ There are a few supported form controls:
 The children of a control card will be used as the `labelElement` of the form control. Users may click anywhere
 inside the card to toggle the control state.
 
+By default, a "checked" control card will be displayed with the same appearance as a "selected" card. This behavior
+may be toggled with the `showAsSelectedWhenChecked` prop.
+
 @## SwitchCard
 
 Card with an embedded [**Switch**](#core/components/switch) control.

diff --git a/packages/core/src/components/control-card/controlCard.tsx b/packages/core/src/components/control-card/controlCard.tsx
@@ -20,7 +20,9 @@ import * as React from "react";
 import { Classes } from "../../common";
 import { DISPLAYNAME_PREFIX, HTMLInputProps } from "../../common/props";
 import { Card, CardProps } from "../card/card";
-import { ControlProps, Switch } from "../forms/controls";
+import type { CheckedControlProps, ControlProps } from "../forms/controlProps";
+import { Switch } from "../forms/controls";
+import { useCheckedControl } from "./useCheckedControl";
 
 /**
  * Subset of {@link Card} which can be used to adjust its behavior.
@@ -30,7 +32,7 @@ type SupportedCardProps = Omit<CardProps, "interactive" | "onChange">;
 /**
  * Subset of {@link ControlProps} which can be used to adjust its behavior.
  */
-type SupportedControlProps = Pick<ControlProps, "checked" | "defaultChecked" | "disabled" | "inputRef" | "onChange">;
+type SupportedControlProps = Pick<ControlProps, keyof CheckedControlProps | "disabled" | "inputRef">;
 
 export interface ControlCardProps extends SupportedCardProps, SupportedControlProps {
     /**
@@ -43,42 +45,52 @@ export interface ControlCardProps extends SupportedCardProps, SupportedControlPr
      * HTML input attributes to forward to the control `<input>` element.
      */
     inputProps?: HTMLInputProps;
+
+    /**
+     * Whether the component should use "selected" Card styling when checked.
+     *
+     * @default true
+     */
+    showAsSelectedWhenChecked?: boolean;
 }
 
 /**
  * ControlCard component, used to render a {@link Card} with a form control.
  *
  * @internal
  */
+
 export const ControlCard: React.FC<ControlCardProps> = React.forwardRef((props, ref) => {
     const {
-        checked,
+        checked: _checked,
         children: labelContent,
         className,
         controlKind,
-        defaultChecked,
+        defaultChecked: _defaultChecked,
         disabled,
         inputProps,
         inputRef,
-        onChange,
+        onChange: _onChange,
+        showAsSelectedWhenChecked,
         ...cardProps
     } = props;
 
-    const classes = classNames(Classes.CONTROL_CARD, className, {
-        [Classes.SWITCH_CONTROL_CARD]: controlKind === "switch",
-    });
+    const { checked, onChange } = useCheckedControl(props);
 
     // use a container element to achieve a good flex layout
     const labelElement = <div className={Classes.CONTROL_CARD_LABEL}>{labelContent}</div>;
     const controlProps: ControlProps = {
         checked,
-        defaultChecked,
         disabled,
         inputRef,
         labelElement,
         onChange,
         ...inputProps,
     };
+    const classes = classNames(Classes.CONTROL_CARD, className, {
+        [Classes.SWITCH_CONTROL_CARD]: controlKind === "switch",
+        [Classes.SELECTED]: showAsSelectedWhenChecked && checked,
+    });
 
     return (
         <Card interactive={!disabled} className={classes} ref={ref} {...cardProps}>
@@ -90,5 +102,7 @@ export const ControlCard: React.FC<ControlCardProps> = React.forwardRef((props,
         </Card>
     );
 });
-ControlCard.defaultProps = {};
+ControlCard.defaultProps = {
+    showAsSelectedWhenChecked: true,
+};
 ControlCard.displayName = `${DISPLAYNAME_PREFIX}.ControlCard`;
diff --git a/packages/core/src/components/control-card/useCheckedControl.ts b/packages/core/src/components/control-card/useCheckedControl.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2023 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+
+import type { CheckedControlProps } from "../forms/controlProps";
+
+/**
+ * Keep track of a control's checked state in both controlled and uncontrolled modes
+ */
+export function useCheckedControl(props: CheckedControlProps) {
+    const [checked, setChecked] = React.useState(() => props.defaultChecked ?? false);
+    React.useEffect(() => {
+        if (props.checked !== undefined) {
+            setChecked(props.checked);
+        }
+    }, [props.checked]);
+    const onChange = React.useCallback<React.ChangeEventHandler<HTMLInputElement>>(
+        e => {
+            setChecked(c => !c);
+            props.onChange?.(e);
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [props.onChange],
+    );
+    return { checked, onChange };
+}
diff --git a/packages/core/src/components/forms/controlProps.ts b/packages/core/src/components/forms/controlProps.ts
@@ -0,0 +1,89 @@
+/*
+ * Copyright 2023 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type * as React from "react";
+
+import type { Alignment } from "../../common";
+import type { HTMLInputProps, Props } from "../../common/props";
+
+export interface CheckedControlProps {
+    /** Whether the control is checked. */
+    checked?: boolean;
+
+    /** Whether the control is initially checked (uncontrolled mode). */
+    defaultChecked?: boolean;
+
+    /** Event handler invoked when input value is changed. */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+export interface ControlProps
+    extends CheckedControlProps,
+        Props,
+        HTMLInputProps,
+        React.RefAttributes<HTMLLabelElement> {
+    // NOTE: Some HTML props are duplicated here to provide control-specific documentation
+
+    /**
+     * Alignment of the indicator within container.
+     *
+     * @default Alignment.LEFT
+     */
+    alignIndicator?: Alignment;
+
+    /** JSX label for the control. */
+    children?: React.ReactNode;
+
+    /** Whether the control is non-interactive. */
+    disabled?: boolean;
+
+    /** Whether the control should appear as an inline element. */
+    inline?: boolean;
+
+    /** Ref attached to the HTML `<input>` element backing this component. */
+    inputRef?: React.Ref<HTMLInputElement>;
+
+    /**
+     * Text label for the control.
+     *
+     * Use `children` or `labelElement` to supply JSX content. This prop actually supports JSX elements,
+     * but TypeScript will throw an error because `HTMLAttributes` only allows strings.
+     */
+    label?: string;
+
+    /**
+     * JSX Element label for the control.
+     *
+     * This prop is a workaround for TypeScript consumers as the type definition for `label` only
+     * accepts strings. JavaScript consumers can provide a JSX element directly to `label`.
+     */
+    labelElement?: React.ReactNode;
+
+    /** Whether this control should use large styles. */
+    large?: boolean;
+
+    /**
+     * Name of the HTML tag that wraps the checkbox.
+     *
+     * By default a `<label>` is used, which effectively enlarges the click
+     * target to include all of its children. Supply a different tag name if
+     * this behavior is undesirable or you're listening to click events from a
+     * parent element (as the label can register duplicate clicks).
+     *
+     * @default "label"
+     */
+    tagName?: keyof JSX.IntrinsicElements;
+}
diff --git a/packages/core/src/components/forms/controls.tsx b/packages/core/src/components/forms/controls.tsx
@@ -17,71 +17,9 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { Alignment, Classes, mergeRefs } from "../../common";
-import { DISPLAYNAME_PREFIX, HTMLInputProps, Props } from "../../common/props";
-
-export interface ControlProps extends Props, HTMLInputProps, React.RefAttributes<HTMLLabelElement> {
-    // NOTE: HTML props are duplicated here to provide control-specific documentation
-
-    /**
-     * Alignment of the indicator within container.
-     *
-     * @default Alignment.LEFT
-     */
-    alignIndicator?: Alignment;
-
-    /** Whether the control is checked. */
-    checked?: boolean;
-
-    /** JSX label for the control. */
-    children?: React.ReactNode;
-
-    /** Whether the control is initially checked (uncontrolled mode). */
-    defaultChecked?: boolean;
-
-    /** Whether the control is non-interactive. */
-    disabled?: boolean;
-
-    /** Whether the control should appear as an inline element. */
-    inline?: boolean;
-
-    /** Ref attached to the HTML `<input>` element backing this component. */
-    inputRef?: React.Ref<HTMLInputElement>;
-
-    /**
-     * Text label for the control.
-     *
-     * Use `children` or `labelElement` to supply JSX content. This prop actually supports JSX elements,
-     * but TypeScript will throw an error because `HTMLAttributes` only allows strings.
-     */
-    label?: string;
-
-    /**
-     * JSX Element label for the control.
-     *
-     * This prop is a workaround for TypeScript consumers as the type definition for `label` only
-     * accepts strings. JavaScript consumers can provide a JSX element directly to `label`.
-     */
-    labelElement?: React.ReactNode;
-
-    /** Whether this control should use large styles. */
-    large?: boolean;
-
-    /** Event handler invoked when input value is changed. */
-    onChange?: React.FormEventHandler<HTMLInputElement>;
-
-    /**
-     * Name of the HTML tag that wraps the checkbox.
-     *
-     * By default a `<label>` is used, which effectively enlarges the click
-     * target to include all of its children. Supply a different tag name if
-     * this behavior is undesirable or you're listening to click events from a
-     * parent element (as the label can register duplicate clicks).
-     *
-     * @default "label"
-     */
-    tagName?: keyof JSX.IntrinsicElements;
-}
+import { Classes, mergeRefs } from "../../common";
+import { DISPLAYNAME_PREFIX } from "../../common/props";
+import type { ControlProps } from "./controlProps";
 
 /** Internal props for Checkbox/Radio/Switch to render correctly. */
 interface ControlInternalProps extends ControlProps {
@@ -248,7 +186,7 @@ export const Checkbox: React.FC<CheckboxProps> = React.forwardRef((props, ref) =
             // otherwise wait for props change. always invoke handler.
             onChange?.(evt);
         },
-        [onChange],
+        [indeterminate, onChange],
     );
 
     React.useEffect(() => {