Migrate "visualizations" from grid-styled (#20215)

frontend/src/metabase/visualizations/components/ScalarValue.jsx

@@ -9,18 +9,10 @@ import Ellipsified from "metabase/components/Ellipsified";
 import Icon from "metabase/components/Icon";
 import Tooltip from "metabase/components/Tooltip";
 
-import { Flex } from "grid-styled";
+import { ScalarRoot } from "./ScalarValue.styled";
 
 export const ScalarWrapper = ({ children }) => (
-  <Flex
-    align="center"
-    justify="center"
-    flexDirection="column"
-    className="full-height full flex-wrap relative"
-    flex={1}
-  >
-    {children}
-  </Flex>
+  <ScalarRoot>{children}</ScalarRoot>
 );
 
 const ScalarValue = ({ value, isFullscreen, isDashboard }) => (

frontend/src/metabase/visualizations/components/ScalarValue.styled.tsx

+import styled from "styled-components";
+
+export const ScalarRoot = styled.div`
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+`;

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

@@ -2,7 +2,6 @@
 import React from "react";
 import cx from "classnames";
 import { t } from "ttag";
-import { Flex } from "grid-styled";
 import { DragSource, DropTarget } from "react-dnd";
 import _ from "underscore";
 import { assocIn } from "icepick";
@@ -22,6 +21,11 @@ import {
   COLUMN_SORT_ORDER_DESC,
 } from "metabase/lib/data_grid";
 import { keyForColumn } from "metabase/lib/dataset";
+import {
+  FormattingOptionsRoot,
+  ShowTotalsOptionRoot,
+  SortOrderOptionRoot,
+} from "./ChartSettingFieldsPartition.styled";
 
 const DragWrapper = styled.div`
   padding: 12px 14px;
@@ -37,10 +41,10 @@ function ShowTotalsOption({ value, onChange }) {
     return null;
   }
   return (
-    <Flex pt={2} justifyContent="space-between" alignItems="center">
+    <ShowTotalsOptionRoot>
       <Text>{t`Show totals`}</Text>
       <Toggle value={value} onChange={() => onChange(!value)}></Toggle>
-    </Flex>
+    </ShowTotalsOptionRoot>
   );
 }
 
@@ -61,7 +65,7 @@ function SortButton({ iconName, onChange, currentValue, buttonValue }) {
 
 function SortOrderOption({ value, onChange }) {
   return (
-    <Flex pt={1} justifyContent="space-between" alignItems="center">
+    <SortOrderOptionRoot>
       <Text>{t`Sort order`}</Text>
       <div>
         <SortButton
@@ -77,19 +81,19 @@ function SortOrderOption({ value, onChange }) {
           buttonValue={COLUMN_SORT_ORDER_DESC}
         />
       </div>
-    </Flex>
+    </SortOrderOptionRoot>
   );
 }
 
 function FormattingOptions({ onEdit }) {
   return (
-    <Flex pt={1} justifyContent="space-between" alignItems="center">
+    <FormattingOptionsRoot>
       <Text>{t`Formatting`}</Text>
       <Text
         onClick={onEdit}
         className="text-brand text-bold cursor-pointer"
       >{t`See options…`}</Text>
-    </Flex>
+    </FormattingOptionsRoot>
   );
 }
 

frontend/src/metabase/visualizations/components/settings/ChartSettingFieldsPartition.styled.tsx

+import styled from "styled-components";
+
+export const ShowTotalsOptionRoot = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 1rem;
+`;
+
+export const SortOrderOptionRoot = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 0.5rem;
+`;
+
+export const FormattingOptionsRoot = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 0.5rem;
+`;

frontend/src/metabase/visualizations/visualizations/SmartScalar.jsx

 /* eslint-disable react/prop-types */
 import React from "react";
-import { Box } from "grid-styled";
 import { t, jt } from "ttag";
 import _ from "underscore";
 
@@ -183,12 +182,12 @@ export default class Smart extends React.Component {
             }
           />
         )}
-        <Box className="SmartWrapper">
+        <div className="SmartWrapper">
           {lastChange == null || previousValue == null ? (
-            <Box
+            <div
               className="text-centered text-bold mt1"
-              color={color("text-medium")}
-            >{jt`Nothing to compare for the previous ${granularity}.`}</Box>
+              style={{ color: color("text-medium") }}
+            >{jt`Nothing to compare for the previous ${granularity}.`}</div>
           ) : lastChange === 0 ? (
             t`No change from last ${granularity}`
           ) : (
@@ -209,7 +208,7 @@ export default class Smart extends React.Component {
               </PreviousValueVariation>
             </PreviousValueContainer>
           )}
-        </Box>
+        </div>
       </ScalarWrapper>
     );
   }