Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add minimal prop to Callout which hides the background fill color #6952

Merged
merged 5 commits into from
Aug 27, 2024
Merged

Add minimal prop to Callout which hides the background fill color #6952

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5378d05
Add minimal prop to callout
Aug 27, 2024
f2dcb02
Add default
Aug 27, 2024
744eab2
Add generated changelog entries
svc-changelog Aug 27, 2024
45dcaa3
Address comments
Aug 27, 2024
79ce206
lint
Aug 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/core/changelog/@unreleased/pr-6952.v2.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
type: feature
feature:
description: Add minimal prop to Callout which hides the background fill color
links:
- https://github.com/palantir/blueprint/pull/6952
8 changes: 8 additions & 0 deletions packages/core/src/components/callout/_callout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,14 @@ $callout-padding-compact: $pt-grid-size;
}
}

&.#{$ns}-minimal,
&.#{$ns}-minimal.#{$ns}-intent-primary,
&.#{$ns}-minimal.#{$ns}-intent-success,
&.#{$ns}-minimal.#{$ns}-intent-warning,
&.#{$ns}-minimal.#{$ns}-intent-danger {
background-color: transparent;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of explicitly overwriting styles, could we instead use a negation pseudo-class to prevent the background color from being applied in the first case if the callout is minimal? e.g.

.#{$ns}-callout {
  &:not(.#{$ns}-minimal) {
    background-color: rgba($gray3, 0.15);
  }

  .#{$ns}-dark & {
    &:not(.#{$ns}-minimal) {
      background-color: rgba($gray3, 0.2);
    }
  }

  @each $intent, $color in $pt-intent-colors {
    &.#{$ns}-intent-#{$intent} {
      &:not(.#{$ns}-minimal) {
        background-color: rgba($color, 0.1);
      }

      .#{$ns}-dark & {
        &:not(.#{$ns}-minimal) {
          background-color: rgba($color, 0.2);
        }
      }
    }
  }
}


.#{$ns}-dark & {
background-color: rgba($gray3, 0.2);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like we're missing overrides for the dark mode variants of Callout.

Screenshot 2024-08-27 at 15 03 26


Expand Down
10 changes: 9 additions & 1 deletion packages/core/src/components/callout/callout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,13 @@ export interface CalloutProps extends IntentProps, Props, HTMLDivProps {
*/
intent?: Intent;

/**
* Whether the callout should have a minimal appearance with no background color fill.
*
* @default false
*/
minimal?: boolean;

/**
* String content of optional title element.
*
Expand All @@ -78,12 +85,13 @@ export class Callout extends AbstractPureComponent<CalloutProps> {
public static displayName = `${DISPLAYNAME_PREFIX}.Callout`;

public render() {
const { className, children, icon, intent, title, compact, ...htmlProps } = this.props;
const { className, children, icon, intent, title, compact, minimal = false, ...htmlProps } = this.props;
const iconElement = this.renderIcon(icon, intent);
const classes = classNames(Classes.CALLOUT, Classes.intentClass(intent), className, {
[Classes.CALLOUT_HAS_BODY_CONTENT]: !Utils.isReactNodeEmpty(children),
[Classes.CALLOUT_ICON]: iconElement != null,
[Classes.COMPACT]: compact,
[Classes.MINIMAL]: minimal,
});

return (
Expand Down
5 changes: 5 additions & 0 deletions packages/docs-app/changelog/@unreleased/pr-6952.v2.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
type: feature
feature:
description: Add minimal prop to Callout which hides the background fill color
links:
- https://github.com/palantir/blueprint/pull/6952
7 changes: 6 additions & 1 deletion packages/docs-app/src/examples/core-examples/calloutExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export const CalloutExample: React.FC<DocsExampleProps> = props => {
const [showTitle, setShowTitle] = React.useState(true);
const [icon, setIcon] = React.useState<IconName>();
const [intent, setIntent] = React.useState<Intent>();
const [minimal, setMinimal] = React.useState(false);

/* eslint-disable react/jsx-key */
const children = [
Expand All @@ -48,6 +49,7 @@ export const CalloutExample: React.FC<DocsExampleProps> = props => {
<H5>Props</H5>
<Switch checked={showTitle} label="Title" onChange={handleBooleanChange(setShowTitle)} />
<Switch checked={compact} label="Compact" onChange={handleBooleanChange(setCompact)} />
<Switch checked={minimal} label="Minimal" onChange={handleBooleanChange(setMinimal)} />
<IntentSelect intent={intent} onChange={setIntent} showClearButton={true} />
<IconSelect iconName={icon} onChange={setIcon} />
<H5>Children</H5>
Expand All @@ -65,7 +67,10 @@ export const CalloutExample: React.FC<DocsExampleProps> = props => {

return (
<Example options={options} {...props}>
<Callout {...{ compact, intent, icon }} title={showTitle ? "Visually important content" : undefined}>
<Callout
{...{ compact, intent, icon, minimal }}
title={showTitle ? "Visually important content" : undefined}
>
{children}
</Callout>
</Example>
Expand Down