Rename plural group components (Fields) -> Group

[dvdzkwsk]

We would like to nest groupings under the component (as static properties), so that:

import { Form } from 'stardust'

// old
<Form.Field>
<Form.Fields>

// new
<Form.Field>
<Form.Field.Group>

This changes the naming of Fields -> Group since it is standardized across all components and is more intuitive overall.

Todo

@levithomason added by edit on Jul 11, 2016

• feat(Form): update to v1 API #400 Fields
• feat(Button): support all features, update to v1 API #295 Buttons
• Icon Component updated to v1 API (bad merge) #279 Icons
• Segment: update to v1 API #287 Segments
• Item: Update to v1 API #431 Items
• Update Statistic to v1 API #334 Statistics

[jhchill666]

If standardising across groupable components, should Group be component agnostic?

[levithomason]

Could you give an example @jamiehill?

[jhchill666]

@davezuko suggested in the inital comment that "group is standardized across all components", and as such I wondered whether a generic Group Class was what he was thinking, or just a standardised api for such grouped components

[levithomason]

Initially, this would just be a standardized API. This issue was partly raised as we've decided to first build out our components with a sub-component approach. Example, <Dropdown />, <Dropdown.Item />, etc. This allows us to handle the special use case of an Item in a Dropdown, which is quite different than many other Items. This means the "group" components look like this: <Button.Buttons />.

Consider a group of buttons. In SUI we need a div with class buttons that wraps a set of ui button elements:

<div class="ui buttons">
  <button class="ui button">One</button>
  <button class="ui button">Two</button>
  <button class="ui button">Three</button>
</div>

We currently handle this pattern in Stardust like this:

import { Buttons, Button } from 'stardust'

const group = (
  <Buttons>
    <Button>One</Button>
    <Button>Two</Button>
    <Button>Three</Button>
  </Buttons>
)

Every component that can be grouped (which is most) has a component with the plural form of the name for grouping. Button / Buttons, Statistic / Statistics, etc. This issue is proposing that we do two things:

1. Move group components to sub components: <Button.Buttons />, <Statistic.Statistics />
2. Rename all group components to "Group": <Button.Group />, <Statistic.Group />

The above would then become:

import { Button } from 'stardust'

const group = (
  <Button.Group>
    <Button>One</Button>
    <Button>Two</Button>
    <Button>Three</Button>
  </Button.Group>
)

[jhchill666]

That was exactly my query. I've been looking through enhancement/request for help list, but was unsure where a good starting point might be. I initially thought the first on the list Rename plural group components (Fields) -> Group was the way to go, but seems more complex than first thought.

[levithomason]

This might be a good area to hit, but I think we need to update all the components to the v1 API first. Right now, many components still use className for all styling and behavior. Our v1 API is more declarative and was decided in #208. You can see it at play in the Label and Dropdown components.

I'd like to update all the old components to use this new API as our next step. I'll get a doc together on how to do this soon. I'll also create issues for upgrading the old components. If you'd like to update some of the other components, use the Label component for reference.

[jhchill666]

Any suggestion of a good one to get started with, to get me upto speed?

[levithomason]

The Divider element is a pretty minimal component. That might be a good start. The docs are already in place for the Divider as well, so you'll have something to reference as you develop the API. You'll be looking to update src/elements/Divider/Divider.js and update docs at docs/app/Examples/elements/Divider. I've added #262 for this, let's move further convo over there.

I'll also rework one of the old component APIs and write a doc as I go. This should help clear things up as well.

[levithomason]

Just shipped buttons #295, that's a wrap!