Add render prop with onClose support to Triggerable. Use in table formatting setting

frontend/src/metabase/components/Triggerable.jsx

@@ -118,13 +118,16 @@ export default ComposedComponent =>
         });
       }
 
-      // if we have a single child which isn't an HTML element and doesn't have an onClose prop go ahead and inject it directly
       let { children } = this.props;
-      if (
+      if (typeof children === "function") {
+        // if children is a render prop, pass onClose to it
+        children = children({ onClose: this.onClose });
+      } else if (
         React.Children.count(children) === 1 &&
         React.Children.only(children).props.onClose === undefined &&
         typeof React.Children.only(children).type !== "string"
       ) {
+        // if we have a single child which isn't an HTML element and doesn't have an onClose prop go ahead and inject it directly
         children = React.cloneElement(children, { onClose: this.onClose });
       }
 

frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx

@@ -361,18 +361,23 @@ const ColorRangePicker = ({ colors, onChange, className, style }) => (
       />
     }
   >
-    <div className="pt1 mr1 flex flex-wrap" style={{ width: 300 }}>
-      {COLOR_RANGES.map(range => (
-        <div className={"mb1 pl1"} style={{ flex: "1 1 50%" }}>
-          <RangePreview
-            colors={range}
-            onClick={() => onChange(range)}
-            className={cx("bordered rounded overflow-hidden cursor-pointer")}
-            style={{ height: 30 }}
-          />
-        </div>
-      ))}
-    </div>
+    {({ onClose }) => (
+      <div className="pt1 mr1 flex flex-wrap" style={{ width: 300 }}>
+        {COLOR_RANGES.map(range => (
+          <div className={"mb1 pl1"} style={{ flex: "1 1 50%" }}>
+            <RangePreview
+              colors={range}
+              onClick={() => {
+                onChange(range);
+                onClose();
+              }}
+              className={cx("bordered rounded overflow-hidden cursor-pointer")}
+              style={{ height: 30 }}
+            />
+          </div>
+        ))}
+      </div>
+    )}
   </PopoverWithTrigger>
 );