Group

Description

Group is a component to group items with padding using css flexbox.

See live demos on storybook

Storybook Group Demos

Install from Artifactory

• Verify that you have access to (https://docs.int.bayer.com/cloud/devops/artifactory/)[Bayer Artifactory]
  • Verify your token is correctly set up in your .npmrc as per the link above
• Verify you have the @element scope configured in your .npmrc
  • @element:registry=https://artifactory.bayer.com/artifactory/api/npm/npm-platforms-engineering/
• Install the component and themes bundles
  • npm i @element/react-components @element/themes
    • alternatively install the component individually along with the themes bundle npm i @element/react-group @element/themes

Notes

Group allows users to organize multiple components and treat them as a single unit. Doing so ensures that the components will be arranged in a certain way, with uniform spacing between them, and be treated as a single item.

Usage

Groups are typically used to combine smaller components. A common use case for Group is to create a Group of Textfields. An example of this could be in creating a fixed, evenly spaced form where a user is to fill in data in several inputs (ie. first name, last name, job title).

Group Props

| Name | Type | Default | Required | Description | | -------------- | ------- | ------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | direction | string | 'horizontal' | false | The grouping direction.Accepted Values: horizontal, vertical, horizontal-reverse, vertical-reverse | | fullWidth | boolean | false | false | Sets the Group width to be 100%. | | gap | string | 'standard' | false | How much spacing between items. Dense is 8p, standard is 16px and airy is 24px.Accepted Values: dense, standard, airy, none | | primaryAlign | string | 'start' | false | Alignment along the primary axis. 'For horizontal grouping this means the x-axis positioning, for vertical, this means the y-axis positioning.Equivalent to flexbox 'justify-content.Accepted Values: start, end, center, space-evenly, space-between, space-around | | secondaryAlign | string | 'baseline' | false | Alignment along the secondary axis. For horizontal grouping this means the y-axis positioning, for vertical, this means the x-axis positioning.Equivalent to flexbox 'align-items.Accepted Values: start, end, center, stretch, baseline | | style | object | undefined | false | Styles for the grid. |

Group Deprecated Props

| Name | Type | Default | Required | Deprecated | Description | | ------- | ------ | --------- | -------- | ---------------------------------------- | ------------------------------------------------------------------------------- | | padding | string | undefined | false | Renamed for improved clarity. See gap. | How much spacing between items. Dense is 8p, standard is 16px and airy is 24px. |

Group Render Props

| Name | Type | Default | Required | Description | | -------- | --------------- | ------- | -------- | ----------------------------------------------------------------------- | | children | React.ReactNode | null | false | Children to be rendered. Expects multiple components of a similar type. |