@cleartrip/ct-design-segment 5.11.0-SNAPSHOT-native-main.3 → 5.11.0

package/src/Segment.native.tsx

@@ -10,12 +10,7 @@ import { useTheme } from '@cleartrip/ct-design-theme';
 import { useStyles } from '@cleartrip/ct-design-style-manager';
 import { Container } from '@cleartrip/ct-design-container';
 
-import {
-  getSegmentVariantStyles,
-  segmentNativeThumbStyles,
-  segmentStaticStyles,
-  segmentThumbShadowNative,
-} from './style';
+import { getSegmentVariantStyles, segmentStaticStyles, segmentThumbShadowNative } from './style';
 import { ISegmentProps, type SegmentStyleConfigProps } from './type';
 import { SegmentVariant } from './constants';
 import { SegmentButton } from './SegmentButton';
@@ -251,7 +246,6 @@ const Segment: React.FC<ISegmentProps> = ({
           pointerEvents='none'
           style={[
             segmentStaticStyles.animatedBlock,
-            segmentNativeThumbStyles.root,
             animatedStyle,
             dynamicStyles.animatedBlock,
             ...(variantStyles.animatedBlock?.style ? [variantStyles.animatedBlock.style] : []),

package/src/Segment.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTheme } from '@cleartrip/ct-design-theme';
 import { useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
 
-import { getSegmentVariantStyles, segmentStaticStyles, segmentWebLayoutStyles, segmentWebThumbStyles } from './style';
+import { getSegmentVariantStyles, segmentStaticStyles, segmentWebThumbStyles } from './style';
 import { ISegmentProps } from './type';
 import { SegmentVariant } from './constants';
 import { SegmentButton } from './SegmentButton';
@@ -197,12 +197,12 @@ const Segment: React.FC<ISegmentProps> = ({
     [segmentStaticStyles.root, dynamicStyles.root, variantStyles.root?.style, root],
   );
   const animatedContainerClassName = useWebMergeStyles(
-    [segmentStaticStyles.animatedContainer, segmentWebLayoutStyles.animatedContainer, ...animatedContainer],
-    [segmentStaticStyles.animatedContainer, segmentWebLayoutStyles.animatedContainer, animatedContainer],
+    [segmentStaticStyles.animatedContainer, ...animatedContainer],
+    [segmentStaticStyles.animatedContainer, ...animatedContainer],
   );
   const tabMeasureCellClassName = useWebMergeStyles(
-    [segmentStaticStyles.tabMeasureCell, segmentWebLayoutStyles.tabMeasureCell],
-    [segmentStaticStyles.tabMeasureCell, segmentWebLayoutStyles.tabMeasureCell],
+    [segmentStaticStyles.tabMeasureCell],
+    [segmentStaticStyles.tabMeasureCell],
   );
   const webThumbBaseClassName = useWebMergeStyles(
     [

package/src/SegmentButton.tsx

@@ -24,14 +24,14 @@ export const SegmentButton: React.FC<ISegmentButtonProps> = ({
   const { segmentButton = {}, segmentText = {} } = styleConfig || {};
 
   const shell = useStyles(
-    (t) => ({
+    () => ({
       rowCell: {
         flexGrow: 1,
         flexBasis: 0,
         flexShrink: 1,
         minWidth: 0,
         minHeight: 0,
-        width: t.size['100P'],
+        width: undefined,
         alignSelf: 'stretch',
         height: '100%',
         maxHeight: '100%',
@@ -91,7 +91,7 @@ export const SegmentButton: React.FC<ISegmentButtonProps> = ({
       variant={ButtonVariant.BARE}
       color={ButtonColor.TERTIARY}
       size={ButtonSize.SMALL}
-      isFullWidth
+      isFullWidth={false}
       prefixIcon={option?.icon}
       onClick={() => {
         if (disabled) return;

package/src/style.ts

@@ -15,7 +15,6 @@ export const segmentThumbShadowNative = {
   elevation: 3,
 } as const;
 
-/** Shared layout — do not add web-only flex rules here; native uses this as-is. */
 export const segmentStaticStyles = makeStyles((theme) => {
   const trackHeight = theme.size[10];
   const borderWidth = theme.border.width.sm;
@@ -38,6 +37,8 @@ export const segmentStaticStyles = makeStyles((theme) => {
       height: trackHeight,
       alignItems: 'stretch',
       padding: theme.spacing[1],
+      borderStyle: 'solid',
+      boxSizing: 'border-box',
     },
     button: {
       backgroundColor: 'transparent',
@@ -52,10 +53,13 @@ export const segmentStaticStyles = makeStyles((theme) => {
     },
     animatedBlock: {
       position: 'absolute',
+      top: 0,
+      height: '100%',
       borderRadius: thumbRadius,
       backgroundColor: theme.color.background.neutral,
     },
     animatedContainer: {
+      display: 'flex',
       flexDirection: 'row',
       alignItems: 'stretch',
       justifyContent: 'flex-start',
@@ -68,6 +72,8 @@ export const segmentStaticStyles = makeStyles((theme) => {
       flexShrink: 1,
       flexBasis: 0,
       minWidth: 0,
+      display: 'flex',
+      alignItems: 'stretch',
     },
     animatedBlockWidth: {
       width: theme.size['100P'],
@@ -75,69 +81,23 @@ export const segmentStaticStyles = makeStyles((theme) => {
   };
 });
 
-/** Web-only flex layout — `<div>` needs explicit display; native Container must not use these. */
-export const segmentWebLayoutStyles = makeStyles(() => ({
-  animatedContainer: {
-    display: 'flex',
-  },
-  tabMeasureCell: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative',
-    zIndex: 1,
-  },
-}));
-
-/**
- * Native thumb — inset within the padded track (web uses segmentWebThumbStyles instead).
- */
-export const segmentNativeThumbStyles = makeStyles((theme) => {
-  const trackHeight = theme.size[10];
-  const borderWidth = theme.border.width.sm;
-  const trackPadding = theme.spacing[1];
-  const trackInnerHeight = Math.max(trackHeight - borderWidth * 2, 0);
-  const paddedInnerHeight = Math.max(trackInnerHeight - trackPadding * 2, 0);
-  const thumbInset = Math.max(theme.spacing[0.25], 0);
-  const paddedInnerRadius = Math.max(0, paddedInnerHeight / 2);
-  const thumbRadius = Math.max(0, paddedInnerRadius - thumbInset);
-
-  return {
-    root: {
-      position: 'absolute',
-      top: thumbInset,
-      bottom: thumbInset,
-      borderRadius: thumbRadius,
-      backgroundColor: theme.color.background.neutral,
-    },
-  };
-});
-
-/**
- * Web-only (Segment.tsx) — native uses segmentNativeThumbStyles instead.
- * Thumb fills animatedContainer via top/bottom inset, not a fixed height from trackHeight.
- */
 export const segmentWebThumbStyles = makeStyles((theme) => {
   const trackHeight = theme.size[10];
-  const borderWidth = theme.border.width.sm;
   const trackPadding = theme.spacing[1];
-  const trackInnerHeight = Math.max(trackHeight - borderWidth * 2, 0);
-  const paddedInnerHeight = Math.max(trackInnerHeight - trackPadding * 2, 0);
+  const borderWidth = theme.border.width.sm;
+  const trackInnerHeight = Math.max(trackHeight - borderWidth * 2 - trackPadding * 2, 0);
   const thumbInset = Math.max(theme.spacing[0.25], 0);
-  const paddedInnerRadius = Math.max(0, paddedInnerHeight / 2);
-  const thumbRadius = Math.max(0, paddedInnerRadius - thumbInset);
+  const trackInnerRadius = Math.max(0, trackInnerHeight / 2);
+  const thumbRadius = Math.max(0, trackInnerRadius - thumbInset);
 
   return {
     root: {
       position: 'absolute',
-      top: thumbInset,
-      bottom: thumbInset,
+      top: 0,
+      height: '100%',
       borderRadius: thumbRadius,
       backgroundColor: theme.color.background.neutral,
       boxShadow: SEGMENT_THUMB_BOX_SHADOW,
-      pointerEvents: 'none',
-      zIndex: 0,
     },
   };
 });