@instructure/ui-pagination 10.15.0 → 10.15.1-snapshot-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/es/Pagination/index.js +2 -1
  3. package/es/Pagination/styles.js +3 -1
  4. package/lib/Pagination/index.js +2 -1
  5. package/lib/Pagination/styles.js +3 -1
  6. package/package.json +21 -21
  7. package/src/Pagination/index.tsx +2 -1
  8. package/src/Pagination/props.ts +3 -3
  9. package/src/Pagination/styles.ts +3 -1
  10. package/tsconfig.build.tsbuildinfo +1 -1
  11. package/types/Pagination/index.d.ts +1 -0
  12. package/types/Pagination/index.d.ts.map +1 -1
  13. package/types/Pagination/props.d.ts +3 -3
  14. package/types/Pagination/styles.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [10.15.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.15.0...v10.15.1-snapshot-1) (2025-04-02)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **ui-pagination:** make Pagination wrap on smaller screen sizes and prevent scrollbars ([75e1540](https://github.com/instructure/instructure-ui/commit/75e154062530c141a380624f4590b517d8b9e691))
12
+
13
+
14
+
15
+
16
+
6
17
  # [10.15.0](https://github.com/instructure/instructure-ui/compare/v10.14.0...v10.15.0) (2025-03-31)
7
18
 
8
19
  **Note:** Version bump only for package @instructure/ui-pagination
package/es/Pagination/index.js CHANGED
@@ -443,7 +443,8 @@ let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
443
443
  siblingCount: 1,
444
444
  boundaryCount: 1,
445
445
  ellipsis: '…',
446
- renderPageIndicator: page => page
446
+ renderPageIndicator: page => page,
447
+ margin: 'space8'
447
448
  }, _Pagination.Page = PaginationButton, _Pagination.Navigation = PaginationArrowButton, _Pagination)) || _class) || _class) || _class);
448
449
  export default Pagination;
449
450
  export { Pagination, PaginationButton };
package/es/Pagination/styles.js CHANGED
@@ -38,7 +38,9 @@ const generateStyle = componentTheme => {
38
38
  all: 'unset',
39
39
  display: 'flex',
40
40
  alignItems: 'center',
41
- gap: componentTheme.pageIndicatorGap
41
+ gap: componentTheme.pageIndicatorGap,
42
+ flexWrap: 'wrap',
43
+ justifyContent: 'center'
42
44
  },
43
45
  pagination: {
44
46
  label: 'pagination',
package/lib/Pagination/index.js CHANGED
@@ -460,6 +460,7 @@ let Pagination = exports.Pagination = (_dec = (0, _withDeterministicId.withDeter
460
460
  siblingCount: 1,
461
461
  boundaryCount: 1,
462
462
  ellipsis: '…',
463
- renderPageIndicator: page => page
463
+ renderPageIndicator: page => page,
464
+ margin: 'space8'
464
465
  }, _Pagination.Page = _PaginationButton.PaginationButton, _Pagination.Navigation = _PaginationArrowButton.PaginationArrowButton, _Pagination)) || _class) || _class) || _class);
465
466
  var _default = exports.default = Pagination;
package/lib/Pagination/styles.js CHANGED
@@ -44,7 +44,9 @@ const generateStyle = componentTheme => {
44
44
  all: 'unset',
45
45
  display: 'flex',
46
46
  alignItems: 'center',
47
- gap: componentTheme.pageIndicatorGap
47
+ gap: componentTheme.pageIndicatorGap,
48
+ flexWrap: 'wrap',
49
+ justifyContent: 'center'
48
50
  },
49
51
  pagination: {
50
52
  label: 'pagination',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-pagination",
3
- "version": "10.15.0",
3
+ "version": "10.15.1-snapshot-1",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,9 +23,9 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.15.0",
27
- "@instructure/ui-babel-preset": "10.15.0",
28
- "@instructure/ui-test-utils": "10.15.0",
26
+ "@instructure/ui-axe-check": "10.15.1-snapshot-1",
27
+ "@instructure/ui-babel-preset": "10.15.1-snapshot-1",
28
+ "@instructure/ui-test-utils": "10.15.1-snapshot-1",
29
29
  "@testing-library/jest-dom": "^6.6.3",
30
30
  "@testing-library/react": "^16.0.1",
31
31
  "@testing-library/user-event": "^14.5.2",
@@ -33,23 +33,23 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@babel/runtime": "^7.26.0",
36
- "@instructure/emotion": "10.15.0",
37
- "@instructure/shared-types": "10.15.0",
38
- "@instructure/ui-a11y-content": "10.15.0",
39
- "@instructure/ui-a11y-utils": "10.15.0",
40
- "@instructure/ui-buttons": "10.15.0",
41
- "@instructure/ui-dom-utils": "10.15.0",
42
- "@instructure/ui-icons": "10.15.0",
43
- "@instructure/ui-number-input": "10.15.0",
44
- "@instructure/ui-portal": "10.15.0",
45
- "@instructure/ui-prop-types": "10.15.0",
46
- "@instructure/ui-react-utils": "10.15.0",
47
- "@instructure/ui-testable": "10.15.0",
48
- "@instructure/ui-themes": "10.15.0",
49
- "@instructure/ui-tooltip": "10.15.0",
50
- "@instructure/ui-utils": "10.15.0",
51
- "@instructure/ui-view": "10.15.0",
52
- "@instructure/uid": "10.15.0",
36
+ "@instructure/emotion": "10.15.1-snapshot-1",
37
+ "@instructure/shared-types": "10.15.1-snapshot-1",
38
+ "@instructure/ui-a11y-content": "10.15.1-snapshot-1",
39
+ "@instructure/ui-a11y-utils": "10.15.1-snapshot-1",
40
+ "@instructure/ui-buttons": "10.15.1-snapshot-1",
41
+ "@instructure/ui-dom-utils": "10.15.1-snapshot-1",
42
+ "@instructure/ui-icons": "10.15.1-snapshot-1",
43
+ "@instructure/ui-number-input": "10.15.1-snapshot-1",
44
+ "@instructure/ui-portal": "10.15.1-snapshot-1",
45
+ "@instructure/ui-prop-types": "10.15.1-snapshot-1",
46
+ "@instructure/ui-react-utils": "10.15.1-snapshot-1",
47
+ "@instructure/ui-testable": "10.15.1-snapshot-1",
48
+ "@instructure/ui-themes": "10.15.1-snapshot-1",
49
+ "@instructure/ui-tooltip": "10.15.1-snapshot-1",
50
+ "@instructure/ui-utils": "10.15.1-snapshot-1",
51
+ "@instructure/ui-view": "10.15.1-snapshot-1",
52
+ "@instructure/uid": "10.15.1-snapshot-1",
53
53
  "prop-types": "^15.8.1"
54
54
  },
55
55
  "peerDependencies": {
package/src/Pagination/index.tsx CHANGED
@@ -105,7 +105,8 @@ class Pagination extends Component<PaginationProps> {
105
105
  siblingCount: 1,
106
106
  boundaryCount: 1,
107
107
  ellipsis: '…',
108
- renderPageIndicator: (page: number) => page
108
+ renderPageIndicator: (page: number) => page,
109
+ margin: 'space8'
109
110
  }
110
111
 
111
112
  static Page = PaginationButton
package/src/Pagination/props.ts CHANGED
@@ -118,9 +118,9 @@ type PaginationOwnProps = {
118
118
  variant?: 'full' | 'compact' | 'input'
119
119
 
120
120
  /**
121
- * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
122
- * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
123
- * familiar CSS-like shorthand. For example: `margin="small auto large"`.
121
+ * Spacing token values can be found here: [Spacing Tokens](https://instructure.design/#layout-spacing/%23Tokens)
122
+ *
123
+ * Apply these values via familiar CSS-like shorthand. For example: `margin="space8 0 space12"`.
124
124
  */
125
125
  margin?: Spacing
126
126
 
package/src/Pagination/styles.ts CHANGED
@@ -41,7 +41,9 @@ const generateStyle = (componentTheme: PaginationTheme): PaginationStyle => {
41
41
  all: 'unset',
42
42
  display: 'flex',
43
43
  alignItems: 'center',
44
- gap: componentTheme.pageIndicatorGap
44
+ gap: componentTheme.pageIndicatorGap,
45
+ flexWrap: 'wrap',
46
+ justifyContent: 'center'
45
47
  },
46
48
  pagination: {
47
49
  label: 'pagination',