v6: support two adorn on both start and end side

Open
#43,312 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
55/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
css, javascript, scss
Domain
design, frontend

Research direction

Read the Bootstrap v6 form adorn documentation and locate the styles and examples for form-adorn, form-adorn-text, and form-ghost. Check how the existing start and end adorn variants are styled and tested, then identify how an example with both sides should behave. Done means the documented component supports the https:// prefix and .wordpress.com suffix together and its relevant tests pass.

Written by the indexing model from the issue text.

Description

docs feature v6
Prerequisites
Proposal

start adorn and end adorn can co-exist:

<label class="form-control form-adorn">
  <span class="form-adorn-text" aria-hidden="true">https://</span>
  <input type="text" class="form-ghost" placeholder="username">
  <span class="form-adorn-text" aria-hidden="true">.wordpress.com</span>
</label>
Motivation and context

Let's say, a website support user subdomain, like https://username.wordpress.com

I would like to have start adorn https:// and end adorn .wordpress.com for the subdomain input. However, current v6 adorn only accept either start or end adorn, not both.

Dominant language
MDX
Stars
175k
Forks
78.7k
Avg merge
1d 7h
Merged PRs (30d)
103

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from twbs/bootstrap

All issues in twbs/bootstrap

Similar issues

More Design issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.