fix(Input): fix icon order to ensure rounded border is kept

[Intregrisist]

Fixes #2506

[welcome]

💖 Thanks for opening this pull request! 💖

Here is a list of things that will help get it across the finish line:

• Run yarn lint locally to catch formatting errors. This will fix some errors automatically, commit and push any changes.
• Run yarn test locally to catch errors. This ensures all components still behave as they should.
• Run yarn start to run the doc site locally and try a few pages, ensuring everything is in good working order.
• Include tests when adding/changing behavior.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

[codecov-io]

Codecov Report

❗ No coverage uploaded for pull request base (master@02af086). Click here to learn what that means.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             master    #2507   +/-   ##
=========================================
  Coverage          ?   99.74%           
=========================================
  Files             ?      154           
  Lines             ?     2712           
  Branches          ?        0           
=========================================
  Hits              ?     2705           
  Misses            ?        7           
  Partials          ?        0

Impacted Files	Coverage Δ
src/elements/Input/Input.js	100% <ø> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 02af086...39ec70b. Read the comment docs.

[ilyastam]

ship it!

[brianespinosa]

Thanks @Intregrisist!

Can you also add a test to this PR to make sure this order of elements is maintained?

I will take a look at this today and look through all of the other Input element examples and make sure this change does not break anything else.

[levithomason]

I would prefer a test that the render order is as it should be. However, a comment will do in this case. We use this convention when encountering gotchas like this:

// Heads up!
// A short comment about something very important.

Let's notify our future selves that SUI CSS requires the icon to be between these two elements.

[levithomason]

Whoops, sorry @brianespinosa! Didn't see your comment before I posted 😊 Obviously, I agree with you 👍

[Intregrisist]

Sorry, wasn't available to make the changes until now. @levithomason & @brianespinosa please see a28a0aa.

[levithomason]

Looking much better. There is technically an infinite number of places the icon should not be. Can we update the tests to assert where it should be instead of where it should not be? This will make for stronger tests.

[levithomason]

@Intregrisist ^

[stale]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[levithomason]

I've updated tests and merged master. This can be merged on pass.

[welcome]

Congrats on merging your first pull request! 🎉🎉🎉

[levithomason]

Released in semantic-ui-react@0.81.2.