chore: Moves WarningIconWithTooltip to own folder (#14123)

superset-frontend/src/components/WarningIconWithTooltip/WarningIconWithTooltip.stories.tsx

@@ -16,27 +16,29 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-@import '../../stylesheets/less/variables.less';
+import React from 'react';
+import WarningIconWithTooltip, { WarningIconWithTooltipProps } from '.';
 
-.TableSelector .fa-refresh {
+export default {
-  padding-left: 9px;
+  title: 'WarningIconWithTooltip',
-}
+  component: WarningIconWithTooltip,
+};
 
-.TableSelector .section {
+export const InteractiveWarningIcon = (args: WarningIconWithTooltipProps) => (
-  padding-bottom: 5px;
+  <div css={{ margin: 40 }}>
-  display: flex;
+    <WarningIconWithTooltip {...args} />
-  flex-direction: row;
+  </div>
-}
+);
 
-.TableSelector .select {
+InteractiveWarningIcon.args = {
-  flex-grow: 1;
+  warningMarkdown: 'Markdown example',
-}
+  size: 20,
+};
 
-.TableSelector .divider {
+InteractiveWarningIcon.story = {
-  border-bottom: 1px solid @gray-bg;
+  parameters: {
-  margin: 15px 0;
+    knobs: {
-}
+      disable: true,
-
+    },
-.TableLabel {
+  },
-  white-space: nowrap;
+};
-}

superset-frontend/src/components/WarningIconWithTooltip/index.tsx

@@ -17,11 +17,11 @@
  * under the License.
  */
 import React from 'react';
-import { supersetTheme, SafeMarkdown } from '@superset-ui/core';
+import { useTheme, SafeMarkdown } from '@superset-ui/core';
 import Icon from 'src/components/Icon';
 import { Tooltip } from 'src/components/Tooltip';
 
-interface WarningIconWithTooltipProps {
+export interface WarningIconWithTooltipProps {
   warningMarkdown: string;
   size?: number;
 }
@@ -30,13 +30,14 @@ function WarningIconWithTooltip({
   warningMarkdown,
   size = 24,
 }: WarningIconWithTooltipProps) {
+  const theme = useTheme();
   return (
     <Tooltip
       id="warning-tooltip"
       title={<SafeMarkdown source={warningMarkdown} />}
     >
       <Icon
-        color={supersetTheme.colors.alert.base}
+        color={theme.colors.alert.base}
         height={size}
         width={size}
         name="alert-solid"