@cloud-ru/ds-pagination 1.0.5 → 1.0.6-preview-d50a3da1.0

package/src/components/Pagination/Pagination.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@cloud-ru/ds-button';
 import { ChevronLeftSVG, ChevronRightSVG } from '@cloud-ru/ds-icons/interface/system';
 import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
 import { MouseEvent, useEffect, useRef, useState } from 'react';
@@ -118,8 +117,6 @@ export function Pagination({
     return null;
   };
 
-  const buttonSize = size === PAGINATION_SIZE.M ? 'm' : 's';
-
   return (
     <PaginationContext.Provider value={{ size, variant }}>
       <nav
@@ -131,26 +128,20 @@ export function Pagination({
       >
         <ul className={styles.pagination} data-size={size}>
           <li>
-            <Button
-              view='simple'
-              appearance='neutral'
+            <PaginationNumberItem
               icon={<ChevronLeftSVG />}
               onClick={handlePreviousPageButtonClick}
               disabled={page === FIRST_PAGE}
-              size={buttonSize}
               aria-label='Previous page'
               data-test-id={TEST_IDS.prev}
             />
           </li>
           {entries.map(renderEntry)}
           <li>
-            <Button
-              view='simple'
-              appearance='neutral'
+            <PaginationNumberItem
               icon={<ChevronRightSVG />}
               onClick={handleNextPageButtonClick}
               disabled={page === total}
-              size={buttonSize}
               aria-label='Next page'
               data-test-id={TEST_IDS.next}
             />

package/src/components/PaginationNumberItem/PaginationNumberItem.tsx

@@ -1,11 +1,15 @@
 import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
-import { MouseEvent, Ref } from 'react';
+import { MouseEvent, ReactNode, Ref } from 'react';
 
 import { usePaginationContext } from '../../contexts';
 import styles from './styles.module.scss';
 
 export type PaginationNumberItemProps = WithSupportProps<{
-  label: number | string;
+  label?: number | string;
+  /** Иконка вместо текста — кнопки «назад» / «вперёд» (Figma `buttonPaginationS/M`). */
+  icon?: ReactNode;
+  disabled?: boolean;
+  'aria-label'?: string;
   activated?: boolean;
   onClick(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void;
   href?: string;
@@ -14,6 +18,9 @@ export type PaginationNumberItemProps = WithSupportProps<{
 
 export function PaginationNumberItem({
   label,
+  icon,
+  disabled,
+  'aria-label': ariaLabel,
   activated,
   onClick,
   href,
@@ -24,6 +31,26 @@ export function PaginationNumberItem({
 
   const stateLayer = activated ? 'activatedOnBackground' : 'emptyNeutralOnBackground';
 
+  if (icon) {
+    return (
+      <button
+        type='button'
+        className={styles.root}
+        onClick={onClick}
+        ref={setButtonRef as Ref<HTMLButtonElement>}
+        data-size={size}
+        {...extractSupportProps(rest)}
+        disabled={disabled}
+        data-disabled={disabled || undefined}
+        data-icon
+        aria-label={ariaLabel}
+      >
+        {!disabled && <span className={styles.stateLayer} aria-hidden data-state={stateLayer} />}
+        <span className={styles.icon}>{icon}</span>
+      </button>
+    );
+  }
+
   if (variant === 'link') {
     return (
       <a

package/src/components/PaginationNumberItem/styles.module.scss

@@ -4,6 +4,11 @@
 
 $sizes: 's', 'm';
 
+$icon-sizes: (
+  's': base.$sn-density-icon-xs,
+  'm': base.$sn-density-icon-s,
+);
+
 $typography: (
   's': base.$sn-regular-label-s,
   'm': base.$sn-regular-label-m,
@@ -35,6 +40,28 @@ $typography: (
   outline: 0;
   outline-offset: 0;
 
+  // Область нажатия на mobile ≥ `density.touchTarget.minSize` (44) по высоте; на desktop токен 0.
+  // По горизонтали не расширяем — кнопки стоят вплотную и зоны наехали бы на соседние.
+  &::after {
+    content: '';
+    position: absolute;
+    inset: min(0px, calc((100% - #{base.simple-var(base.$sn-density, 'touchTarget', 'minSize')}) / 2)) 0;
+  }
+
+  &[data-activated] {
+    color: base.$sn-theme-color-primary-text;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: base.$sn-theme-effect-opacity-disabled;
+  }
+
+  &:focus-visible {
+    outline: base.$sn-theme-color-available-complementary solid base.$sn-primitive-strokeWeight-strokeSemiBold;
+    outline-offset: base.$sn-primitive-strokeWeight-strokeSemiBold;
+  }
+
   @each $size in $sizes {
     &[data-size='#{$size}'] {
       @include base.composite-var(
@@ -46,6 +73,11 @@ $typography: (
         'itemPaginationNumber'
       );
 
+      .icon {
+        width: base.simple-var($icon-sizes, $size);
+        height: base.simple-var($icon-sizes, $size);
+      }
+
       .textWrapper {
         @include base.composite-var($typography, $size);
 
@@ -62,15 +94,6 @@ $typography: (
     }
   }
 
-  &[data-activated] {
-    color: base.$sn-theme-color-primary-text;
-  }
-
-  &:focus-visible {
-    outline: base.$sn-theme-color-available-complementary solid base.$sn-primitive-strokeWeight-strokeSemiBold;
-    outline-offset: base.$sn-primitive-strokeWeight-strokeSemiBold;
-  }
-
   @include m.has-state-layer-as-child(#{stateLayer});
 }
 
@@ -80,3 +103,15 @@ $typography: (
   justify-content: center;
   min-width: 0;
 }
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  // Иконки `@cloud-ru/ds-icons` ставят размер инлайн-стилем — ограничиваем размером слота.
+  svg {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}