[core] feat(Card): new "compact" prop (#6432)

Co-authored-by: Charles <cperinet@palantir.com> Co-authored-by: Adi Dahiya <adahiya@palantir.com>
palantir · Oct 6, 2023 · a2fed89 · a2fed89 · adidahiya · Oct 6, 2023
1 parent 4603072
commit a2fed89
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 41 deletions.
diff --git a/packages/core/src/components/card-list/card-list.scss b/packages/core/src/components/card-list/card-list.scss
@@ -35,9 +35,13 @@
     }
   }
 
-  &.#{$ns}-compact > .#{$ns}-card {
-    min-height: $card-list-item-min-height-compact;
-    padding: $card-list-item-padding-compact;
+  &.#{$ns}-compact {
+    padding: 0;
+
+    > .#{$ns}-card {
+      min-height: $card-list-item-min-height-compact;
+      padding: $card-list-item-padding-compact;
+    }
   }
 
   .#{$ns}-dark & {

diff --git a/packages/core/src/components/card-list/cardList.tsx b/packages/core/src/components/card-list/cardList.tsx
@@ -36,6 +36,9 @@ export interface CardListProps extends Props, HTMLDivProps, React.RefAttributes<
     /**
      * Whether this component should use compact styles with reduced visual padding.
      *
+     * Note that this prop affects styling for all Cards within this CardList and you do not need to set the
+     * `compact` prop individually on those child Cards.
+     *
      * @default false
      */
     compact?: boolean;

diff --git a/packages/core/src/components/card/_card.scss b/packages/core/src/components/card/_card.scss
@@ -57,6 +57,10 @@ Styleguide card
   }
 }
 
+.#{$ns}-card.#{$ns}-compact {
+  padding: $card-padding-compact;
+}
+
 .#{$ns}-card.#{$ns}-interactive {
   &:hover {
     box-shadow: $pt-elevation-shadow-3;

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 component should use compact styles with reduced visual padding.
+     *
+     * @default false
+     */
+    compact?: boolean;
+
     /**
      * Callback invoked when the card is clicked.
      * Recommended when `interactive` is `true`.
@@ -54,10 +61,10 @@ 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, ...htmlProps } = props;
+    const { className, elevation, interactive, compact, ...htmlProps } = props;
     const classes = classNames(
         Classes.CARD,
-        { [Classes.INTERACTIVE]: interactive },
+        { [Classes.INTERACTIVE]: interactive, [Classes.COMPACT]: compact },
         Classes.elevationClass(elevation!),
         className,
     );

diff --git a/packages/core/src/components/control-card/_control-card.scss b/packages/core/src/components/control-card/_control-card.scss
@@ -16,7 +16,7 @@
 
 .#{$ns}-switch-control-card {
   // need a lot of specificity here to override control styles
-  > .#{$ns}-switch.#{$ns}-control.#{$ns}-align-right {
+  .#{$ns}-switch.#{$ns}-control.#{$ns}-align-right {
     align-items: center;
     display: flex;
     flex-direction: row-reverse;
@@ -39,4 +39,8 @@
       margin: 0;
     }
   }
+
+  &.#{$ns}-compact .#{$ns}-switch.#{$ns}-control.#{$ns}-align-right {
+    padding: $card-padding-compact;
+  }
 }
diff --git a/packages/core/src/components/control-card/switchCard.tsx b/packages/core/src/components/control-card/switchCard.tsx
@@ -29,5 +29,4 @@ export type SwitchCardProps = Omit<ControlCardProps, "controlKind">;
 export const SwitchCard: React.FC<SwitchCardProps> = React.forwardRef((props, ref) => {
     return <ControlCard controlKind="switch" ref={ref} {...props} />;
 });
-SwitchCard.defaultProps = {};
 SwitchCard.displayName = `${DISPLAYNAME_PREFIX}.SwitchCard`;
diff --git a/packages/core/src/components/section/_section.scss b/packages/core/src/components/section/_section.scss
@@ -13,9 +13,14 @@ $section-card-padding-compact: $pt-grid-size * 1.5 !default;
 
 .#{$ns}-section {
   overflow: hidden;
-  padding: 0;
   width: 100%;
 
+  &,
+  &.#{$ns}-compact {
+    // override Card compact styles here
+    padding: 0;
+  }
+
   &-header {
     align-items: center;
     border-bottom: 1px solid $pt-divider-black;

diff --git a/packages/docs-app/src/examples/core-examples/cardExample.tsx b/packages/docs-app/src/examples/core-examples/cardExample.tsx
@@ -20,36 +20,21 @@ import { Button, Card, Classes, Elevation, H5, Label, Slider, Switch } from "@bl
 import { Example, ExampleProps } from "@blueprintjs/docs-theme";
 
 export interface CardExampleState {
+    compact: boolean;
     elevation: Elevation;
     interactive: boolean;
 }
 
 export class CardExample extends React.PureComponent<ExampleProps, CardExampleState> {
     public state: CardExampleState = {
+        compact: false,
         elevation: 0,
         interactive: false,
     };
 
     public render() {
-        const options = (
-            <>
-                <H5>Props</H5>
-                <Switch checked={this.state.interactive} label="Interactive" onChange={this.handleInteractiveChange} />
-                <Label>
-                    Elevation
-                    <Slider
-                        max={4}
-                        showTrackFill={false}
-                        value={this.state.elevation}
-                        onChange={this.handleElevationChange}
-                        handleHtmlProps={{ "aria-label": "card elevation" }}
-                    />
-                </Label>
-            </>
-        );
-
         return (
-            <Example options={options} {...this.props}>
+            <Example options={this.renderOptions()} {...this.props}>
                 <Card {...this.state}>
                     <H5>Analytical applications</H5>
                     <p>
@@ -62,7 +47,27 @@ export class CardExample extends React.PureComponent<ExampleProps, CardExampleSt
         );
     }
 
+    private renderOptions = () => (
+        <>
+            <H5>Props</H5>
+            <Switch checked={this.state.interactive} label="Interactive" onChange={this.handleInteractiveChange} />
+            <Switch checked={this.state.compact} label="Compact" onChange={this.handleCompactChange} />
+            <Label>
+                Elevation
+                <Slider
+                    max={4}
+                    showTrackFill={false}
+                    value={this.state.elevation}
+                    onChange={this.handleElevationChange}
+                    handleHtmlProps={{ "aria-label": "card elevation" }}
+                />
+            </Label>
+        </>
+    );
+
     private handleElevationChange = (elevation: Elevation) => this.setState({ elevation });
 
     private handleInteractiveChange = () => this.setState({ interactive: !this.state.interactive });
+
+    private handleCompactChange = () => this.setState({ compact: !this.state.compact });
 }
diff --git a/packages/docs-app/src/examples/core-examples/switchCardExample.tsx b/packages/docs-app/src/examples/core-examples/switchCardExample.tsx
@@ -16,46 +16,41 @@
 
 import * as React from "react";
 
-import { H5, Switch, SwitchCard } from "@blueprintjs/core";
+import { H5, Switch, SwitchCard, SwitchCardProps } from "@blueprintjs/core";
 import { Example, ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
 
-interface SwitchCardExampleState {
-    // TODO: add compact option
-    // compact: boolean;
-    disabled: boolean;
-}
+type SwitchCardExampleState = Pick<SwitchCardProps, "compact" | "disabled">;
 
 export class SwitchCardExample extends React.PureComponent<ExampleProps, SwitchCardExampleState> {
     public state: SwitchCardExampleState = {
-        // TODO: add compact option
-        // compact: false,
+        compact: false,
         disabled: false,
     };
 
     public render() {
-        const { disabled } = this.state;
-        const sharedProps = { disabled };
-
         return (
             <Example options={this.renderOptions()} {...this.props}>
                 <div className="docs-control-card-grid">
-                    <SwitchCard {...sharedProps}>Wifi</SwitchCard>
-                    <SwitchCard {...sharedProps}>Bluetooth</SwitchCard>
-                    <SwitchCard {...sharedProps}>NFC</SwitchCard>
+                    <SwitchCard {...this.state}>Wifi</SwitchCard>
+                    <SwitchCard {...this.state}>Bluetooth</SwitchCard>
+                    <SwitchCard {...this.state}>NFC</SwitchCard>
                 </div>
             </Example>
         );
     }
 
     private renderOptions() {
-        const { disabled } = this.state;
+        const { compact, disabled } = this.state;
         return (
             <>
                 <H5>Props</H5>
+                <Switch checked={compact} label="Compact" onChange={this.toggleCompact} />
                 <Switch checked={disabled} label="Disabled" onChange={this.toggleDisabled} />
             </>
         );
     }
 
+    private toggleCompact = handleBooleanChange(compact => this.setState({ compact }));
+
     private toggleDisabled = handleBooleanChange(disabled => this.setState({ disabled }));
 }