Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
yarn add @atlaskit/pagination796d5838394c2 -
revert the changes for pagination page navigator markup#117363
10a0f7f6c2027 -
This package's peerDependencies have been adjusted for react and/or react-dom to reflect the
status of only supporting React 18 going forward. No explicit breaking change to React support has
been made in this release, but this is to signify going forward, breaking changes for React 16 or
React 17 may come via non-major semver releases.
Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
1f4d9ed8a1be8 -
Remove unused internal exports and old codemods, update dependencies.7d1407c18c85c -
We are testing the pagination behind a feature flag. Moving the page navigator buttons in to the
list. If this fix is successful it will be available in a later release.4660ec858a305 -
Update React from v16 to v18#174375
4a3e12575f8ef -
Migrated from @emotion/react to @compiled/react in order to improve performance, align with
the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
Please note, in order to use this version of @atlaskit/pagination, you will need to ensure that
your bundler is configured to handle .css imports correctly. Most bundlers come with built-in
support for .css imports, so you may not need to do anything. If you are using a different
bundler, please refer to the documentation for that bundler to understand how to handle .css
imports.
For more information on the migration, please refer to RFC-73 Migrating our components to Compiled CSS-in-JS.
57f451bda8919 -
Adds side-effect config to support Compiled css extraction in third-party appsa820e507f83f7 -
[ux] [EDF-1566] Made the rovo agents equal heights#127511
db30e29344013 -
Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0
to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).
This change has been done to enable usage of react@18.3 as well as to have a consistent peer
dependency range for react and react-dom for /platform packages.
16045b926e115 -
Refactor export of pagination component for better Typescript typing recognition.7cce9cbf2f08 -
Internal changes to how text is rendered. There is no expected visual change.85525725cb0d -
Migrated to the new button component6ff808b4cb86 -
Remove unused "pages" prop from Navigator buttons and replace usage of spread operator with
individual props.10cdc9cadb00 -
Accessibility fix. Fixed semantics for pagination buttons.5891eff1980 - The
internal composition of this component has changed. There is no expected change in behavior.4ae083a7e66 - Use
@af/accessibility-testing for default jest-axe config and jest-axe import in accessibility
testing.2ed5220efcc -
DSP-10691: added jest-axe and created accessibility unit tests to ensure basic a11y issues are
tested12d9c63d4c1 - [ux]
pass pageLabel to dynamic-table component and updat prev label in examples, add description in the
types file, update example files56507598609 - Skip
minor dependency bump2e01c9c74b5 - DUMMY
remove before merging to master; dupe adf-schema via adf-utilscfe48bb7ece - Internal
change only. Replace usages of Inline/Stack with stable version from @atlaskit/primitives.eadbf13d8c0 - Updated
usages of Text, Box, Stack, and Inline primitives to reflect their updated APIs. There are
no visual or behaviour changes.716af1d3387 - Bump
@atlaskit/heading from 1.0.0 to 1.0.1 to avoid resolving to poison dependency version207726a4cb2 - [ux]
Replace ellipsis made with three periods (...) with ellipsis character (…)87991a69644 - - Remove
@atlaskit/tokens as a dependency.
9827dcb82b8 - No-op
change to introduce spacing tokens to design system components.2afcf534bad - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.ac051e856a6 - Internal
code change turning on new linting rules.f8678250d08 - Styles
have been rewritten to prepare for migration to compiled.f7f36b1ea80 - Test IDs
are now applied to sub-components, including the page items and left/right navigation controlscd34d8ca8ea - Internal
wiring up to the tokens techstack, no code changes.d6f7ff383cf - Updates
to development dependency storybook-addon-performance01918d5d885 - Reduce
bundle size by replacing custom theme buttons to standard buttons in pagination component.#10569
517850f6451 - In this
version we made pagination dramatically faster and lighter 🤩
General performance improvements.
Accesbility improvemnts (Change Pagination wrapper tag from div to nav).
Changed to on demand dyanmic generation of page components for better performance.
BREAKING Renamed innerStyles -> style prop & PaginationPropTypes -> PaginationProps.
Removed i18n prop and flattened its child props prev, next as standalone props
nextLabeland prevLabel. Added label prop for adding aria-label on pagination wrapper.
Removed collapseRange props beacause of its limited use & achieving better performance.
Running the codemod cli
To run the codemod: You first need to have the latest version installed
yarn upgrade @atlaskit/pagination@^14.0.0
Once upgraded, use @atlaskit/codemod-cli:
npx @atlaskit/codemod-cli --parser babel --extensions ts,tsx,js [relativePath]
The CLI will show a list of components and versions so select @atlaskit/pagination@^14.0.0 and
you will automatically be upgraded. If your usage of pagination cannot be upgraded, a comment will
be left that a manual change is required.
Run npx @atlaskit/codemod-cli -h for more details on usage. For Atlassians, refer to the
documentation for more
details on the codemod CLI.
200ebeada19 - Updated
codemods to handle edge cases0c29d48ebf8 - Convert
class to functional components & analytics HOC to hooks6cba681e2d7 - Fixed
ellipsis button incorrectly showing when it could show the actual button instead.a44cece0063 - Removed
deprecated auto entry points and added new entry points in Pagination packagee30a953977b - Convert
pagination from styled to emotion CSS"79c23df6340 - Use
injected package name and version for analytics instead of version.json.5f58283e1f - Export
types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules
compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript
versions here: https://atlaskit.atlassian.com/get-started Also add typescript to
devDependencies to denote version that the package was built with.2ac834240e - Undo
analytics-next file restructure to allow external ts definitions to continue working#3885
6c525a8229 - Upgraded
to TypeScript 3.9.6 and tslib to 2.0.0
Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled.
7c7ec3b7ab - Earlier
user was unable to see next page once he goes to page 5, While using Pagination component. Now it
works fine for page 5 and other page as well.954cc87b62 - The readme
and package information has been updated to point to the new design system website.87f4720f27 - Officially
dropping IE11 support, from this version onwards there are no warranties of the package working in
IE11. For more information see:
https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/3953454a9514fcf - Build and
supporting files will no longer be published to npm83dad3770b - Change
imports to comply with Atlassian conventions- Updated dependencies[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]4a223473c5:
Removes babel/runtime from dependencies. Users should see a smaller bundlesize as a result- Updated dependencies 28f8f0e089:
Updated dependencies 82747f2922:
Updated dependencies 4a223473c5:
[patch]35d2229b2a:
Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.
[patch]a2d0043716:
Updated version of analytics-next to fix potential incompatibilities with TS 3.6
[patch]097b696613:
Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports
[patch]708028db86:
Change all the imports to theme in Core to use multi entry points
[patch]926b43142b:
Analytics-next has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No behavioural changes.
Breaking changes
withAnalyticsForSumTypeProps alias has been removed, please use withAnalyticsEventsAnalyticsContextWrappedComp alias has been removed, please use withAnalyticsContextBreaking changes to TypeScript annotations
withAnalyticsEvents now infers proptypes automatically, consumers no longer need to provide
props as a generic type.withAnalyticsContext now infers proptypes automatically, consumers no longer need to provide
props as a generic type.WithAnalyticsEventProps has been renamed to WithAnalyticsEventsProps to match source
codeCreateUIAnalyticsEventSignature has been renamed to CreateUIAnalyticsEvent to match
source codeUIAnalyticsEventHandlerSignature has been renamed to UIAnalyticsEventHandler to match
source codeAnalyticsEventsPayload has been renamed to AnalyticsEventPayloadObjectType has been removed, please use Record<string, any> or [key: string]: anyUIAnalyticsEventInterface has been removed, please use UIAnalyticsEventAnalyticsEventInterface has been removed, please use AnalyticsEventCreateAndFireEventFunction removed and should now be inferred by TypeScriptAnalyticsEventUpdater removed and should now be inferred by TypeScript[patch]9f8ab1084b:
Consume analytics-next ts type definitions as an ambient declaration.
[patch]d0db01b410:
TypeScript users of withAnalyticsEvents and withAnalyticsContext are now required to provide props as a generic type. This is so that TypeScript can correctly calculate the props and defaultProps of the returned component.
Before:
withAnalyticsEvents()(Button) as ComponentClass<Props>;
After:
withAnalyticsEvents<Props>()(Button);
[patch]b0ef06c685:
[major]8c65f23d32:
[major]7c17b35107:
[patch]98e11001ff:
[major]76299208e6:
As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only
distribute esm. This means all distributed code will be transpiled, but will still contain
import and export declarations.
The major reason for doing this is to allow us to support multiple entry points in packages, e.g:
import colors from `@atlaskit/theme/colors`;
Previously this was sort of possible for consumers by doing something like:
import colors from `@atlaskit/theme/dist/esm/colors`;
This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.
To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.
ES Modules are widely supported by all modern bundlers and can be worked around in node environments.
We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.
Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support (for external) if you have any questions or queries about this.
[major]1a09599:
New features in this release of @atlaskit/pagination