From 514930eb211b632ee619d20ba99e250b17325e04 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Wed, 8 Feb 2023 15:55:04 +0800
Subject: [PATCH] feat(console): compact-style radio group (#3071)

---
 .../src/components/RadioGroup/Radio.tsx       |  2 +-
 .../components/RadioGroup/index.module.scss   | 72 +++++++++++++++++++
 .../src/components/RadioGroup/index.tsx       |  2 +-
 3 files changed, 74 insertions(+), 2 deletions(-)

diff --git a/packages/console/src/components/RadioGroup/Radio.tsx b/packages/console/src/components/RadioGroup/Radio.tsx
index b201a5413..74b54faac 100644
--- a/packages/console/src/components/RadioGroup/Radio.tsx
+++ b/packages/console/src/components/RadioGroup/Radio.tsx
@@ -24,7 +24,7 @@ export type Props = {
   isChecked?: boolean;
   onClick?: () => void;
   tabIndex?: number;
-  type?: 'card' | 'plain';
+  type?: 'card' | 'plain' | 'compact';
   isDisabled?: boolean;
   disabledLabel?: AdminConsoleKey;
 };
diff --git a/packages/console/src/components/RadioGroup/index.module.scss b/packages/console/src/components/RadioGroup/index.module.scss
index 1576dee69..cc82ebfb5 100644
--- a/packages/console/src/components/RadioGroup/index.module.scss
+++ b/packages/console/src/components/RadioGroup/index.module.scss
@@ -10,7 +10,79 @@
   }
 }
 
+.compact {
+  display: flex;
+  flex-wrap: nowrap;
+  font: var(--font-body-2);
+  align-items: center;
+
+  > .radio {
+    position: relative;
+    border: 1px solid var(--color-border);
+    user-select: none;
+    cursor: pointer;
+    flex: 1;
+
+    &:first-child {
+      border-radius: 12px 0 0 12px;
+    }
+
+    &:last-child {
+      border-radius: 0 12px 12px 0;
+    }
+
+    &:not(:first-child) {
+      border-left: none;
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      background-color: var(--color-layer-2);
+    }
+
+    &:not(.disabled):focus {
+      border-color: var(--color-primary);
+    }
+
+    &:not(.disabled):hover {
+      color: var(--color-text-link);
+      font: var(--font-label-2);
+      border-color: var(--color-primary);
+      background-color: var(--color-hover-variant);
+
+      &:not(:first-child)::before {
+        position: absolute;
+        content: '';
+        width: 1px;
+        top: -1px;
+        left: -1px;
+        bottom: -1px;
+        background-color: var(--color-primary);
+      }
+    }
+
+    .content {
+      padding: _.unit(5);
+    }
+
+    &.checked {
+      border-color: var(--color-primary);
+
+      &:not(:first-child)::before {
+        position: absolute;
+        content: '';
+        width: 1px;
+        top: -1px;
+        left: -1px;
+        bottom: -1px;
+        background-color: var(--color-primary);
+      }
+    }
+  }
+}
+
 .card {
+  /* stylelint-disable-next-line no-descending-specificity */
   > .radio {
     padding: _.unit(3);
     border-radius: _.unit(4);
diff --git a/packages/console/src/components/RadioGroup/index.tsx b/packages/console/src/components/RadioGroup/index.tsx
index aa3530504..395ac8973 100644
--- a/packages/console/src/components/RadioGroup/index.tsx
+++ b/packages/console/src/components/RadioGroup/index.tsx
@@ -19,7 +19,7 @@ type Props = {
   name: string;
   children: RadioElement | RadioElement[];
   value?: string;
-  type?: 'card' | 'plain';
+  type?: 'card' | 'plain' | 'compact';
   className?: string;
   onChange?: (value: string) => void;
 };