feat: Refactor Pagination component to use our styling API #3300
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Workday/canvas-kit
|
||||||||||||||||||||||||||||||||||||||||
| Project |
Workday/canvas-kit
|
| Branch Review |
ISSUE3267-pagination-restyling
|
| Run status |
|
| Run duration | 02m 48s |
| Commit |
|
| Committer | Raisa Primerova |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
1
|
Pending
|
21
|
Skipped
|
0
|
Passing
|
936
|
| View all changes introduced in this branch ↗︎ | |
UI Coverage
21.27%
|
|
|---|---|
|
Untested elements
|
1530
|
|
Tested elements
|
411
|
Accessibility
99.29%
|
|
|---|---|
|
Failed rules
|
6 critical
5 serious
0 moderate
2 minor
|
|
Failed elements
|
97
|
…ayRedGoose/canvas-kit into ISSUE3267-pagination-restyling
mannycarrera4
changed the title
mannycarrera4
changed the title
There was a problem hiding this comment.
Pull Request Overview
Refactors the Pagination component and its subcomponents to replace styled/Flex usage with the new createStencil and mergeStyles styling API, while preserving the existing React interface and behavior.
- Replaced
@workday/canvas-kit-react/commonstyled components and@workday/canvas-kit-react/layoutFlexwrappers withcreateStencil+mergeStyles - Updated token imports to use
@workday/canvas-tokens-weband removed Emotion-based styling - Added stencil definitions for all structural elements and updated the upgrade guide to reference the preview release
Reviewed Changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| common/List.tsx | Converted styled Flex to a stencil + mergeStyles on <ul> and <li> |
| Pagination/Pagination.tsx | Replaced inline Flex nav container with stencil + mergeStyles |
| Pagination/PageList.tsx | Switched Flex as="ol" to stencil + mergeStyles |
| Pagination/PageButton.tsx | Replaced styled(BaseButton) with stencil + handleCsProp |
| Pagination/Nav.tsx | Converted standalone nav to stencil + mergeStyles |
| Pagination/GoTo/TextInput.tsx | Added stencil for sizing and wired through handleCsProp |
| Pagination/GoTo/Label.tsx | Moved whiteSpace into a stencil via handleCsProp |
| Pagination/GoTo/Form.tsx | Replaced Flex form wrapper with stencil + mergeStyles |
| Pagination/Controls.tsx | Converted Flex controls wrapper to stencil + mergeStyles |
| Pagination/AdditionalDetails.tsx | Replaced styled Flex and tokens with stencil + mergeStyles |
| docs/mdx/14.0-UPGRADE-GUIDE.mdx | Added Pagination to the upgrade guide list |
Comments suppressed due to low confidence (1)
modules/react/pagination/lib/Pagination/common/List.tsx:8
- [nitpick] The stencil name
paginationListItemStencilis misleading since it applies to the<ul>(the list) rather than a list item. Consider renaming topaginationListStencilfor clarity.
export const paginationListItemStencil = createStencil({
| @@ -11,6 +12,12 @@ export interface GoToLabelProps { | |||
| children?: (model: PaginationModel) => React.ReactNode | React.ReactNode; | |||
| } | |||
|
|
|||
| export const paginationGoToLabelStencil = createStencil({ | |||
There was a problem hiding this comment.
NB: Does SubText have a stencil? Do we want to extend it?
There was a problem hiding this comment.
I don't think it's necessary, It used component and component already has that stencil styles
| @@ -10,11 +11,25 @@ export type GoToTextInputProps = TextInputProps & { | |||
| value?: string | number; | |||
| }; | |||
|
|
|||
| export const paginationGoToTextInputStencil = createStencil({ | |||
There was a problem hiding this comment.
Same here, since this renders a TextInput, do we want to extend text input stencil?
mannycarrera4
approved these changes
May 22, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Fixes: #3267
Paginationcomponent has been refactored to use our new tokens and styling utilities. The React interface has not changed, but CSS variables are now used for dynamic properties.Release Category
Components
Release Note
Paginationcomponent has been refactored to use our new tokens and styling utilities. The React interface has not changed, but CSS variables are now used for dynamic properties.Checklist
ready for reviewhas been added to PRFor the Reviewer
Where Should the Reviewer Start?
Areas for Feedback? (optional)
Testing Manually
Screenshots or GIFs (if applicable)
Thank You Gif (optional)