docs(TableExampleSortable): pass in null when that column isn't sorted

[jayphelps]

Docs demo were incorrect, this PR fixes them

// before
<Table.HeaderCell sorted={column === 'name' && direction} />
// after
<Table.HeaderCell sorted={column === 'name' ? direction : null} />

---

BELOW IS THE ORIGINAL POST WHICH IS NO LONGER APPLICABLE

Right now the <Table sortable /> demo in the docs uses this JSX logic:

<Table.HeaderCell sorted={column === 'name' && direction} />

This provides the value false when that column is not selected, however it actually causes a PropTypes validation error in React dev mode. It wasn't noticed because the demo site runs in production mode, where PropTypes are not checked.

https://jsfiddle.net/cq3tfzmf/

---

Because this pattern is indeed very useful, this PR adjusts the proptypes and TS to accept false as a valid option. useValueAndKey(false, 'sorted') seemingly correctly handles this case by ignoring it and not rendering false sorted, however the tests currently fail because it's not clear to me how to safely amend them.

I've tracked down the offending helper, classNamePropValueBeforePropName but I'm hesitant to change it ignore false values without knowing the reprecusions. Will need maintainer guidance, if this PR is otherwise acceptable.

---

Alternatives

The alternative I can think of is returning null|undefined which appears to work around it. We would then need to amend the docs to use this.

<Table.HeaderCell sorted={(column === 'name' && direction) || null} />

---

Commit message marked as a feature since the API docs themselves didn't ever claim this was supported, only the demo implied it was. If your interpretation is that this was a "bug", obv lmk and I'll change.

[levithomason]

I think if we did this, we should update all similar props to accept false. I think rather than mixing types for extra shorthand convenience here, I'd propose that we instead update the docs to ternary notation:

<Table.HeaderCell sorted={column === 'name' ? direction : null} />

My thinking is that we have several props which do take a string value or a boolean but they take both true and false and I wouldn't want to confuse the sorted prop which has no boolean alternative:

<Message icon>           // boolean prop
  <Icon name='info' />
</Message>

<Message icon='info' />  // shorthand value prop

I'm open to being convinced otherwise.

[jayphelps]

@levithomason I like the ternary solution. Silly that I didn't think of that. 👍 🎉 Will update my PR to just update the demo in the docs

[codecov-io]

Codecov Report

Merging #1737 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #1737   +/-   ##
=======================================
  Coverage   99.75%   99.75%           
=======================================
  Files         142      142           
  Lines        2468     2468           
=======================================
  Hits         2462     2462           
  Misses          6        6

---

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 dbc0bd0...52da53c. Read the comment docs.

[jayphelps]

@levithomason PR updated to just change the demo

[levithomason]

Thanks much, @jayphelps.