feat(Dropdown): support additionLabel components

[jayphelps]

Dropdown now wraps additions in <b> tags and uses additionPosition="top" by default, just like the jQuery semantic-ui plugin.

There is also some more subtle changes to align with the jQuery version:

• default additionLabel is now "Add" without the semicolon, and includes the space between the label and the addition. This allows users to use labels which do not wish to have space between the two.
  • this overall API differs from the jQuery version which uses unsafe templates: addResult : 'Add <b>{term}</b>'. We could instead use callbacks, if even more alignment was preferred. addResult={term => <span>Add <b>{term}</b></span>
  • or of course, we could use templates too and use dangerouslySetInnerHTML 😨
• The addition item now has the addition className added to it--this can be important for themes

You will notice that, because of a React limitation/design I am passing text as an array of elements. Because of the current way the React diffing algorithm works, even though these elements will always be in the same order we must define a key for them. This isn't pretty--but at least for me, having the same styling behavior of the wrapped <b> is critical to UX.

---

This was my first experience with enzyme/chai-enzyme so lmk if there is a better way to write the prop tests that contain the array of elements. It's not ideal 😞

[codecov-io]

Current coverage is 99.48% (diff: 100%)

Merging #757 into master will decrease coverage by <.01%

@@             master       #757   diff @@
==========================================
  Files           136        134     -2   
  Lines          2183       2154    -29   
  Methods           0          0          
  Messages          0          0          
  Branches          0          0          
==========================================
- Hits           2172       2143    -29   
  Misses           11         11          
  Partials          0          0          

Powered by Codecov. Last update 0b93783...88911a5

[levithomason]

This is awesome, thanks! Would you consider adding an example showing use of a custom additionLabel?

[jayphelps]

@levithomason to docs/app/Examples/modules/Dropdown/Usage ?

something like this?

render() {
  // etc

  <Dropdown
    additionLabel="Custom: "
    {...etc}
  />

  // etc

  <Dropdown
    additionLabel={<i>Custom: </i>}
    {...etc}
  />
}

[levithomason]

Exactly. Two separate example files would be superb. One showing a text label, and a separate one showing a component example.

[jayphelps]

Added requested examples. 🎉

[jayphelps]

Note: I forgot to mention that this is technically a breaking change and I have added such in the commit message for commitizen

BREAKING CHANGE: Dropdown now now wraps additions in and uses
additionPosition="top" by default

[levithomason]

This looks great! Just one lint issue to fix that is failing CI:

[jayphelps]

doh! fixed. I incorrectly assumed it would lint as part of the test runner. Might be helpful to create a pre-commit hook that lints the code.

[levithomason]

We used a few pre-commit hooks solutions but found them to be problematic. We just rely on the PR status. Though, this obviously needs be a little more clear to developers! Thanks for the feedback.

[levithomason]

Could you clarify something regarding the breaking change? I'd like to release this as a feature rather than an API change. My understanding:

• The exposed API hasn't change
• The previous additionLabel accepted plain text only
• The default additionPosition changed
• The additionLabel is now bold

My conclusion based on ^ these points is that old additionLabel code will still work, it will just be bold and default to the top of the Dropdown. I see this as a non-breaking feature. What are your thoughts?

[levithomason]

I'm actually going to release this as a feature and we can adjust if there are issues 👍

[jayphelps]

@levithomason okiedokie

[levithomason]

Released in semantic-ui-react@0.58.1