feat: add wrap div

Author: vagusX

assets/index.less

@@ -20,9 +20,13 @@
   align-items: stretch;
   justify-items: flex-start;
 
-  background-color: rgba(0, 0, 0, 0.04);
   border-radius: 2px;
-  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
+
+  &-wrap {
+    display: inline-flex;
+    padding: 2px;
+    background-color: rgba(0, 0, 0, 0.04);
+  }
 
   &-item {
     position: relative;
@@ -49,6 +53,7 @@
 
     &-label {
       z-index: 2;
+      line-height: 24px;
     }
 
     &-input {

src/index.tsx

@@ -67,6 +67,7 @@ function normalizeOptions(options: SegmentedOptions): SegmentedLabeledOption[] {
 const calcThumbStyle = (targetElement: HTMLElement): React.CSSProperties => ({
   transform: `translateX(${targetElement.offsetLeft}px)`,
   width: targetElement.clientWidth,
+  height: targetElement.clientHeight,
 });
 
 const InternalSegmentedOption: React.FC<{
@@ -261,52 +262,54 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
     const divProps = omit(restProps, ['children']);
 
     return (
-      <div
-        {...divProps}
-        className={classNames(
-          prefixCls,
-          {
-            [`${prefixCls}-rtl`]: direction === 'rtl',
-            [`${prefixCls}-disabled`]: disabled,
-          },
-          className,
-        )}
-        ref={mergedRef}
-      >
-        <CSSMotion
-          visible={thumbShow}
-          motionName={`${prefixCls}-${motionName}`}
-          motionDeadline={300}
-          onEnterStart={handleThumbEnterStart}
-          onEnterActive={handleThumbEnterActive}
-          onEnterEnd={handleThumbEnterEnd}
+      <div className={`${prefixCls}-wrap`}>
+        <div
+          {...divProps}
+          className={classNames(
+            prefixCls,
+            {
+              [`${prefixCls}-rtl`]: direction === 'rtl',
+              [`${prefixCls}-disabled`]: disabled,
+            },
+            className,
+          )}
+          ref={mergedRef}
         >
-          {({ className: motionClassName, style: motionStyle }) => {
-            return (
-              <div
-                style={motionStyle}
-                className={classNames(`${prefixCls}-thumb`, motionClassName)}
-              />
-            );
-          }}
-        </CSSMotion>
-        {segmentedOptions.map((segmentedOption) => (
-          <InternalSegmentedOption
-            key={segmentedOption.value}
-            prefixCls={prefixCls}
-            className={classNames(
-              segmentedOption.className,
-              `${prefixCls}-item`,
-              {
-                [`${prefixCls}-item-selected`]:
-                  segmentedOption.value === visualSelected,
-              },
-            )}
-            checked={segmentedOption.value === selected}
-            onChange={handleChange}
-            {...segmentedOption}
-          />
-        ))}
+          <CSSMotion
+            visible={thumbShow}
+            motionName={`${prefixCls}-${motionName}`}
+            motionDeadline={300}
+            onEnterStart={handleThumbEnterStart}
+            onEnterActive={handleThumbEnterActive}
+            onEnterEnd={handleThumbEnterEnd}
+          >
+            {({ className: motionClassName, style: motionStyle }) => {
+              return (
+                <div
+                  style={motionStyle}
+                  className={classNames(`${prefixCls}-thumb`, motionClassName)}
+                />
+              );
+            }}
+          </CSSMotion>
+          {segmentedOptions.map((segmentedOption) => (
+            <InternalSegmentedOption
+              key={segmentedOption.value}
+              prefixCls={prefixCls}
+              className={classNames(
+                segmentedOption.className,
+                `${prefixCls}-item`,
+                {
+                  [`${prefixCls}-item-selected`]:
+                    segmentedOption.value === visualSelected,
+                },
+              )}
+              checked={segmentedOption.value === selected}
+              onChange={handleChange}
+              {...segmentedOption}
+            />
+          ))}
+        </div>
       </div>
     );
   },