fix: use label as placeholder when there is no placeholder string set #36

[sun-mota]

Alaska Airlines Pull Request

Closes #36

Before Submitting this pull request:

• Link all tickets in this repository related to this PR in the Development section
  note: all pull requests require at least one linked ticket
• If this PR is Ready For Review, all ticket's linked under Development must have their status changed to Ready For Review as well

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license and I have performed a self-review of my own update.

Summary by Sourcery

Bug Fixes:

• Fixed an issue where the placeholder text was not displayed correctly when no placeholder string was set.

[sourcery-ai]

Reviewer's Guide by Sourcery

This PR changes the default placeholder for the auro-select component to an empty string. If a label is provided via the label slot, the label text will be used as the placeholder. If no placeholder is set and no label is provided, the placeholder will be empty.

Sequence diagram for updated placeholder behavior in auro-select

sequenceDiagram
    participant User
    participant AuroSelect
    participant Label
    participant Placeholder

    Note over AuroSelect: Initialize with empty placeholder
    User->>AuroSelect: Provide label via slot
    AuroSelect->>Label: handleLabelSlotChange()
    Label-->>AuroSelect: Return label text
    AuroSelect->>Placeholder: Use label as placeholder
    Note over Placeholder: Display label text as placeholder

    alt No label provided
        User->>AuroSelect: No label slot content
        AuroSelect->>Placeholder: Use empty placeholder
        Note over Placeholder: Display empty placeholder
    end

    alt Custom placeholder set
        User->>AuroSelect: Set placeholder property
        AuroSelect->>Placeholder: Use custom placeholder
        Note over Placeholder: Display custom placeholder text
    end

Loading

State diagram for auro-select placeholder states

stateDiagram-v2
    [*] --> EmptyPlaceholder: Initialize
    EmptyPlaceholder --> LabelAsPlaceholder: Label provided
    EmptyPlaceholder --> CustomPlaceholder: Placeholder set
    LabelAsPlaceholder --> CustomPlaceholder: Placeholder set
    CustomPlaceholder --> LabelAsPlaceholder: Placeholder cleared
    LabelAsPlaceholder --> EmptyPlaceholder: Label removed
    CustomPlaceholder --> EmptyPlaceholder: Placeholder cleared

    state EmptyPlaceholder {
        [*] --> ShowEmpty
    }
    state LabelAsPlaceholder {
        [*] --> ShowLabelText
    }
    state CustomPlaceholder {
        [*] --> ShowCustomText
    }

Loading

File-Level Changes

Change	Details	Files
Use label as placeholder	Added functionality to use the label text as a placeholder if no placeholder string is set. Added styles to hide the label if it is used as a placeholder and a value is selected. Updated the placeholder property default value to an empty string	components/select/src/auro-select.js components/select/src/styles/style.scss
Update API documentation	Updated the default value of the placeholder property in the API documentation to reflect the code change	components/select/demo/api.md components/select/docs/api.md

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time. You can also use
  this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @sun-mota - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider adding unit tests for the new handleLabelSlotChange functionality to ensure the label-as-placeholder behavior works correctly

Here's what I looked at during the review

• 🟡 General issues: 2 issues found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟡 Complexity: 1 issue found
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[jason-capsule42]

I am a little confused here. It looks like you are hiding the label when there is no placeholder and there is no value.

Shouldn't, like auro-input, we always show the elements label regardless of placehodler/value conditions?

[jason-capsule42]

I think this is problematic for two reasons.

You have a span that you have identified as "placeholder" but you are also conditionally putting non-placeholder content into it. That's an anti-pattern we should avoid.

Also, the label for form elements shouldn't change as it will notably impact the experience a voice over utility relies on.

I think you are safer having two different elements that you simply hide/show the one you need based on state.

[jason-capsule42]

Also, I think we should be keeping slot content out of properties.