Set icon styles

DevExpress · Mar 5, 2025 · e920f63 · e920f63
1 parent ab759ec
commit e920f63
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss
@@ -13,9 +13,19 @@
   padding: ($cardview-header-item-padding-vertical - $cardview-header-item-border-width) $cardview-header-item-padding-horizontal;
   min-width: fit-content;
   user-select: none;
+  display: grid;
+  grid-auto-flow: column;
+  align-self: center;
+  gap: 5px;
 
   &:hover {
     background-color: $cardview-header-item-hovered-background-color;
     border: solid $cardview-header-item-border-width $cardview-header-item-hovered-border-color;
   }
 }
+
+.dx-cardview-header-item-sorting {
+  display: grid;
+  grid-auto-flow: column;
+  align-self: center;
+}
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_variables.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_variables.scss
@@ -6,5 +6,5 @@ $cardview-header-item-hovered-border-color: null !default;
 
 $cardview-header-item-border-width: null !default;
 $cardview-header-item-border-radius: null !default;
-$cardview-header-item-padding-horizontal: 12px !default;
+$cardview-header-item-padding-horizontal: 8px !default;
 $cardview-header-item-padding-vertical: 6px !default;
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx
@@ -10,6 +10,7 @@ export const CLASSES = {
     container: 'dx-cardview-header-item-sorting',
     order: 'dx-cardview-header-item-sorting-order',
   },
+  icon: 'dx-icon',
 };
 
 // TODO: extract icons to separate component
@@ -26,8 +27,8 @@ const ICONS = {
       <path d="M8.35355 0.146447C8.25978 0.0526784 8.13261 0 8 0C7.86739 0 7.74021 0.0526784 7.64645 0.146447L5.14645 2.64645C4.95118 2.84171 4.95118 3.15829 5.14645 3.35355C5.34171 3.54882 5.65829 3.54882 5.85355 3.35355L7.5 1.70711V5.5C7.5 5.77614 7.72386 6 8 6C8.27614 6 8.5 5.77614 8.5 5.5V1.70711L10.1464 3.35355C10.3417 3.54882 10.6583 3.54882 10.8536 3.35355C11.0488 3.15829 11.0488 2.84171 10.8536 2.64645L8.35355 0.146447ZM0.146447 7.64645C0.0526784 7.74021 0 7.86739 0 8C0 8.13261 0.0526784 8.25979 0.146447 8.35355L2.64645 10.8536C2.84171 11.0488 3.15829 11.0488 3.35355 10.8536C3.54882 10.6583 3.54882 10.3417 3.35355 10.1464L1.70711 8.5H5.5C5.77614 8.5 6 8.27614 6 8C6 7.72386 5.77614 7.5 5.5 7.5H1.70711L3.35355 5.85355C3.54882 5.65829 3.54882 5.34171 3.35355 5.14645C3.15829 4.95118 2.84171 4.95118 2.64645 5.14645L0.146447 7.64645ZM8 16C7.86739 16 7.74021 15.9473 7.64645 15.8536L5.14645 13.3536C4.95118 13.1583 4.95118 12.8417 5.14645 12.6464C5.34171 12.4512 5.65829 12.4512 5.85355 12.6464L7.5 14.2929L7.5 10.5C7.5 10.2239 7.72386 10 8 10C8.27614 10 8.5 10.2239 8.5 10.5V14.2929L10.1464 12.6464C10.3417 12.4512 10.6583 12.4512 10.8536 12.6464C11.0488 12.8417 11.0488 13.1583 10.8536 13.3536L8.35355 15.8536C8.25979 15.9473 8.13261 16 8 16ZM15.8536 8.35355C15.9473 8.25978 16 8.13261 16 8C16 7.86739 15.9473 7.74021 15.8536 7.64645L13.3536 5.14645C13.1583 4.95118 12.8417 4.95118 12.6464 5.14645C12.4512 5.34171 12.4512 5.65829 12.6464 5.85355L14.2929 7.5L10.5 7.5C10.2239 7.5 10 7.72386 10 8C10 8.27614 10.2239 8.5 10.5 8.5L14.2929 8.5L12.6464 10.1464C12.4512 10.3417 12.4512 10.6583 12.6464 10.8536C12.8417 11.0488 13.1583 11.0488 13.3536 10.8536L15.8536 8.35355Z" fill="#242424"/>
     </svg>
   ),
-  sortUp: <i className='dx-icon dx-icon-sortup'/>,
-  sortDown: <i className='dx-icon dx-icon-sortdown'/>,
+  sortUp: <div className={`${CLASSES.icon} dx-icon-sortup`}/>,
+  sortDown: <div className={`${CLASSES.icon} dx-icon-sortdown`}/>,
 };
 
 interface SortIconProps {
@@ -38,17 +39,17 @@ interface SortIconProps {
 
 function SortIcon(props: SortIconProps): JSX.Element {
   return (
-    <span className={CLASSES.sorting.container}>
+    <div className={CLASSES.sorting.container}>
       {props.sortOrder === 'asc' && ICONS.sortUp}
       {props.sortOrder === 'desc' && ICONS.sortDown}
       {
         props.showSortIndex && (
-          <span className={CLASSES.sorting.order}>
+          <div className={CLASSES.sorting.order}>
             {props.sortIndex}
-          </span>
+          </div>
         )
       }
-    </span>
+    </div>
   );
 }