Merge #132752

132752: ui: use `crl-ant` as antd classname prefix r=xinhaoz a=xinhaoz Aligns with CC pattern to use `crl-ant` as the antd classname prefix. This fixes styling for components lifted out from CC in `sharedFromCloud` in cluster-ui, which have some scss classes that use this prefix. Epic: none Release note: None Co-authored-by: Xin Hao Zhang <xzhang@cockroachlabs.com>
cockroachdb · Oct 16, 2024 · 35db162 · 35db162
2 parents 819c06a + 3fffa25
commit 35db162
Show file tree

Hide file tree

Showing 30 changed files with 178 additions and 178 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/activeExecutions/refreshControl/refreshControl.module.scss b/pkg/ui/workspaces/cluster-ui/src/activeExecutions/refreshControl/refreshControl.module.scss
@@ -21,7 +21,7 @@
   margin-right: 12px;
 }
 
-.ant-switch-checked {
+.crl-ant-switch-checked {
   background-color: $colors--primary-blue-3;
 }
 

diff --git a/pkg/ui/workspaces/cluster-ui/src/common/styles.module.scss b/pkg/ui/workspaces/cluster-ui/src/common/styles.module.scss
@@ -7,27 +7,27 @@
 
 .cockroach--tabs {
   overflow: visible !important;
-  :global(.ant-tabs-bar) {
+  :global(.crl-ant-tabs-bar) {
     border-bottom: 1px solid $grey2;
   }
 
-  :global(.ant-tabs-tab) {
+  :global(.crl-ant-tabs-tab) {
     font-family: $font-family--base;
     font-size: 16px;
     line-height: 1.5;
     letter-spacing: normal;
     color: $colors--neutral-7;
   }
 
-  :global(.ant-tabs-nav .ant-tabs-tab-active) {
+  :global(.crl-ant-tabs-nav .crl-ant-tabs-tab-active) {
     color: $colors--link;
   }
 
-  :global(.ant-tabs-nav .ant-tabs-tab:hover) {
+  :global(.crl-ant-tabs-nav .crl-ant-tabs-tab:hover) {
     color: $colors--link;
   }
 
-  :global(.ant-tabs-ink-bar) {
+  :global(.crl-ant-tabs-ink-bar) {
     height: 3px;
     border-radius: 40px;
     background-color: $blue;

diff --git a/.../workspaces/cluster-ui/src/components/regionNodesLabel/components/regionLabel.module.scss b/.../workspaces/cluster-ui/src/components/regionNodesLabel/components/regionLabel.module.scss
@@ -23,7 +23,7 @@
 }
 
 .badge {
-  :global(.ant-badge-count) {
+  :global(.crl-ant-badge-count) {
     background-color: $colors--neutral-1;
     font-size: 12px;
     height: 20px;

diff --git a/pkg/ui/workspaces/cluster-ui/src/dateRangeMenu/dateRangeMenu.module.scss b/pkg/ui/workspaces/cluster-ui/src/dateRangeMenu/dateRangeMenu.module.scss
@@ -16,7 +16,7 @@
     padding-bottom: 10px;
 
     a {
-      // Matches the color of .ant-dropdown, needed to override default anchor color. A cleaner way would be to install
+      // Matches the color of .crl-ant-dropdown, needed to override default anchor color. A cleaner way would be to install
       // and set up antd-scss-theme-plugin, and use the antd text-color variable.
       color: rgba(0, 0, 0, 0.65);
     }
@@ -30,7 +30,7 @@
     height: 12px;
   }
 
-  :global(.ant-picker) {
+  :global(.crl-ant-picker) {
     margin-right: 14px;
   }
 }

diff --git a/pkg/ui/workspaces/cluster-ui/src/jobs/jobs.module.scss b/pkg/ui/workspaces/cluster-ui/src/jobs/jobs.module.scss
@@ -146,7 +146,7 @@
     font-size: $font-size--medium;
     display: flex;
     align-items: center;
-    .ant-divider {
+    .crl-ant-divider {
       height: 20px;
     }
   }
@@ -166,7 +166,7 @@
   .job-status__line--percentage {
     display: flex;
     align-items: center;
-    .ant-divider {
+    .crl-ant-divider {
       height: 20px;
     }
     span {
@@ -178,7 +178,7 @@
       margin: 0;
     }
   }
-  .ant-divider {
+  .crl-ant-divider {
     margin-left: 15px;
     margin-right: 15px;
   }

diff --git a/pkg/ui/workspaces/cluster-ui/src/modal/modal.module.scss b/pkg/ui/workspaces/cluster-ui/src/modal/modal.module.scss
@@ -8,24 +8,24 @@
 .crl-modal {
   @include base;
   :global {
-    .ant-modal-footer {
+    .crl-ant-modal-footer {
       border-top: none;
       padding: 0;
       margin-top: $spacing-large;
     }
 
-    .ant-modal-header {
+    .crl-ant-modal-header {
       margin-bottom: $spacing-medium-small;
     }
 
-    .ant-modal-content {
+    .crl-ant-modal-content {
       padding: $spacing-large;
       box-shadow: 0px 0px 1px rgba(71, 88, 114, 0.47);
       border-radius: 5px;
       min-width: 560px;
     }
 
-    .ant-modal-close {
+    .crl-ant-modal-close {
       top: $spacing-large;
     }
   }

diff --git a/pkg/ui/workspaces/cluster-ui/src/schedules/schedules.module.scss b/pkg/ui/workspaces/cluster-ui/src/schedules/schedules.module.scss
@@ -154,7 +154,7 @@
     font-size: $font-size--medium;
     display: flex;
     align-items: center;
-    .ant-divider {
+    .crl-ant-divider {
       height: 20px;
     }
   }
@@ -174,7 +174,7 @@
   .schedule-status__line--percentage {
     display: flex;
     align-items: center;
-    .ant-divider {
+    .crl-ant-divider {
       height: 20px;
     }
     span {
@@ -186,7 +186,7 @@
       margin: 0;
     }
   }
-  .ant-divider {
+  .crl-ant-divider {
     margin-left: 15px;
     margin-right: 15px;
   }

diff --git a/pkg/ui/workspaces/cluster-ui/src/search/search.module.scss b/pkg/ui/workspaces/cluster-ui/src/search/search.module.scss
@@ -14,7 +14,7 @@
   margin: 2px;
 }
 
-:global(.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):focus-within) {
+:global(.crl-ant-input-affix-wrapper:not(.crl-ant-input-affix-wrapper-disabled):focus-within) {
   outline: 2px solid $colors--primary-blue-3;
 }
 

diff --git a/pkg/ui/workspaces/cluster-ui/src/searchCriteria/searchCriteria.module.scss b/pkg/ui/workspaces/cluster-ui/src/searchCriteria/searchCriteria.module.scss
@@ -5,15 +5,15 @@
 
 @import "../core/index.module";
 
-:global(.ant-dropdown-menu-submenu-popup ul) {
+:global(.crl-ant-dropdown-menu-submenu-popup ul) {
   padding-bottom: 5px;
 }
 
-:global(.ant-dropdown-menu-item:hover) {
+:global(.crl-ant-dropdown-menu-item:hover) {
   background-color: $colors--primary-blue-8;
 }
 
-:global(.ant-dropdown-menu-submenu-title:hover) {
+:global(.crl-ant-dropdown-menu-submenu-title:hover) {
   background-color: $colors--primary-blue-8;
 }
 
@@ -39,7 +39,7 @@
     font-size: $font-size--medium;
     font-weight: $font-weight--light;
 
-    :global(.ant-btn) {
+    :global(.crl-ant-btn) {
       border-color: $colors--neutral-4;
     }
   }

diff --git a/pkg/ui/workspaces/cluster-ui/src/sql/sqlhighlight.module.scss b/pkg/ui/workspaces/cluster-ui/src/sql/sqlhighlight.module.scss
@@ -66,12 +66,12 @@
   margin: 15px 0;
 }
 
-:global(.ant-tooltip) {
+:global(.crl-ant-tooltip) {
   &:global(.hljs) {
-    &:global(.ant-tooltip-content) {
+    &:global(.crl-ant-tooltip-content) {
       width: 535px;
     }
-    &:global(.ant-tooltip-inner) {
+    &:global(.crl-ant-tooltip-inner) {
       background-color: $colors--neutral-8;
       padding: 8px;
     }

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementTypeSelect.module.scss b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementTypeSelect.module.scss
@@ -53,16 +53,16 @@
   transform: scaleY(0);
 }
 
-:global(.ant-radio) {
+:global(.crl-ant-radio) {
   top: 0;
 }
 
-:global(.ant-radio-checked .ant-radio-inner) {
+:global(.crl-ant-radio-checked .crl-ant-radio-inner) {
   background-color: $colors--link;
   border-color: $colors--link;
 }
 
-:global(.ant-radio-checked .ant-radio-inner::after) {
+:global(.crl-ant-radio-checked .crl-ant-radio-inner::after) {
   background-color: white;
   height: 6px;
   width: 6px;

diff --git a/pkg/ui/workspaces/cluster-ui/src/table/table.module.scss b/pkg/ui/workspaces/cluster-ui/src/table/table.module.scss
@@ -7,17 +7,17 @@
 @import "src/sortedtable/tableHead/tableHead.module";
 
 .crl-table-wrapper {
-  :global(.ant-table) {
+  :global(.crl-ant-table) {
     color: $colors--primary-text;
   }
 
   // Table header
-  :global(.ant-table-thead) {
+  :global(.crl-ant-table-thead) {
     @include table-header-text;
     background-color: $colors--neutral-0;
   }
 
-  :global(.ant-table-thead) > tr > th {
+  :global(.crl-ant-table-thead) > tr > th {
     color: $colors--neutral-7;
     background-color: $colors--neutral-0;
     padding: $spacing-smaller $spacing-smaller;
@@ -27,14 +27,14 @@
       @include table-header-text;
     }
     :global {
-      .ant-table-header-column .ant-table-column-sorters:hover::before {
+      .crl-ant-table-header-column .crl-ant-table-column-sorters:hover::before {
         background-color: $colors--neutral-0;
       }
     }
   }
 
   // Sorter icons on table's header
-  :global(.ant-table-thead .ant-table-column-sorter-inner .anticon) {
+  :global(.crl-ant-table-thead .crl-ant-table-column-sorter-inner .anticon) {
     display: flex;
     color: $colors--neutral-4;
     transform: scale(0.91666667) rotate(0deg);
@@ -53,57 +53,57 @@
   // END: Table Column
 
   // Table row
-  :global(.ant-table-row) {
+  :global(.crl-ant-table-row) {
     @include text--body;
     height: $line-height--xxx-large;
   }
 
-  :global(.ant-table-row) .cell--show-on-hover {
+  :global(.crl-ant-table-row) .cell--show-on-hover {
     visibility: hidden;
   }
 
-  :global(.ant-table-row):hover .cell--show-on-hover {
+  :global(.crl-ant-table-row):hover .cell--show-on-hover {
     visibility: visible;
   }
   // END: Table row
 
   // Table cell
-  :global(.ant-table-tbody) > tr > td {
+  :global(.crl-ant-table-tbody) > tr > td {
     padding: $spacing-smaller $spacing-smaller;
     border-bottom-color: $colors--neutral-3;
   }
 
   // Increase right padding for columns aligned by right
-  :global(.ant-table-tbody) > tr > td.column--align-right {
+  :global(.crl-ant-table-tbody) > tr > td.column--align-right {
     padding-right: $spacing-mid-large;
   }
 
   // show column with right border
-  :global(.ant-table-tbody) > tr > td.column--border-right {
+  :global(.crl-ant-table-tbody) > tr > td.column--border-right {
     border-right: $colors--neutral-3 solid 1px;
   }
   // END: Table cell
 
   // Table cell on hover
   :global {
-    .ant-table-thead
-      > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+    .crl-ant-table-thead
+      > tr.crl-ant-table-row-hover:not(.crl-ant-table-expanded-row):not(.crl-ant-table-row-selected)
       > td,
-    .ant-table-tbody
-      > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+    .crl-ant-table-tbody
+      > tr.crl-ant-table-row-hover:not(.crl-ant-table-expanded-row):not(.crl-ant-table-row-selected)
       > td,
-    .ant-table-thead
-      > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+    .crl-ant-table-thead
+      > tr:hover:not(.crl-ant-table-expanded-row):not(.crl-ant-table-row-selected)
       > td,
-    .ant-table-tbody
-      > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+    .crl-ant-table-tbody
+      > tr:hover:not(.crl-ant-table-expanded-row):not(.crl-ant-table-row-selected)
       > td {
       background: $colors--neutral-1;
     }
   }
   // END: Table cell on hover
 
-  :global(.ant-table-placeholder) {
+  :global(.crl-ant-table-placeholder) {
     border: $colors--neutral-1 solid 1px;
   }
 
@@ -113,7 +113,7 @@
   }
 
   &__empty {
-    :global(.ant-table-placeholder) {
+    :global(.crl-ant-table-placeholder) {
       border: none;
     }
   }