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
2025-10-09 15:56:33 +00:00 · 2025-04-11 16:56:20 +05:30 · 2025-04-11 16:56:20 +05:30 · b1fc83092a
commit b1fc83092a
parent 06953ee266
6 changed files with 103 additions and 57 deletions
--- 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}
--- 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
--- 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 ? (
--- 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>
          )}

--- 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}>
--- 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;
+}