-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[core] feat: SwitchCard component (#6250)
Co-authored-by: Adi Dahiya <adahiya@palantir.com>
- Loading branch information
Showing
21 changed files
with
538 additions
and
104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| // Copyright 2023 Palantir Technologies, Inc. All rights reserved. | ||
| // Licensed under the Apache License, Version 2.0. | ||
|
|
||
| @import "../../common/variables-extended"; | ||
|
|
||
| $card-padding: $pt-grid-size * 2 !default; | ||
| $card-padding-compact: $pt-grid-size * 1.5 !default; | ||
|
|
||
| $card-background-color: $white !default; | ||
| $dark-card-background-color: $dark-gray3 !default; | ||
|
|
||
| $card-list-border-width: 1px !default; | ||
|
|
||
| // stylelint-disable max-line-length | ||
|
|
||
| // CardList Card item min-height is calculated as height of a button + vertical padding. | ||
| // We need to add an extra pixel to account for the bottom border. | ||
| $card-list-item-padding-vertical: $pt-grid-size !default; | ||
| $card-list-item-min-height: $pt-button-height + ($card-list-item-padding-vertical * 2) + $card-list-border-width !default; | ||
| $card-list-item-padding: $card-list-item-padding-vertical $card-padding !default; | ||
|
|
||
| $card-list-item-padding-vertical-compact: 7px !default; | ||
| $card-list-item-min-height-compact: $pt-button-height + ($card-list-item-padding-vertical-compact * 2) + $card-list-border-width !default; | ||
| $card-list-item-padding-compact: $card-list-item-padding-vertical-compact $card-padding-compact !default; | ||
|
|
||
| // CardList ControlCard item min-height is calculated as height of a control indicator + vertical padding | ||
| $card-list-control-item-padding-vertical: $card-padding; | ||
| $card-list-control-item-min-height: $control-indicator-size + ($card-list-control-item-padding-vertical * 2) + $card-list-border-width !default; | ||
| $card-list-control-item-padding-vertical-compact: $card-padding-compact; | ||
| $card-list-control-item-min-height-compact: $control-indicator-size + ($card-list-control-item-padding-vertical-compact * 2) + $card-list-border-width !default; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
42 changes: 42 additions & 0 deletions
42
packages/core/src/components/control-card/_control-card.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| // Copyright 2023 Palantir Technologies, Inc. All rights reserved. | ||
| // Licensed under the Apache License, Version 2.0. | ||
|
|
||
| @import "../card/card-variables"; | ||
|
|
||
| // use an extra selector to increase specificity | ||
| .#{$ns}-card.#{$ns}-control-card { | ||
| &, | ||
| .#{$ns}-card-list > & { | ||
| // min-height & padding will be set on the label element so that it can take up the full size of the card and | ||
| // its entire visual element will be interactive This is partially to work around https://github.com/palantir/blueprint/issues/6251 | ||
| min-height: auto; | ||
| padding: 0; | ||
| } | ||
| } | ||
|
|
||
| .#{$ns}-switch-control-card { | ||
| // need a lot of specificity here to override control styles | ||
| > .#{$ns}-switch.#{$ns}-control.#{$ns}-align-right { | ||
| align-items: center; | ||
| display: flex; | ||
| flex-direction: row-reverse; | ||
| justify-content: space-between; | ||
| margin: 0; | ||
| padding: $card-padding; | ||
| width: calc(100%); | ||
|
|
||
| .#{$ns}-card-list & { | ||
| min-height: $card-list-control-item-min-height; | ||
| padding: $card-list-item-padding; | ||
| } | ||
|
|
||
| .#{$ns}-card-list.#{$ns}-compact & { | ||
| min-height: $card-list-control-item-min-height-compact; | ||
| padding: $card-list-item-padding-compact; | ||
| } | ||
|
|
||
| .#{$ns}-control-indicator { | ||
| margin: 0; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| --- | ||
| tag: new | ||
| --- | ||
|
|
||
| @# Control card | ||
|
|
||
| A control card is an interactive [**Card**](#core/components/card) with an embedded form control. | ||
| There are a few supported form controls: | ||
|
|
||
| - [**SwitchCard**](#core/components/control-card.switch-card) | ||
| - CheckboxCard (_coming soon_) | ||
| - RadioCard (_coming soon_) | ||
|
|
||
| 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. | ||
|
|
||
| @## SwitchCard | ||
|
|
||
| Card with an embedded [**Switch**](#core/components/switch) control. | ||
|
|
||
| @reactExample SwitchCardExample | ||
|
|
||
| @### Props interface | ||
|
|
||
| Most of the properties in [**CardProps**](#core/components/card.props-interface) and | ||
| [**SwitchProps**](#core/components/switch.props-interface) are available on the root component. | ||
|
|
||
| @interface SwitchCardProps | ||
|
|
||
| @## Composing with CardList | ||
|
|
||
| Control cards work just like regular cards inside a [**CardList**](#core/components/card-list). | ||
|
|
||
| @reactExample ControlCardListExample |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| /* | ||
| * 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 classNames from "classnames"; | ||
| 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"; | ||
|
|
||
| /** | ||
| * Subset of {@link Card} which can be used to adjust its behavior. | ||
| */ | ||
| 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">; | ||
|
|
||
| export interface ControlCardProps extends SupportedCardProps, SupportedControlProps { | ||
| /** | ||
| * Which kind of form control to render inside the card. | ||
| */ | ||
| controlKind: "switch"; | ||
|
|
||
| // N.B. this is split out of the root properties in the inerface because it would conflict with CardProps' HTMLDivProps | ||
| /** | ||
| * HTML input attributes to forward to the control `<input>` element. | ||
| */ | ||
| inputProps?: HTMLInputProps; | ||
| } | ||
|
|
||
| /** | ||
| * 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, | ||
| children: labelContent, | ||
| className, | ||
| controlKind, | ||
| defaultChecked, | ||
| disabled, | ||
| inputProps, | ||
| inputRef, | ||
| onChange, | ||
| ...cardProps | ||
| } = props; | ||
|
|
||
| const classes = classNames(Classes.CONTROL_CARD, className, { | ||
| [Classes.SWITCH_CONTROL_CARD]: controlKind === "switch", | ||
| }); | ||
|
|
||
| // 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, | ||
| }; | ||
|
|
||
| return ( | ||
| <Card interactive={!disabled} className={classes} ref={ref} {...cardProps}> | ||
| {controlKind === "switch" ? ( | ||
| <Switch inline={true} alignIndicator="right" {...controlProps} /> | ||
| ) : ( | ||
| labelElement | ||
| )} | ||
| </Card> | ||
| ); | ||
| }); | ||
| ControlCard.defaultProps = {}; | ||
| ControlCard.displayName = `${DISPLAYNAME_PREFIX}.ControlCard`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| /* | ||
| * 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 { DISPLAYNAME_PREFIX } from "../../common/props"; | ||
| import { ControlCard, ControlCardProps } from "./controlCard"; | ||
|
|
||
| export type SwitchCardProps = Omit<ControlCardProps, "controlKind">; | ||
|
|
||
| /** | ||
| * Switch Card component. | ||
| * | ||
| * @see https://blueprintjs.com/docs/#core/components/card#switch-card | ||
| */ | ||
| export const SwitchCard: React.FC<SwitchCardProps> = React.forwardRef((props, ref) => { | ||
| return <ControlCard controlKind="switch" ref={ref} {...props} />; | ||
| }); | ||
| SwitchCard.defaultProps = {}; | ||
| SwitchCard.displayName = `${DISPLAYNAME_PREFIX}.SwitchCard`; |
Oops, something went wrong.
4603072There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[core] feat: SwitchCard component (#6250)
Build artifact links for this commit: documentation | landing | table | demoThis is an automated comment from the deploy-preview CircleCI job.