feat: set proper height for Segmented (#35281)

components/segmented/demo/custom.md

@@ -23,28 +23,28 @@ export default () => (
       options={[
         {
           label: (
-            <>
+            <div style={{ padding: 4 }}>
               <Avatar src="https://joeschmoe.io/api/v1/random" />
               <div>User 1</div>
-            </>
+            </div>
           ),
           value: 'user1',
         },
         {
           label: (
-            <>
+            <div style={{ padding: 4 }}>
               <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
               <div>User 2</div>
-            </>
+            </div>
           ),
           value: 'user2',
         },
         {
           label: (
-            <>
+            <div style={{ padding: 4 }}>
               <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
               <div>User 3</div>
-            </>
+            </div>
           ),
           value: 'user3',
         },
@@ -55,37 +55,37 @@ export default () => (
       options={[
         {
           label: (
-            <>
+            <div style={{ padding: 4 }}>
               <div>Spring</div>
               <div>Jan-Mar</div>
-            </>
+            </div>
           ),
           value: 'spring',
         },
         {
           label: (
-            <>
+            <div style={{ padding: 4 }}>
               <div>Summer</div>
               <div>Apr-Jun</div>
-            </>
+            </div>
           ),
           value: 'summer',
         },
         {
           label: (
-            <>
+            <div style={{ padding: 4 }}>
               <div>Autumn</div>
               <div>Jul-Sept</div>
-            </>
+            </div>
           ),
           value: 'autumn',
         },
         {
           label: (
-            <>
+            <div style={{ padding: 4 }}>
               <div>Winter</div>
               <div>Oct-Dec</div>
-            </>
+            </div>
           ),
           value: 'winter',
         },

components/segmented/demo/size-consistent.md

@@ -0,0 +1,40 @@
+---
+order: 99
+title:
+  zh-CN: 统一高度
+  en-US: Consistent height
+debug: true
+---
+
+## zh-CN
+
+与其他组件保持统一高度。
+
+## en-US
+
+Keep consistent height with other components.
+
+```jsx
+import { Button, Input, Select, Segmented } from 'antd';
+
+export default () => (
+  <>
+    <div>
+      <Segmented style={{ marginRight: 6 }} size="large" options={['Daily', 'Weekly', 'Monthly']} />
+      <Button type="primary" size="large">
+        Button
+      </Button>
+    </div>
+    <div>
+      <Segmented style={{ marginRight: 6 }} options={['Daily', 'Weekly', 'Monthly']} />
+      <Input placeholder="default size" style={{ width: 150 }} />
+    </div>
+    <div>
+      <Segmented style={{ marginRight: 6 }} size="small" options={['Daily', 'Weekly', 'Monthly']} />
+      <Select size="small" defaultValue="lucy" style={{ width: 150 }}>
+        <Select.Option value="lucy">Lucy</Select.Option>
+      </Select>
+    </div>
+  </>
+);
+```

components/segmented/style/index.less

@@ -4,26 +4,23 @@
 
 @segmented-prefix-cls: ~'@{ant-prefix}-segmented';
 
+@segmented-container-padding: 2px;
+
 .@{segmented-prefix-cls} {
   .reset-component();
-
-  position: relative;
-  display: inline-flex;
-  align-items: stretch;
-  justify-items: flex-start;
+  display: inline-block;
+  padding: @segmented-container-padding;
   color: @segmented-label-color;
   background-color: @segmented-bg;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px @segmented-bg;
   transition: all 0.3s @ease-in-out;
 
-  // hover/focus styles
-  &:not(&-disabled) {
-    &:hover,
-    &:focus {
-      background-color: @segmented-hover-bg;
-      box-shadow: 0 0 0 2px @segmented-hover-bg;
-    }
+  &-group {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    justify-items: flex-start;
+    width: 100%;
   }
 
   // block styles
@@ -36,6 +33,14 @@
     min-width: 0;
   }
 
+  // hover/focus styles
+  &:not(&-disabled) {
+    &:hover,
+    &:focus {
+      background-color: @segmented-hover-bg;
+    }
+  }
+
   // item styles
   &-item {
     position: relative;
@@ -54,9 +59,9 @@
     }
 
     &-label {
-      min-height: @input-height-base;
-      padding: @input-padding-vertical-base @input-padding-horizontal-base;
-      line-height: @input-height-base - @input-padding-vertical-base * 2;
+      min-height: @input-height-base - @segmented-container-padding * 2;
+      padding: 0 @input-padding-horizontal-base;
+      line-height: @input-height-base - @segmented-container-padding * 2;
       .segmented-text-ellipsis();
     }
 
@@ -78,20 +83,19 @@
 
   // size styles
   &&-lg &-item-label {
-    min-height: @input-height-lg;
-    padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
+    min-height: @input-height-lg - @segmented-container-padding * 2;
+    padding: 0 @input-padding-horizontal-lg;
     font-size: @font-size-lg;
-    line-height: @input-height-lg - @input-padding-vertical-lg * 2;
+    line-height: @input-height-lg - @segmented-container-padding * 2;
   }
 
   &&-sm &-item-label {
-    min-height: @input-height-sm;
-    padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
-    line-height: @input-height-sm - @input-padding-vertical-sm * 2;
+    min-height: @input-height-sm - @segmented-container-padding * 2;
+    padding: 0 @input-padding-horizontal-sm;
+    line-height: @input-height-sm - @segmented-container-padding * 2;
   }
 
   // disabled styles
-  &-disabled &-item,
   &-item-disabled {
     .segmented-disabled-item();
   }
@@ -108,8 +112,8 @@
     padding: 4px 0;
   }
 
-  // transition effect when `enter-active`
-  &-thumb-motion-enter-active {
+  // transition effect when `appear-active`
+  &-thumb-motion-appear-active {
     transition: transform 0.3s @ease-in-out, width 0.3s @ease-in-out;
     will-change: transform, width;
   }

package.json

@@ -142,7 +142,7 @@
     "rc-progress": "~3.2.1",
     "rc-rate": "~2.9.0",
     "rc-resize-observer": "^1.2.0",
-    "rc-segmented": "~2.0.0",
+    "rc-segmented": "~2.1.0 ",
     "rc-select": "~14.1.1",
     "rc-slider": "~10.0.0",
     "rc-steps": "~4.1.0",