Skip to content

Commit b91cfe1

Browse files
committed
fix(ui-pagination): fix color of pageInput's label
Closes: INSTUI-4385 it was unset, so its color was derived from a parent, now its set to our default text color TEST PLAN: check the color in devtools
1 parent 7be2226 commit b91cfe1

File tree

3 files changed

+6
-3
lines changed

3 files changed

+6
-3
lines changed

packages/shared-types/src/ComponentThemeVariables.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -948,6 +948,7 @@ export type PagesTheme = {
948948
export type PaginationPageInputTheme = {
949949
inputSpacing: Spacing['xSmall']
950950
inputWidth: string
951+
labelColor: Colors['contrasts']['grey125125']
951952
}
952953

953954
export type PaginationTheme = {

packages/ui-pagination/src/Pagination/PaginationPageInput/styles.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@ const generateStyle = (
5252
inputLabel: {
5353
label: 'paginationPageInput__inputLabel',
5454
marginInlineStart: componentTheme.inputSpacing,
55-
whiteSpace: 'nowrap'
55+
whiteSpace: 'nowrap',
56+
color: componentTheme.labelColor
5657
}
5758
}
5859
}

packages/ui-pagination/src/Pagination/PaginationPageInput/theme.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,12 @@ import type { PaginationPageInputTheme } from '@instructure/shared-types'
3131
* @return {Object} The final theme object with the overrides and component variables
3232
*/
3333
const generateComponentTheme = (theme: Theme): PaginationPageInputTheme => {
34-
const { spacing } = theme
34+
const { spacing, colors } = theme
3535

3636
const componentVariables: PaginationPageInputTheme = {
3737
inputSpacing: spacing.xSmall,
38-
inputWidth: '4.5rem'
38+
inputWidth: '4.5rem',
39+
labelColor: colors?.contrasts?.grey125125
3940
}
4041

4142
return {

0 commit comments

Comments
 (0)