Skip to content

Update Select for SLDS2 #468

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: support-slds-2
Choose a base branch
from

Conversation

msmx-mnakagawa
Copy link
Collaborator

@msmx-mnakagawa msmx-mnakagawa commented May 30, 2025

What I did

  • pass id as controlId
  • insert .slds-select_container inside the FormElement

Reference

https://v1.lightningdesignsystem.com/components/select/

@msmx-mnakagawa msmx-mnakagawa self-assigned this May 30, 2025
Copy link

reg-suit bot commented May 30, 2025

reg-suit detected visual differences.

Check this report, and review them.

🔴🔴🔴🔴🔴🔴🔴🔴

🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵

What do the circles mean? The number of circles represent the number of changed images.
🔴 : Changed items, ⚪ : New items, ⚫ : Deleted items, and 🔵 Passed items

How can I change the check status? If reviewers approve this PR, the reg context status will be green automatically.

@msmx-mnakagawa msmx-mnakagawa force-pushed the support-slds-2-select branch from 9f261af to 3b03dcc Compare May 30, 2025 03:48
@msmx-mnakagawa msmx-mnakagawa requested a review from Copilot May 30, 2025 03:52
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR updates the Select component to align with SLDS2 guidelines by passing id as htmlFor and inserting the .slds-select_container wrapper for single-select elements.

  • Switched FormElement prop from id to htmlFor
  • Wrapped non-multiple <select> in a <div className='slds-select_container'>
Comments suppressed due to low confidence (1)

src/scripts/Select.tsx:81

  • Consider adding or updating unit tests to cover both rendering paths (with .slds-select_container for single-select and the direct <select> for multiple).
<div className='slds-select_container'>{selectElem}</div>

};
return (
<FormElement {...formElemProps}>
{rprops.multiple ? (
Copy link
Preview

Copilot AI May 30, 2025

Choose a reason for hiding this comment

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

[nitpick] Destructuring multiple from props (e.g., const { multiple } = props) and using it directly can improve readability instead of rprops.multiple.

Suggested change
{rprops.multiple ? (
{multiple ? (

Copilot uses AI. Check for mistakes.

@msmx-mnakagawa msmx-mnakagawa requested a review from stomita May 30, 2025 03:54
@msmx-mnakagawa msmx-mnakagawa mentioned this pull request Jun 5, 2025
42 tasks
@msmx-mnakagawa msmx-mnakagawa force-pushed the support-slds-2-select branch from 3b03dcc to da98ae1 Compare June 13, 2025 04:10
@msmx-mnakagawa msmx-mnakagawa changed the base branch from support-slds-2-form-element-field-set to support-slds-2 June 13, 2025 04:10
@msmx-mnakagawa msmx-mnakagawa marked this pull request as ready for review June 13, 2025 04:16
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.

1 participant