From b1fc83092aba5a84f0f94259b1eb6a94a3683675 Mon Sep 17 00:00:00 2001
From: Dhruv Parmar <83108871+dhruvjsx@users.noreply.github.com>
Date: Fri, 11 Apr 2025 16:56:20 +0530
Subject: [PATCH] Minor:Restyled button group (#20714)

* restyled button group

* updated border radius

* fixed button group hover|| modified all other button group

* fixed comments

* removed segmented values

* made constant
---
 .../APIEndpointSchema/APIEndpointSchema.tsx   | 31 +++++++------
 .../Execution/Execution.component.tsx         | 11 +++--
 .../PipelineTaskTab/PipelineTaskTab.tsx       | 10 ++---
 .../Topic/TopicSchema/TopicSchema.tsx         | 36 +++++++--------
 .../common/ListView/ListView.component.tsx    | 27 ++++++-----
 .../ui/src/styles/components/radio.less       | 45 ++++++++++++++++++-
 6 files changed, 103 insertions(+), 57 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/APIEndpoint/APIEndpointSchema/APIEndpointSchema.tsx b/openmetadata-ui/src/main/resources/ui/src/components/APIEndpoint/APIEndpointSchema/APIEndpointSchema.tsx
index 51a8fdacadd..08b8b4adb02 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/APIEndpoint/APIEndpointSchema/APIEndpointSchema.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/APIEndpoint/APIEndpointSchema/APIEndpointSchema.tsx
@@ -10,7 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Col, Radio, RadioChangeEvent, Row, Tooltip, Typography } from 'antd';
+import { Col, Row, Segmented, Tooltip, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import classNames from 'classnames';
 import { cloneDeep, groupBy, isEmpty, isUndefined, uniqBy } from 'lodash';
@@ -90,6 +90,16 @@ const APIEndpointSchema: FC<APIEndpointSchemaProps> = ({
     onUpdate: onApiEndpointUpdate,
   } = useGenericContext<APIEndpoint>();
 
+  const viewTypeOptions = [
+    {
+      label: t('label.request'),
+      value: SchemaViewType.REQUEST_SCHEMA,
+    },
+    {
+      label: t('label.response'),
+      value: SchemaViewType.RESPONSE_SCHEMA,
+    },
+  ];
   const {
     requestSchemaAllRowKeys,
     responseSchemaAllRowKeys,
@@ -182,10 +192,6 @@ const APIEndpointSchema: FC<APIEndpointSchemaProps> = ({
     return activeSchemaDiff?.schemaFields ?? [];
   }, [activeSchema, apiEndpointDetails]);
 
-  const handleViewChange = (e: RadioChangeEvent) => {
-    setViewType(e.target.value);
-  };
-
   const handleExpandedRowsChange = (keys: readonly Key[]) => {
     setExpandedRowKeys(keys as string[]);
   };
@@ -405,14 +411,13 @@ const APIEndpointSchema: FC<APIEndpointSchemaProps> = ({
           }}
           extraTableFilters={
             <div className="d-flex justify-between items-center w-full">
-              <Radio.Group value={viewType} onChange={handleViewChange}>
-                <Radio.Button value={SchemaViewType.REQUEST_SCHEMA}>
-                  {t('label.request')}
-                </Radio.Button>
-                <Radio.Button value={SchemaViewType.RESPONSE_SCHEMA}>
-                  {t('label.response')}
-                </Radio.Button>
-              </Radio.Group>
+              <Segmented
+                className="segment-toggle"
+                options={viewTypeOptions}
+                value={viewType}
+                onChange={(value) => setViewType(value as SchemaViewType)}
+              />
+
               <ToggleExpandButton
                 allRowKeys={schemaAllRowKeys}
                 expandedRowKeys={expandedRowKeys}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx
index 578c8e1e7ea..ad75d35cf49 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx
@@ -18,8 +18,8 @@ import {
   DatePicker,
   Dropdown,
   MenuProps,
-  Radio,
   Row,
+  Segmented,
   Space,
 } from 'antd';
 import { RangePickerProps } from 'antd/lib/date-picker';
@@ -144,15 +144,14 @@ const ExecutionsTab = ({ pipelineFQN, tasks }: ExecutionProps) => {
       <Row gutter={[16, 16]}>
         <Col span={24}>
           <Space className="justify-between w-full">
-            <Radio.Group
-              buttonStyle="solid"
-              className="radio-switch"
+            <Segmented
+              className="segment-toggle"
               data-testid="radio-switch"
-              optionType="button"
               options={Object.values(PIPELINE_EXECUTION_TABS)}
               value={view}
-              onChange={(e) => setView(e.target.value)}
+              onChange={(value) => setView(value as PIPELINE_EXECUTION_TABS)}
             />
+
             <Space>
               <Dropdown menu={statusMenuItems} placement="bottom">
                 <Button
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/PipelineTaskTab/PipelineTaskTab.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/PipelineTaskTab/PipelineTaskTab.tsx
index 052b27d66e7..2e24617dead 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/PipelineTaskTab/PipelineTaskTab.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/PipelineTaskTab/PipelineTaskTab.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 import Icon from '@ant-design/icons';
-import { Card, Radio, Typography } from 'antd';
+import { Card, Segmented, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { groupBy, isEmpty, isUndefined, uniqBy } from 'lodash';
 import { EntityTags, TagFilterOptions } from 'Models';
@@ -294,14 +294,12 @@ export const PipelineTaskTab = () => {
 
   return (
     <div>
-      <Radio.Group
-        buttonStyle="solid"
-        className="radio-switch m-b-md"
+      <Segmented
+        className="segment-toggle m-b-md"
         data-testid="pipeline-task-switch"
-        optionType="button"
         options={Object.values(PIPELINE_TASK_TABS)}
         value={activeTab}
-        onChange={(e) => setActiveTab(e.target.value)}
+        onChange={(value) => setActiveTab(value as PIPELINE_TASK_TABS)}
       />
 
       {activeTab === PIPELINE_TASK_TABS.LIST_VIEW ? (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicSchema/TopicSchema.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicSchema/TopicSchema.tsx
index ba015cce39d..4873efcd6c2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicSchema/TopicSchema.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicSchema/TopicSchema.tsx
@@ -11,15 +11,7 @@
  *  limitations under the License.
  */
 
-import {
-  Col,
-  Radio,
-  RadioChangeEvent,
-  Row,
-  Tag,
-  Tooltip,
-  Typography,
-} from 'antd';
+import { Col, Row, Segmented, Tag, Tooltip, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { Key } from 'antd/lib/table/interface';
 import classNames from 'classnames';
@@ -82,6 +74,14 @@ const TopicSchemaFields: FC<TopicSchemaFieldsProps> = ({
   const [viewType, setViewType] = useState<SchemaViewType>(
     SchemaViewType.FIELDS
   );
+  const viewTypeOptions = [
+    {
+      label: t('label.field-plural'),
+      value: SchemaViewType.FIELDS,
+    },
+    { label: t('label.text'), value: SchemaViewType.TEXT },
+  ];
+
   const { fqn: entityFqn } = useFqn();
   const {
     data: topicDetails,
@@ -312,10 +312,6 @@ const TopicSchemaFields: FC<TopicSchemaFieldsProps> = ({
     ]
   );
 
-  const handleViewChange = (e: RadioChangeEvent) => {
-    setViewType(e.target.value);
-  };
-
   useEffect(() => {
     setExpandedRowKeys(schemaAllRowKeys);
   }, []);
@@ -339,14 +335,12 @@ const TopicSchemaFields: FC<TopicSchemaFieldsProps> = ({
         <>
           {!isEmpty(messageSchema?.schemaFields) && !isVersionView && (
             <Col span={24}>
-              <Radio.Group value={viewType} onChange={handleViewChange}>
-                <Radio.Button value={SchemaViewType.FIELDS}>
-                  {t('label.field-plural')}
-                </Radio.Button>
-                <Radio.Button value={SchemaViewType.TEXT}>
-                  {t('label.text')}
-                </Radio.Button>
-              </Radio.Group>
+              <Segmented
+                className="segment-toggle"
+                options={viewTypeOptions}
+                value={viewType}
+                onChange={(value) => setViewType(value as SchemaViewType)}
+              />
             </Col>
           )}
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/ListView/ListView.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/ListView/ListView.component.tsx
index a7a13115435..4755d00e304 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/ListView/ListView.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/ListView/ListView.component.tsx
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 import Icon from '@ant-design/icons';
-import { Col, Radio, Row, Space, Switch, Typography } from 'antd';
+import { Col, Row, Segmented, Space, Switch, Typography } from 'antd';
 import { isEmpty, isUndefined } from 'lodash';
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -41,6 +41,17 @@ export const ListView = <T extends object = any>({
   );
   const { t } = useTranslation();
 
+  const listViewOptions = [
+    {
+      label: <Icon component={GridIcon} data-testid="grid" />,
+      value: ListViewOptions.CARD,
+    },
+    {
+      label: <Icon component={ListIcon} data-testid="list" />,
+      value: ListViewOptions.TABLE,
+    },
+  ];
+
   const cardRender = useMemo(() => {
     if (isEmpty(tableProps.dataSource)) {
       return tableProps.locale?.emptyText;
@@ -82,16 +93,12 @@ export const ListView = <T extends object = any>({
             </span>
           )}
 
-          <Radio.Group
+          <Segmented
+            className="segment-toggle"
+            options={listViewOptions}
             value={currentView}
-            onChange={(e) => setCurrentView(e.target.value)}>
-            <Radio.Button value={ListViewOptions.CARD}>
-              <Icon component={GridIcon} data-testid="grid" />
-            </Radio.Button>
-            <Radio.Button value={ListViewOptions.TABLE}>
-              <Icon component={ListIcon} data-testid="list" />
-            </Radio.Button>
-          </Radio.Group>
+            onChange={(value) => setCurrentView(value as ListViewOptions)}
+          />
         </Space>
       </Col>
       <Col span={24}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/radio.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/radio.less
index f10908cd16d..3e24760c727 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/components/radio.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/radio.less
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-@import '../variables.less';
+@import (reference) url('../variables.less');
 
 .radio-switch {
   .ant-radio-button-wrapper,
@@ -36,3 +36,46 @@
     }
   }
 }
+
+// Global styling for segment toggle classs
+.segment-toggle {
+  background: @white;
+  border-radius: @size-sm;
+  border: 1px solid @grey-20;
+
+  .ant-segmented-item {
+    color: @text-color;
+    transition: all 0.3s ease;
+
+    &-selected {
+      background: @blue-23;
+      color: @blue-9;
+      text-align: center;
+      border-radius: @size-xs;
+      .ant-segmented-item-label {
+        color: @blue-9;
+      }
+
+      svg path {
+        fill: @blue-9;
+      }
+    }
+  }
+
+  &:hover {
+    background: none !important;
+  }
+
+  &:focus {
+    background: none !important;
+  }
+
+  .ant-segmented:not(.ant-segmented-disabled):hover,
+  .ant-segmented:not(.ant-segmented-disabled):focus {
+    background: none !important;
+  }
+}
+.segment-toggle.ant-segmented {
+  background-color: @white;
+  border-radius: @size-sm;
+}