Statistic size Prop doesn't work inside Statistic.Group

[L3V147H4N]

<Statistic.Group widths="4">
  <Statistic size="mini" color="black" value={value} label="label" />
  <Statistic size="mini" color="red" value={value} label="label" />
  <Statistic size="mini" color="orange" value={value} label="label" />
  <Statistic size="mini" color="green" value={value} label="label" />
</Statistic.Group>

This should display 4 mini-sized statistics "in a row" but they are always regular size
Is there other way to specify the size?

[jeffcarbs]

Looks like there's a more specific rule on Statistic.Group (.ui.statistics) that's overriding the font-size:

Semantic-UI-React only concerns itself with React components that generate valid Semantic-UI markup. There is no HTML nor CSS code in this project. This may be an issue you can raise in the core Semantic-UI repo.

However, since in your case all of the statistics are the same size you can defined size='mini' on the StatisticGroup instead. NOTE This won't work in the current version because the size prop isn't yet handled on the group. I just opened a PR to add it (#972):

[schnubor]

Hi @jcarbo

Thanks for the PR! I'm running on 0.62.0 now but the size prop still isn't working for me. I use it like this:

<Statistic.Group items={stats} widths={stats.length} size="small" />

The "size" class (in this case small) isn't applied at all:

I also tried adding the size prop to my stats array, but still get the same result since the class is applied to the individual stats, but overwritten by the parent as already mentioned in this issue.

const stats = [
            {
                label : 'Failing',
                value : failedTestCount,
                color : 'grey',
                size  : 'small'
            },
            {
                label : statusText,
                value : percentage,
                color : statusColor,
                size  : 'small'
            },
            {
                label : 'Passing',
                value : passedTestCount,
                color : 'green',
                size  : 'small'
            }
]

Everything else except the size seems to be working.

Any ideas?

Cheers,
Christian

[levithomason]

@schnubor this has got to be something with the project. The docs, codepen, and tests show this is working. Here is an example:

http://codepen.io/levithomason/pen/dOKYXw

Not sure what could be going on in the project.

[schnubor]

Thanks @levithomason !