@atlaskit/pagination 14.2.1 → 14.2.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/pagination
 
+## 14.2.2
+
+### Patch Changes
+
+- [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
+
 ## 14.2.1
 
 ### Patch Changes

package/dist/cjs/internal/components/navigator.js

@@ -15,13 +15,12 @@ var _react2 = require("@emotion/react");
 
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
-var _constants = require("@atlaskit/theme/constants");
-
 /** @jsx jsx */
-var gridSize = (0, _constants.gridSize)();
 var navigatorStyles = (0, _react2.css)({
-  paddingRight: gridSize / 2,
-  paddingLeft: gridSize / 2
+  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
+  paddingRight: "var(--ds-scale-050, 4px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
+  paddingLeft: "var(--ds-scale-050, 4px)"
 });
 
 function Navigator(props) {

package/dist/cjs/internal/components/render-ellipsis.js

@@ -10,7 +10,7 @@ var _react = require("@emotion/react");
 /**  @jsx jsx */
 var ellipsisStyles = (0, _react.css)({
   display: 'inline-flex',
-  padding: '0 8px',
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-100, 8px)"),
   alignItems: 'center',
   textAlign: 'center'
 });

package/dist/cjs/pagination.js

@@ -42,7 +42,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.2.1"
+  packageVersion: "14.2.2"
 };
 var navStyles = (0, _react2.css)({
   display: 'flex'

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/pagination",
-	"version": "14.2.1",
+	"version": "14.2.2",
 	"sideEffects": false
 }

package/dist/es2019/internal/components/navigator.js

@@ -4,11 +4,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-const gridSize = getGridSize();
 const navigatorStyles = css({
-  paddingRight: gridSize / 2,
-  paddingLeft: gridSize / 2
+  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
+  paddingRight: "var(--ds-scale-050, 4px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
+  paddingLeft: "var(--ds-scale-050, 4px)"
 });
 export default function Navigator(props) {
   return jsx(Button // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

package/dist/es2019/internal/components/render-ellipsis.js

@@ -2,7 +2,7 @@
 import { css, jsx } from '@emotion/react';
 const ellipsisStyles = css({
   display: 'inline-flex',
-  padding: '0 8px',
+  padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-100, 8px)"}`,
   alignItems: 'center',
   textAlign: 'center'
 });

package/dist/es2019/pagination.js

@@ -14,7 +14,7 @@ import collapseRange from './internal/utils/collapse-range';
 const analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.2.1"
+  packageVersion: "14.2.2"
 };
 const navStyles = css({
   display: 'flex'

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/pagination",
-	"version": "14.2.1",
+	"version": "14.2.2",
 	"sideEffects": false
 }

package/dist/esm/internal/components/navigator.js

@@ -4,11 +4,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-var gridSize = getGridSize();
 var navigatorStyles = css({
-  paddingRight: gridSize / 2,
-  paddingLeft: gridSize / 2
+  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
+  paddingRight: "var(--ds-scale-050, 4px)",
+  // TODO Delete this comment after verifying spacing token -> previous value `gridSize / 2`
+  paddingLeft: "var(--ds-scale-050, 4px)"
 });
 export default function Navigator(props) {
   return jsx(Button // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

package/dist/esm/internal/components/render-ellipsis.js

@@ -2,7 +2,7 @@
 import { css, jsx } from '@emotion/react';
 var ellipsisStyles = css({
   display: 'inline-flex',
-  padding: '0 8px',
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-100, 8px)"),
   alignItems: 'center',
   textAlign: 'center'
 });

package/dist/esm/pagination.js

@@ -21,7 +21,7 @@ import collapseRange from './internal/utils/collapse-range';
 var analyticsAttributes = {
   componentName: 'pagination',
   packageName: "@atlaskit/pagination",
-  packageVersion: "14.2.1"
+  packageVersion: "14.2.2"
 };
 var navStyles = css({
   display: 'flex'

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/pagination",
-	"version": "14.2.1",
+	"version": "14.2.2",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/pagination",
-  "version": "14.2.1",
+  "version": "14.2.2",
   "description": "Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -16,7 +16,8 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
@@ -27,6 +28,7 @@
     ".": "./src/index.tsx"
   },
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -39,8 +41,8 @@
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/codemod-utils": "^4.1.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/icon": "^21.11.0",
+    "@atlaskit/tokens": "^0.10.27",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "memoize-one": "^6.0.0"
@@ -52,7 +54,7 @@
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/dynamic-table": "^14.8.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -77,6 +79,7 @@
       "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [

package/report.api.md

@@ -1,11 +1,14 @@
-## API Report File for "@atlaskit/pagination"
+## API Report File for "@atlaskit/pagination".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />
 
 import type { CSSProperties } from 'react';
+import { jsx } from '@emotion/react';
 import type { ReactElement } from 'react';
 import type { SyntheticEvent } from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
@@ -31,55 +34,81 @@ declare function InnerPagination<T>(
     testId,
   }: PaginationPropTypes<T>,
   ref: React.Ref<HTMLDivElement>,
-): JSX.Element;
+): jsx.JSX.Element;
 
 export declare interface PaginationPropTypes<T = unknown> {
-  /** Replace the built-in Page, Previous, Next and/ or Ellipsis component */
+  /**
+   * Replace the built-in Page, Previous, Next and/ or Ellipsis component
+   */
   components?: {
     Page?: React.ElementType;
     Previous?: React.ElementType;
     Next?: React.ElementType;
   };
-  /** Index of the page to be selected by default */
+  /**
+   * Index of the page to be selected by default
+   */
   defaultSelectedIndex?: number;
-  /** Helper function to get text displayed on the page button. It is helpful in scenarios when page the page passed in is an object  */
+  /**
+   * Helper function to get text displayed on the page button. It is helpful in scenarios when page the page passed in is an object
+   */
   getPageLabel?: (page: T, pageIndex: number) => number | string;
-  /** The aria-label for the pagination wrapper */
+  /**
+   * The aria-label for the pagination wrapper
+   */
   label?: string;
-  /** The aria-label for the next button */
+  /**
+   * The aria-label for the next button
+   */
   nextLabel?: string;
-  /** The aria-label for the previous button */
+  /**
+   * The aria-label for the previous button
+   */
   previousLabel?: string;
-  /** Style to spread on the container element */
+  /**
+   * Style to spread on the container element
+   */
   style?: CSSProperties;
-  /** Maximum number of pages to be displayed in the pagination */
+  /**
+   * Maximum number of pages to be displayed in the pagination
+   */
   max?: number;
-  /** The onChange handler which is called when the page is changed */
+  /**
+   * The onChange handler which is called when the page is changed
+   */
   onChange?: (
     event: SyntheticEvent,
     page: T,
     analyticsEvent?: UIAnalyticsEvent,
   ) => void;
-  /** Array of the pages to display */
+  /**
+   * Array of the pages to display
+   */
   pages: T[];
-  /** Index of the selected page. This will make this pagination controlled */
+  /**
+   * Index of the selected page. This will make this pagination controlled
+   */
   selectedIndex?: number;
-  /** The react Node returned from the function is rendered instead of the default ellipsis node */
+  /**
+   * The react Node returned from the function is rendered instead of the default ellipsis node
+   */
   renderEllipsis?: (arg: { key: string }) => ReactElement;
-  /** Additional information to be included in the `context` of analytics events */
+  /**
+   * Additional information to be included in the `context` of analytics events
+   */
   analyticsContext?: Record<string, any>;
   /**
-     A `testId` prop is provided for specified elements,
-     which is a unique string that appears as a data attribute `data-testid`
-     in the rendered code, serving as a hook for automated tests.
-
-     Will set data-testid on these elements when defined:
-     - Pagination nav wrapper - {testId}
-     - Page - {testId}--page-{page index}
-     - Current page - {testId}--current-page-{page index}
-     - Left navigator - {testId}--left-navigator
-     - Right navigator - {testId}--right-navigator
-     */
+   * A `testId` prop is provided for specified elements,
+   * which is a unique string that appears as a data attribute `data-testid`
+   * in the rendered code, serving as a hook for automated tests.
+   *
+   * Will set data-testid on these elements when defined:
+   * - Pagination nav wrapper - {testId}
+   * - Page - {testId}--page-{page index}
+   * - Current page - {testId}--current-page-{page index}
+   * - Left navigator - {testId}--left-navigator
+   * - Right navigator - {testId}--right-navigator
+   */
   testId?: string;
 }