diff --git a/packages/core/changelog/@unreleased/pr-6952.v2.yml b/packages/core/changelog/@unreleased/pr-6952.v2.yml new file mode 100644 index 00000000000..d86e7b3a9cf --- /dev/null +++ b/packages/core/changelog/@unreleased/pr-6952.v2.yml @@ -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 diff --git a/packages/core/src/components/callout/_callout.scss b/packages/core/src/components/callout/_callout.scss index 78ab1ab6904..d1c21bc50e0 100644 --- a/packages/core/src/components/callout/_callout.scss +++ b/packages/core/src/components/callout/_callout.scss @@ -27,12 +27,15 @@ $callout-padding-compact: $pt-grid-size; .#{$ns}-callout { @include running-typography(); - background-color: rgba($gray3, 0.15); border-radius: $pt-border-radius; padding: $callout-padding; position: relative; width: 100%; + &:not(.#{$ns}-minimal) { + background-color: rgba($gray3, 0.15); + } + // CSS API support &[class*="#{$ns}-icon-"] { padding-left: $callout-padding + $pt-icon-size-standard + ($pt-grid-size * 0.7); @@ -88,7 +91,9 @@ $callout-padding-compact: $pt-grid-size; } .#{$ns}-dark & { - background-color: rgba($gray3, 0.2); + &:not(.#{$ns}-minimal) { + background-color: rgba($gray3, 0.2); + } &[class*="#{$ns}-icon-"]::before, &.#{$ns}-callout-icon > .#{$ns}-icon:first-child { @@ -98,9 +103,12 @@ $callout-padding-compact: $pt-grid-size; @each $intent, $color in $pt-intent-colors { &.#{$ns}-intent-#{$intent} { - background-color: rgba($color, 0.1); color: map-get($pt-intent-text-colors, $intent); + &:not(.#{$ns}-minimal) { + background-color: rgba($color, 0.1); + } + @media (forced-colors: active) and (prefers-color-scheme: dark) { border: 1px solid $pt-high-contrast-mode-border-color; } @@ -112,9 +120,12 @@ $callout-padding-compact: $pt-grid-size; } .#{$ns}-dark & { - background-color: rgba($color, 0.2); color: map-get($pt-dark-intent-text-colors, $intent); + &:not(.#{$ns}-minimal) { + background-color: rgba($color, 0.2); + } + &[class*="#{$ns}-icon-"]::before, > .#{$ns}-icon:first-child, .#{$ns}-heading { diff --git a/packages/core/src/components/callout/callout.tsx b/packages/core/src/components/callout/callout.tsx index e166cf79508..fbaf94b77a1 100644 --- a/packages/core/src/components/callout/callout.tsx +++ b/packages/core/src/components/callout/callout.tsx @@ -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. * @@ -78,12 +85,13 @@ export class Callout extends AbstractPureComponent { 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 ( diff --git a/packages/docs-app/changelog/@unreleased/pr-6952.v2.yml b/packages/docs-app/changelog/@unreleased/pr-6952.v2.yml new file mode 100644 index 00000000000..d86e7b3a9cf --- /dev/null +++ b/packages/docs-app/changelog/@unreleased/pr-6952.v2.yml @@ -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 diff --git a/packages/docs-app/src/examples/core-examples/calloutExample.tsx b/packages/docs-app/src/examples/core-examples/calloutExample.tsx index 23b8a02ac43..a56737a0684 100644 --- a/packages/docs-app/src/examples/core-examples/calloutExample.tsx +++ b/packages/docs-app/src/examples/core-examples/calloutExample.tsx @@ -29,6 +29,7 @@ export const CalloutExample: React.FC = props => { const [showTitle, setShowTitle] = React.useState(true); const [icon, setIcon] = React.useState(); const [intent, setIntent] = React.useState(); + const [minimal, setMinimal] = React.useState(false); /* eslint-disable react/jsx-key */ const children = [ @@ -48,6 +49,7 @@ export const CalloutExample: React.FC = props => {
Props
+
Children
@@ -65,7 +67,10 @@ export const CalloutExample: React.FC = props => { return ( - + {children}