fix: style more priority (#7854)

VKCOM · Oct 29, 2024 · e5e82f5 · e5e82f5
1 parent 0369ebd
commit e5e82f5
Show file tree

Hide file tree

Showing 14 changed files with 28 additions and 40 deletions.
diff --git a/...ts__/actionsheet-viewwidth-desktop-sizey-regular-vkcom-chromium-dark-1-snap.png b/...ts__/actionsheet-viewwidth-desktop-sizey-regular-vkcom-chromium-dark-1-snap.png
diff --git a/...s__/actionsheet-viewwidth-desktop-sizey-regular-vkcom-chromium-light-1-snap.png b/...s__/actionsheet-viewwidth-desktop-sizey-regular-vkcom-chromium-light-1-snap.png
diff --git a/...ots__/actionsheet-viewwidth-desktop-sizey-regular-vkcom-firefox-dark-1-snap.png b/...ots__/actionsheet-viewwidth-desktop-sizey-regular-vkcom-firefox-dark-1-snap.png
diff --git a/...ts__/actionsheet-viewwidth-desktop-sizey-regular-vkcom-firefox-light-1-snap.png b/...ts__/actionsheet-viewwidth-desktop-sizey-regular-vkcom-firefox-light-1-snap.png
diff --git a/...hots__/actionsheet-viewwidth-desktop-sizey-regular-vkcom-webkit-dark-1-snap.png b/...hots__/actionsheet-viewwidth-desktop-sizey-regular-vkcom-webkit-dark-1-snap.png
diff --git a/...ots__/actionsheet-viewwidth-desktop-sizey-regular-vkcom-webkit-light-1-snap.png b/...ots__/actionsheet-viewwidth-desktop-sizey-regular-vkcom-webkit-light-1-snap.png
diff --git a/...pshots__/actionsheet-viewwidth-mobile-sizey-regular-ios-webkit-light-1-snap.png b/...pshots__/actionsheet-viewwidth-mobile-sizey-regular-ios-webkit-light-1-snap.png
diff --git a/packages/vkui/src/components/FixedLayout/FixedLayout.tsx b/packages/vkui/src/components/FixedLayout/FixedLayout.tsx
@@ -107,7 +107,7 @@ export const FixedLayout = ({
         vertical && stylesVertical[vertical],
         className,
       )}
-      style={{ ...style, width }}
+      style={{ width, ...style }}
     >
       {children}
     </OnboardingTooltipContainer>

diff --git a/packages/vkui/src/components/FormField/FormField.tsx b/packages/vkui/src/components/FormField/FormField.tsx
@@ -127,14 +127,10 @@ export const FormField = ({
     <Component
       {...restProps}
       ref={elRef}
-      style={
-        maxHeight !== undefined
-          ? {
-              ...style,
-              maxHeight,
-            }
-          : style
-      }
+      style={{
+        maxHeight,
+        ...style,
+      }}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       className={classNames(

diff --git a/packages/vkui/src/components/List/List.tsx b/packages/vkui/src/components/List/List.tsx
@@ -27,8 +27,8 @@ export const List = ({
       role="list"
       className={classNames(styles.host, className)}
       style={{
-        ...style,
         gridGap: gap,
+        ...style,
       }}
       {...restProps}
     >

diff --git a/packages/vkui/src/components/ModalCardBase/ModalCardBase.tsx b/packages/vkui/src/components/ModalCardBase/ModalCardBase.tsx
@@ -126,8 +126,8 @@ export const ModalCardBase = ({
         withSafeZone && styles.withSafeZone,
       )}
       style={{
-        ...style,
         maxWidth: size,
+        ...style,
       }}
     >
       <div

diff --git a/packages/vkui/src/components/Popper/Popper.tsx b/packages/vkui/src/components/Popper/Popper.tsx
@@ -166,14 +166,14 @@ export const Popper = ({
       baseClassName={styles.host}
       getRootRef={handleRootRef}
       style={{
-        ...styleProp,
         ...convertFloatingDataToReactCSSProperties(
           floatingPositionStrategy,
           floatingDataX,
           floatingDataY,
           sameWidth ? null : undefined,
           middlewareData,
         ),
+        ...styleProp,
       }}
     >
       {arrow && (

diff --git a/packages/vkui/src/components/Progress/Progress.tsx b/packages/vkui/src/components/Progress/Progress.tsx
@@ -20,13 +20,6 @@ function progressCustomHeightStyle(height: number | undefined): React.CSSPropert
     : undefined;
 }
 
-function progressStyle(height: number | undefined, styleProps: React.CSSProperties | undefined) {
-  const styleHeight = progressCustomHeightStyle(height);
-  const style = styleHeight ? { ...styleProps, ...styleHeight } : styleProps;
-
-  return style;
-}
-
 export interface ProgressProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
    * Стиль отображения прогрессбара
@@ -49,19 +42,18 @@ export const Progress = ({
   value = 0,
   appearance = 'accent',
   height,
-  style: styleProps,
+  style,
   ...restProps
 }: ProgressProps): React.ReactNode => {
   const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
   const title = `${progress} / ${PROGRESS_MAX_VALUE}`;
-
-  const style = progressStyle(height, styleProps);
+  const styleHeight = progressCustomHeightStyle(height);
 
   return (
     <RootComponent
       aria-valuenow={value}
       title={title}
-      style={style}
+      style={{ ...styleHeight, ...style }}
       {...restProps}
       role="progressbar"
       aria-valuemin={PROGRESS_MIN_VALUE}

diff --git a/packages/vkui/src/components/SplitCol/SplitCol.tsx b/packages/vkui/src/components/SplitCol/SplitCol.tsx
@@ -98,10 +98,10 @@ export const SplitCol = (props: SplitColProps): React.ReactNode => {
     <RootComponent
       {...restProps}
       style={{
+        width,
+        maxWidth,
+        minWidth,
         ...style,
-        width: width,
-        maxWidth: maxWidth,
-        minWidth: minWidth,
       }}
       getRootRef={baseRef}
       baseClassName={classNames(