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

) Co-authored-by: Alex Liu <aliu@palantir.com> Co-authored-by: svc-changelog <svc-changelog@palantir.com>
palantir · Aug 27, 2024 · dc1b162 · dc1b162 · svc-palantir-github · Aug 27, 2024
1 parent 15758ab
commit dc1b162
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 6 deletions.
diff --git a/packages/core/changelog/@unreleased/pr-6952.v2.yml 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
@@ -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
@@ -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<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 (

diff --git a/packages/docs-app/changelog/@unreleased/pr-6952.v2.yml 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
@@ -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 = [
@@ -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>
@@ -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>