merge

apache · Feb 2, 2025 · 2961115 · 2961115
1 parent 20cfa50
commit 2961115
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 48 deletions.
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
diff --git a/superset-frontend/src/components/GridTable/Header.tsx b/superset-frontend/src/components/GridTable/Header.tsx
@@ -57,7 +57,7 @@ const SortSeqLabel = styled.span`
 const HeaderAction = styled.div`
   display: none;
   position: absolute;
-  right: ${({ theme }) => theme.gridUnit * 3}px;
+  right: ${({ theme }) => theme.sizeUnit * 3}px;
   &.main {
     margin: 0 auto;
     left: 0;
@@ -66,7 +66,7 @@ const HeaderAction = styled.div`
   }
   & .ant-dropdown-trigger {
     cursor: context-menu;
-    padding: ${({ theme }) => theme.gridUnit * 2}px;
+    padding: ${({ theme }) => theme.sizeUnit * 2}px;
     background-color: var(--ag-background-color);
     box-shadow: 0 0 2px var(--ag-chip-border-color);
     border-radius: 50%;

diff --git a/superset-frontend/src/components/GridTable/index.tsx b/superset-frontend/src/components/GridTable/index.tsx
@@ -166,19 +166,19 @@ function GridTable<RecordType extends object>({
     filter: Boolean(enableActions),
   };
 
-  const rowHeight = theme.gridUnit * (size === GridSize.Middle ? 9 : 7);
+  const rowHeight = theme.sizeUnit * (size === GridSize.Middle ? 9 : 7);
 
   return (
     <ErrorBoundary>
       <Global
         styles={() => css`
           #grid-table.ag-theme-quartz {
             --ag-icon-font-family: agGridMaterial;
-            --ag-grid-size: ${theme.gridUnit}px;
-            --ag-font-size: ${theme.typography.sizes[
-              size === GridSize.Middle ? 'm' : 's'
-            ]}px;
-            --ag-font-family: ${theme.typography.families.sansSerif};
+            --ag-grid-size: ${theme.sizeUnit}px;
+            --ag-font-size: ${GridSize.Middle === size
+              ? theme.fontSize
+              : theme.fontSizeSM}px;
+            --ag-font-family: ${theme.fontFamily};
             --ag-row-height: ${rowHeight}px;
             ${!striped &&
             `--ag-odd-row-background-color: ${theme.colors.grayscale.light5};`}

diff --git a/superset-frontend/src/components/Radio/index.tsx b/superset-frontend/src/components/Radio/index.tsx
@@ -16,46 +16,48 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { styled } from '@superset-ui/core';
-import { Radio as AntdRadio } from 'antd';
+import { Radio as Antd5Radio, CheckboxOptionType } from 'antd-v5';
+import type {
+  RadioChangeEvent,
+  RadioProps,
+  RadioGroupProps,
+} from 'antd-v5/lib/radio';
 
-const StyledRadio = styled(AntdRadio)`
-  .ant-radio-inner {
-    top: -1px;
-    left: 2px;
-    width: ${({ theme }) => theme.sizeUnit * 4}px;
-    height: ${({ theme }) => theme.sizeUnit * 4}px;
-    border-width: 2px;
-    border-color: ${({ theme }) => theme.colors.grayscale.light2};
-  }
+import { Space, SpaceProps } from 'src/components/Space';
 
-  .ant-radio.ant-radio-checked {
-    .ant-radio-inner {
-      border-width: ${({ theme }) => theme.sizeUnit + 1}px;
-      border-color: ${({ theme }) => theme.colorPrimary};
-    }
+export type RadioGroupWrapperProps = RadioGroupProps & {
+  spaceConfig?: {
+    direction?: SpaceProps['direction'];
+    size?: SpaceProps['size'];
+    align?: SpaceProps['align'];
+    wrap?: SpaceProps['wrap'];
+  };
+  options: CheckboxOptionType[];
+};
 
-    .ant-radio-inner::after {
-      background-color: ${({ theme }) => theme.colors.grayscale.light5};
-      top: 0;
-      left: 0;
-      width: ${({ theme }) => theme.sizeUnit + 2}px;
-      height: ${({ theme }) => theme.sizeUnit + 2}px;
-    }
-  }
-
-  .ant-radio:hover,
-  .ant-radio:focus {
-    .ant-radio-inner {
-      border-color: ${({ theme }) => theme.colorPrimaryText};
-    }
-  }
-`;
-const StyledGroup = styled(AntdRadio.Group)`
-  font-size: inherit;
-`;
-
-export const Radio = Object.assign(StyledRadio, {
-  Group: StyledGroup,
-  Button: AntdRadio.Button,
+const RadioGroup = ({
+  spaceConfig,
+  options,
+  ...props
+}: RadioGroupWrapperProps) => {
+  const content = options.map((option: CheckboxOptionType) => (
+    <Radio key={option.value} value={option.value}>
+      {option.label}
+    </Radio>
+  ));
+  return (
+    <Radio.Group {...props}>
+      {spaceConfig ? <Space {...spaceConfig}>{content}</Space> : content}
+    </Radio.Group>
+  );
+};
+export type {
+  RadioChangeEvent,
+  RadioGroupProps,
+  RadioProps,
+  CheckboxOptionType,
+};
+export const Radio = Object.assign(Antd5Radio, {
+  GroupWrapper: RadioGroup,
+  Button: Antd5Radio.Button,
 });