fix: TableRowCell style to make it work on IE11

[vicchirino]

Objective

On IE11 the content of the TableRowCell is not center aligned.
Add style necessary to make content be centered.

Context

We have a layout issue on Performance when displaying the Table component on IE11.
The style behind the TableRowCell is:

.rowCell {
  min-height: $row-height;
  padding: 0 $ca-grid * 0.8;
  display: flex;
  align-items: center;
}

making the content of the row look like this (lightCoral background is the content)

Investigating a little bit seems that IE11 don't like flex more specific the combination of align-items: center and min-height: xxx
• https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie
• philipwalton/flexbugs#231

Changes

Add an :after with min-height: inherit; as workaround.

Notes

Tried the other workaround that found: Set a fixed height less than min-height this was making row cell don't expand on multiline table. 👎

Was getting issues trying to run storybook locally on IE11 and also trying to link kaizen with performance-ui so to test this i updated the code locally on perform and run it on IE11 to be sure fix is working.
Unfortunately couldn't test the storybook on IE11 =[

Like i said, this is a workaround, not sure if is the best solution.

Slack conversations: https://cultureamp.slack.com/archives/CETLTFG9G/p1577132688040100

[mbylstra]

I merged master to get the latest Storybook IE11 fix

[vicchirino]

Will close this PR since the problem was on the content that the table row was displaying not the table itself!