fix Callout icon positioning (#2400)

basically revert to CSS icon approach where a class on parent adds padding-left and icon is position absolute.
palantir · Apr 18, 2018 · db49d89 · db49d89 · blueprint-bot · Apr 18, 2018
1 parent a2707da
commit db49d89
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 21 deletions.
diff --git a/packages/core/src/components/callout/_callout.scss b/packages/core/src/components/callout/_callout.scss
@@ -26,8 +26,10 @@ Styleguide pt-callout
   position: relative;
   border-radius: $pt-border-radius;
   background-color: rgba($gray3, 0.15);
+  width: 100%;
   padding: $pt-grid-size ($pt-grid-size * 1.2) ($pt-grid-size * 0.9);
 
+  // CSS API support
   &[class*="pt-icon-"] {
     padding-left: ($pt-grid-size * 2) + $pt-icon-size-large;
 
@@ -40,6 +42,17 @@ Styleguide pt-callout
     }
   }
 
+  &.pt-callout-icon {
+    padding-left: ($pt-grid-size * 2) + $pt-icon-size-large;
+
+    .pt-icon {
+      position: absolute;
+      top: $pt-grid-size;
+      left: $pt-grid-size;
+      color: $pt-icon-color;
+    }
+  }
+
   .pt-callout-title {
     margin-top: 0;
     margin-bottom: $pt-grid-size / 2;
@@ -59,7 +72,7 @@ Styleguide pt-callout
       background-color: rgba($color, 0.15);
 
       &[class*="pt-icon-"]::before,
-      .pt-callout-icon,
+      .pt-icon,
       .pt-callout-title {
         color: map-get($pt-intent-text-colors, $intent);
       }
@@ -80,12 +93,3 @@ Styleguide pt-callout
     margin: ($pt-grid-size * 2) 0;
   }
 }
-
-// callout icon fills vertical space at left side, pushing title and content over.
-// note that CSS API `.pt-callout.pt-icon-[name]` is still supported.
-.pt-callout-icon {
-  float: left;
-  margin-right: $pt-grid-size;
-  height: 100%;
-  color: $pt-icon-color;
-}
diff --git a/packages/core/src/components/callout/callout.tsx b/packages/core/src/components/callout/callout.tsx
@@ -34,20 +34,17 @@ export class Callout extends React.PureComponent<ICalloutProps, {}> {
     public render() {
         const { className, children, icon: _nospread, intent, title, ...htmlProps } = this.props;
         const iconName = this.getIconName();
-        const classes = classNames(Classes.CALLOUT, Classes.intentClass(intent), className);
-
-        const maybeIcon =
-            iconName === undefined ? null : (
-                <span className={Classes.CALLOUT_ICON}>
-                    <Icon icon={iconName} iconSize={Icon.SIZE_LARGE} />
-                </span>
-            );
-        const maybeTitle = title === undefined ? undefined : <h4 className={Classes.CALLOUT_TITLE}>{title}</h4>;
+        const classes = classNames(
+            Classes.CALLOUT,
+            Classes.intentClass(intent),
+            { [Classes.CALLOUT_ICON]: iconName != null },
+            className,
+        );
 
         return (
             <div className={classes} {...htmlProps}>
-                {maybeIcon}
-                {maybeTitle}
+                {iconName && <Icon icon={iconName} iconSize={Icon.SIZE_LARGE} />}
+                {title && <h4 className={Classes.CALLOUT_TITLE}>{title}</h4>}
                 {children}
             </div>
         );