feat(ui-number-input): rewrite NumberInput to the new theming system #2271

matyasf · 2025-11-27T21:11:08Z

Convert NumberInput to the new theming system. Notes:

Converted NumberInput from class-based to functional component
It uses the theme from TextInput, they are the same in Figma
The styling of the upper label/messages are not done, they are coming in FormFieldLayout

Tokens are also not fully used (because they are used only in TextInput):

fontSizeSm, heightSm, paddingHorizontalSm: This component has no small size
gapContent: This is a gap between the text and elements rendered after it, NumberInput does not have such

To test:

check the examples in the docs, they should function exactly as before
compare its CSS to the ones in Figma

matyasf · 2025-11-27T21:11:59Z

packages/emotion/src/styleUtils/calcFocusOutlineStyles.ts

      transition: 'outline-color 0.2s, outline-offset 0.25s'
    }),
    outlineOffset: '-0.8rem',
+    outlineStyle: 'solid',


This is a small fix for the focus outline not showing because CSS styles were reset by FormFieldLayout

packages/ui-number-input/src/NumberInput/index.tsx

matyasf · 2025-11-27T21:15:50Z

packages/ui-number-input/src/NumberInput/props.ts

+   * Not visible when `disabled` or `readonly`
   */
  placeholder?: string

  /**
   * Whether or not the text input is required.
   */
  isRequired?: boolean

  /**
   * Whether or not to display the up/down arrow buttons.
+   * They are not visible when `readonly`


these are visual changes requested by design

adamlobler

Looking good, I just left two minor comments related to the arrow icon colors. Other than that, the labels and message colors/sizes seem a bit strange, but I assume that will be handled in the formField component.

adamlobler · 2025-11-28T09:14:39Z

packages/ui-number-input/src/NumberInput/index.tsx

+            {customIcons?.increase ? (
+              callRenderProp(customIcons.increase)
+            ) : (
+              <IconArrowOpenUpLine />


We should define the icon colors here for each state, now it stays black in every theme and state.

I've fixed this, good catch

adamlobler · 2025-11-28T09:14:47Z

packages/ui-number-input/src/NumberInput/index.tsx

+            {customIcons?.decrease ? (
+              callRenderProp(customIcons.decrease)
+            ) : (
+              <IconArrowOpenDownLine />


We should define the icon colors here for each state, now it stays black in every theme and state.

I've fixed this, good catch

matyasf · 2025-11-28T16:54:03Z

packages/ui-number-input/src/NumberInput/index.tsx

+    const [upButtonState, setUpButtonState] = useState<ArrowButtonColors>(
+      'actionSecondaryBaseColor'
+    )
+    const [downButtonState, setDownButtonState] = useState<ArrowButtonColors>(
+      'actionSecondaryBaseColor'


This is quite an ugly way to handle the buttons state, but the original code had this as <button> and I did not want to change it. Its needed because the new design adds hover/down states to the icons

github-actions · 2025-11-28T20:47:48Z

PR Preview Action v1.6.3
🚀 View preview at https://instructure.design/pr-preview/pr-2271/
Built to branch `gh-pages` at 2025-12-01 21:20 UTC. Preview will be ready when the GitHub Pages deployment is complete.

matyasf · 2025-11-28T20:49:48Z

packages/__docs__/resolve.mjs

  ),
  '@instructure/ui-grid$': path.resolve(import.meta.dirname, '../ui-grid/src/'),
  '@instructure/ui-i18n$': path.resolve(import.meta.dirname, '../ui-i18n/src/'),
+  '@instructure/ui-icons-lucide': path.resolve(import.meta.dirname, '../ui-icons-lucide/src/'),


this fix recompiles + reloads docs when one changes something in this package

matyasf · 2025-11-28T20:50:13Z

packages/ui-icons-lucide/src/wrapLucideIcon/index.tsx

    return (
      <span css={styles?.lucideIcon} className={className} style={style}>
        <Icon
+          name={Icon.displayName}


some unit tests target these by the display name

adamlobler

Thanks for the modification to the arrows, it looks great! 🙌 I found 2 minor things in the showcase, but other than that its okay to merge from my side.

adamlobler · 2025-11-29T09:42:09Z

packages/ui-number-input/src/NumberInput/README.md

+    <NumberInput
+      renderLabel='has error'
+      placeholder="placeholder"
+      messages={[{ text: 'This is an error.', type: 'error' }]}


I’m not sure about this, but as far as I know, this error message is the legacy format that users shouldn’t use. If that’s true, then we should show the newError message here instead.

This is part of FormField and not this component, we will fix it there. (and AFAIK type: 'error will be the new error, and we'lll remove the old type error)

adamlobler · 2025-11-29T09:55:14Z

packages/ui-number-input/src/NumberInput/README.md

-  <NumberInput renderLabel="Default-size input" /><br/>
-  <NumberInput size="large" renderLabel="Large-size input" />
-</div>
+  <Flex gap='2rem' direction='column'>


The "gap" doesn't apply the raw value here for some reason, we should use gap='medium' instead.

good catch, fixed it

joyenjoyer

gj

- Converted `NumberInput` from class-based to functional component - It uses the theme from TextInput, they are the same in Figma - The styling of the upper label/messages are not done, they are coming in `FormFieldLayout` Tokens are also not fully used (they are used only in `TextInput`): - `fontSizeSm`, `heightSm`, `paddingHorizontalSm`: This component has no small size - `gapContent`: This is a gap between the text and elements rendered after it, `NumberInput` does not have such To test: - Check the examples in the docs, they should function exactly as before - Compare its CSS to the ones in Figma Completes INSTUI-4814

matyasf self-assigned this Nov 27, 2025

matyasf commented Nov 27, 2025

View reviewed changes

packages/ui-number-input/src/NumberInput/index.tsx Show resolved Hide resolved

matyasf commented Nov 27, 2025

View reviewed changes

matyasf requested review from adamlobler, git-nandor and joyenjoyer November 27, 2025 21:17

matyasf force-pushed the numberinput_rework branch 2 times, most recently from 7d22854 to 82c3075 Compare November 27, 2025 22:06

adamlobler reviewed Nov 28, 2025

View reviewed changes

matyasf force-pushed the numberinput_rework branch 3 times, most recently from 19d6593 to e85ac1b Compare November 28, 2025 16:45

matyasf requested a review from adamlobler November 28, 2025 16:46

matyasf commented Nov 28, 2025

View reviewed changes

matyasf force-pushed the numberinput_rework branch 2 times, most recently from d783b68 to 67c31f8 Compare November 28, 2025 20:43

matyasf commented Nov 28, 2025

View reviewed changes

adamlobler requested changes Nov 29, 2025

View reviewed changes

matyasf force-pushed the numberinput_rework branch from 67c31f8 to 9c7066c Compare December 1, 2025 08:54

matyasf requested a review from adamlobler December 1, 2025 08:56

git-nandor approved these changes Dec 1, 2025

View reviewed changes

joyenjoyer approved these changes Dec 1, 2025

View reviewed changes

matyasf force-pushed the numberinput_rework branch 2 times, most recently from 741fcb3 to 92082f5 Compare December 1, 2025 21:05

matyasf force-pushed the numberinput_rework branch from 92082f5 to fa66e5a Compare December 1, 2025 21:16

feat(ui-number-input): rewrite NumberInput to the new theming system #2271

Are you sure you want to change the base?

feat(ui-number-input): rewrite NumberInput to the new theming system #2271

Conversation

matyasf commented Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adamlobler left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

matyasf Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2025-12-01 21:20 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adamlobler left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joyenjoyer left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

matyasf commented Nov 27, 2025 •

edited

Loading

matyasf Nov 28, 2025 •

edited

Loading

github-actions bot commented Nov 28, 2025 •

edited

Loading

Built to branch `gh-pages` at 2025-12-01 21:20 UTC.
Preview will be ready when the GitHub Pages deployment is complete.