Skip to content

feat(ui-options,ui-select,ui-simple-select,ui-time-select): rework Select, SimpleSelect and TimeSelect#2465

Open
ToMESSKa wants to merge 1 commit intomasterfrom
INSTUI-4807-select-rework-multi
Open

feat(ui-options,ui-select,ui-simple-select,ui-time-select): rework Select, SimpleSelect and TimeSelect#2465
ToMESSKa wants to merge 1 commit intomasterfrom
INSTUI-4807-select-rework-multi

Conversation

@ToMESSKa
Copy link
Contributor

@ToMESSKa ToMESSKa commented Mar 17, 2026

INSTUI-4807

ISSUE:

  • Select, SimpleSelect, TimeSelect needs to be migrated to the new theming system

TEST PLAN:

for Select, SimpleSelect, TimeSelect:

  • check if the component works the same as before in v1
  • check if the components and the examples work in v2 (especially the dark theme)
  • check if all necessary the imports are renamed to latest in v2
  • check if the test files are removed from the v1
  • check if the right imports are used in exports/b.ts and exports/a.ts
  • check if the package.json uses the correct versioning
  • check if the renamed or removed tokes are documented in the upgrade guide
  • check if the index.ts files use withStyle instead of withStyleLegacy
  • check if the v2 component uses all the tokens

@ToMESSKa ToMESSKa self-assigned this Mar 17, 2026
Comment on lines 73 to +74
background: componentTheme.selectedHighlightedBackground,
color: componentTheme.highlightedLabelColor
color: componentTheme.selectedLabelColor
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This worked in the two old canvas themes, but in the new light theme, the label would be black on a dark background (bad visibility) and in the new dark theme it would be white on a white background (bad visibilty). So I changed this. You can check this on the first example of in Select.

@github-actions
Copy link

github-actions bot commented Mar 17, 2026

PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://instructure.design/pr-preview/pr-2465/

Built to branch gh-pages at 2026-03-19 08:25 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@ToMESSKa ToMESSKa requested review from balzss, hajnaldo and matyasf March 17, 2026 14:20
@ToMESSKa ToMESSKa force-pushed the INSTUI-4807-select-rework-multi branch from 1e24d97 to 7f09718 Compare March 18, 2026 12:09
@ToMESSKa ToMESSKa removed request for balzss and matyasf March 18, 2026 12:27
…lect, SimpleSelect and TimeSelect

INSTUI-4807
@ToMESSKa ToMESSKa force-pushed the INSTUI-4807-select-rework-multi branch from 878d061 to 21862c2 Compare March 19, 2026 08:18
@ToMESSKa ToMESSKa changed the title feat(ui-options,ui-select): rework Select feat(ui-options,ui-select,ui-simple-select,ui-time-select): rework Select, SimpleSelect and TimeSelect Mar 19, 2026
@ToMESSKa ToMESSKa requested review from balzss and matyasf March 19, 2026 08:58
Copy link
Contributor

@balzss balzss left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 smaller things that i've noticed:

  • with the new light theme, the select looks a bit too dark, i've already pinged @hajnaldo about this, she will look into this
  • the SimpleSelect Controlled example features a scrollbar and the corners doesn't follow the border radius correctly. this might be the same issue as #2473 or very similar. can you please rebase once it's merged to see if that solves it and if it isn't, try to maybe adopt that solution for the select?

Copy link
Collaborator

@matyasf matyasf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a couple of import issues


import { InputHTMLAttributes } from 'react'

import type { FormMessage } from '@instructure/ui-form-field/v11_6'
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this needs to be /latest


import { InputHTMLAttributes } from 'react'

import type { FormMessage } from '@instructure/ui-form-field/v11_6'
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this needs to be /latest

PositionConstraint,
PositionMountNode
} from '@instructure/ui-position'
import type { SelectOwnProps } from '@instructure/ui-select/v11_6'
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this needs to be /latest

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants