Migrate .clearfix (#41509)

frontend/src/metabase/admin/databases/components/DatabaseList/DatabaseList.jsx

@@ -76,7 +76,7 @@ export default class DatabaseList extends Component {
 
     return (
       <div className={CS.wrapper} data-testid="database-list">
-        <section className={cx(AdminS.PageHeader, CS.px2, "clearfix")}>
+        <section className={cx(AdminS.PageHeader, CS.px2, CS.clearfix)}>
           {isAdmin && (
             <Link
               to="/admin/databases/create"

frontend/src/metabase/admin/datamodel/metadata/components/MetadataTableColumn/MetadataTableColumn.tsx

@@ -92,7 +92,7 @@ const MetadataTableColumn = ({
               value={field.displayName()}
               onBlurChange={handleChangeName}
             />
-            <div className="clearfix">
+            <div className={CS.clearfix}>
               <div className={cx(CS.flex, CS.flexAuto)}>
                 <div className={cx(CS.pl1, CS.flexAuto)}>
                   <FieldVisibilityPicker

frontend/src/metabase/components/AdminHeader/AdminHeader.jsx

@@ -10,7 +10,7 @@ export default class AdminHeader extends Component {
       <div
         className={cx(
           "MetadataEditor-header",
-          "clearfix",
+          CS.clearfix,
           CS.relative,
           CS.flexNoShrink,
         )}

frontend/src/metabase/css/core/clearfix.module.css

@@ -10,20 +10,12 @@
  * 2. The use of `table` rather than `block` is only necessary if using
  *    `:before` to contain the top-margins of child elements.
  */
-:global(.clearfix::before),
-:global(.clearfix::after) {
+.clearfix::before,
+.clearfix::after {
   content: " "; /* 1 */
   display: table; /* 2 */
 }
 
-:global(.clearfix::after) {
+.clearfix::after {
   clear: both;
 }
-
-/**
- * For IE 6/7 only
- * Include this rule to trigger hasLayout and contain floats.
- */
-:global(.clearfix) {
-  *zoom: 1;
-}