Merge pull request #1606 from sheinsight/fix/ui-issues-0123

fix: 修复多个组件的 UI 验收问题

Author: saint3347

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sheinx",
   "private": true,
-  "version": "3.9.8",
+  "version": "3.9.9-beta.1",
   "description": "A react library developed with sheinx",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

packages/base/src/collapse/collapse-item.tsx

@@ -43,10 +43,11 @@ const CollapseItem = (props: CollapseItemProps) => {
       disabled,
       onChange,
     });
-  const headerIconItem = () => {
+  const headerIconItem = (direction: 'left' | 'right') => {
     const collapseItemIconClassName = classNames(
       jssStyle?.collapseItem.icon,
       jssStyle?.collapseItem.activeTransform,
+      direction === 'right' && jssStyle?.collapseItem.iconRight,
       // expandIconPosition === 'right'
       //   ? jssStyle?.collapseItem.activeTransformRight
       //   : jssStyle?.collapseItem.activeTransform,
@@ -112,7 +113,7 @@ const CollapseItem = (props: CollapseItemProps) => {
   return (
     <div className={collapseItemClassName} style={style}>
       <div {...getItemContentProps({ className: collapseItemHeaderClassName })}>
-        {expandIconPosition === 'left' && headerIconItem()}
+        {expandIconPosition === 'left' && headerIconItem('left')}
         {extraPosition === 'left' && extraItem()}
         <div
           {...getTitleProps({
@@ -125,7 +126,7 @@ const CollapseItem = (props: CollapseItemProps) => {
           {title}
         </div>
         {extraPosition === 'right' && extraItem()}
-        {expandIconPosition === 'right' && headerIconItem()}
+        {expandIconPosition === 'right' && headerIconItem('right')}
       </div>
       {renderContent()}
     </div>

packages/base/src/collapse/collapse-item.type.ts

@@ -11,6 +11,7 @@ export interface CollapseItemClasses {
   header: string;
   active: string;
   icon: string;
+  iconRight: string;
   title: string;
   extra: string;
   content: string;

packages/base/src/icons/config.tsx

@@ -90,7 +90,7 @@ const config = {
     InfoLine: icons.InfoCircleFill,
     WarningLine: icons.WarningCircleFill,
     SuccessLine: icons.CheckCircleFill,
-    DangerLine: icons.Close,
+    DangerLine: icons.CloseFill,
   },
   rate: {
     Star: icons.StarFill,

packages/base/src/modal/modal-content.tsx

@@ -9,6 +9,7 @@ import { FormFooterProvider } from '../form/form-footer-context';
 import { popupContext } from '@sheinx/hooks';
 
 import type { ModalContentProps } from './modal-content.type';
+import { useConfig } from '../config';
 
 let hasMask = false;
 
@@ -102,6 +103,7 @@ const Modal = (props: ModalContentProps) => {
   const defaultWidth = isPositionX ? 'auto' : 500;
   const { events = {}, maskCloseAble = true, esc = true, top = '10vh', style = {} } = props;
 
+  const globalConfig = useConfig()
   const width = style.width || props.width || defaultWidth;
   const height = style.height || props.height;
   const [origin, setOrigin] = useState('');
@@ -508,6 +510,7 @@ const Modal = (props: ModalContentProps) => {
         )}
         onAnimationEnd={handleAnimationEnd}
         style={{ background: props.maskBackground, zIndex: props.zIndex, display: !visible && !animation ? 'none' : undefined }}
+        dir={globalConfig.direction}
       >
         <div
           className={modalClasses?.mask}

packages/base/src/select/list-columns.tsx

@@ -102,7 +102,7 @@ const ColumnsList = <DataItem, Value>(props: BaseListProps<DataItem, Value>) =>
     if (item[groupKey]) {
       const title = item[groupKey];
       return (
-        <div className={styles.optionGroupTitle} key={key} title={typeof title === 'string' ? title as string : undefined}>
+        <div className={styles.optionGroupTitle} key={key} title={typeof title === 'string' ? title as string : undefined} style={{ height: 'var(--group-title-height)' }}>
           {title as React.ReactNode}
         </div>
       );

packages/base/src/select/list.tsx

@@ -178,7 +178,7 @@ const List = <DataItem, Value>(props: BaseListProps<DataItem, Value>) => {
   const renderGroupTitle = (d: { [key: string]: any }) => {
     const title = d[groupKey as keyof typeof d];
     return (
-      <div className={styles.optionGroupTitle} title={typeof title === 'string' ? title : undefined}>
+      <div className={styles.optionGroupTitle} title={typeof title === 'string' ? title : undefined} style={{ height: 'var(--group-title-height)' }}>
         {title}
       </div>
     );
@@ -217,7 +217,7 @@ const List = <DataItem, Value>(props: BaseListProps<DataItem, Value>) => {
     }
   }, []);
 
-  return <div className={rootClass}>{renderList()}</div>;
+  return <div className={rootClass} style={{ '--group-title-height': `${lineHeight - 2}px` } as React.CSSProperties}>{renderList()}</div>;
 };
 
 export default List;

packages/shineout-style/src/collapse/collapse-item.ts

@@ -94,6 +94,10 @@ const collapseItemStyle: JsStyles<CollapseItemClassType> = {
       },
     }
   },
+  iconRight: {
+    marginRight: 0,
+    marginLeft: Token.collapseHeaderGap,
+  },
   title: {
     flex: 1,
     lineHeight: Token.lineHeightDynamic,

packages/shineout-style/src/inner-title/inner-title.ts

@@ -1,6 +1,7 @@
 import { JsStyles } from '../jss-style';
 import token from '@sheinx/theme';
 import { InnerTitleClasses } from '@sheinx/base';
+import { getTokenName } from '@sheinx/theme';
 
 const moveOffset = '-10px';
 const moveTime = '120ms';

packages/shineout-style/src/input/input-border.ts

@@ -1,3 +1,4 @@
+import { getTokenName } from '@sheinx/theme';
 import type { CSSProperties } from 'react';
 
 const supportsHas = () => {
@@ -216,6 +217,8 @@ export default <T extends string>(name: T, token: Token = {} as any) => {
       borderColor: token.disabledBorderColor,
       boxShadow: 'none',
       cursor: 'not-allowed',
+      [getTokenName('inputInnerPlaceFontColor')]: token.disabledFontColor,
+      [getTokenName('inputInnerFontColor')]: token.disabledFontColor,
       [`&:not($${name}Error):hover`]: {
         borderColor: token.disabledBorderColor,
       },