import { Cell } from '@uhg-abyss/mobile';() => { return ( <Cell eyebrow="eyebrow" heading="Cell Heading" subheading="Subheading" paragraph="Paragraph content here" /> );};Leading Content
The leadingContent prop defines the cell's content on the left-hand side. This may contain the IconBrand component, a utility icon (IconSymbol), or an Avatar.
Main Content
The eyebrow prop defines the cell's eyebrow. This prop can either be text or a custom component such as Badge.
The heading prop defines the cell's heading.
The subheading prop defines the cell's subheading.
The paragraph prop defines the cell's paragraph.
The trailingIcon prop places an icon at the end of the heading. This will not show unless there is also a defined heading prop. When this icon is present, only the icon is pressable, not the entire cell.
A link can be displayed below the paragraph using the link prop. A link may also be passed to the value prop to be displayed on the right side of the cell.
Trailing Content
The value prop defines the value component on the right side of the cell. This is generally used to display a numerical value but can also display the Link component.
If the value prop exists, the cell cannot contain an onPress function.
The indicator prop defines the indicator component on the right side of the cell. Unlike value, this prop can co-exist with an onPress function. Either a string or a custom Component can be passed here.
When a link prop is present inside the cell, the cell itself is not pressable. The link element handles its own tap interaction independently. The indicator prop can still co-exist with link, but onPress will not fire on the cell row.
The navIcon prop defines the icon that appears on the far right side of the cell. This icon will only exist when an onPress function exists.
isDisabled
isDisabled is a prop available for type radio, checkbox, and toggle.
When isDisabled is present in CellGroup, the entire group is disabled and cannot be modified. However, if isDisabled is present in Cell, only that cell is disabled and cannot be modified.
Cell Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
eyebrow | string | number | React.JSX.Element | undefined | - | - | The eyebrow of the cell. Can also be a Badge |
heading | string | undefined | - | - | The heading of the cell |
indicator | string | React.ReactNode | undefined | - | - | The element placed on the right of the cell |
isDisabled | boolean | undefined | false | - | Disabled the cell |
leadingContent | React.ReactNode | undefined | - | - | The leading content may contain the IconBrand component, a utility icon, or an Avatar |
link | React.JSX.Element | undefined | - | - | The link of the cell |
navIcon | React.ReactNode | undefined | ''chevron_right' IconSymbol' | - | The navigation icon placed on the right of the cell, uses onPress event. |
onChange | (value: boolean) => void | undefined | - | - | Callback fired when the cell value is changed. Only applies to the toggle cell type. |
onPress | Abyss.GestureResponderEventHandler | - | - | The onPress event of the cell |
onPressIn | Abyss.GestureResponderEventHandler | - | - | The onPressIn event of the cell |
onPressOut | Abyss.GestureResponderEventHandler | - | - | The onPressOut event of the cell |
paragraph | string | undefined | - | - | The paragraph of the cell |
selectAll | boolean | undefined | - | - | The Select All checkbox cell |
subheading | string | undefined | - | - | The subheading of the cell |
trailingIcon | React.ReactNode | undefined | - | - | The icon placed next to the heading text |
type | 'default' | 'radio' | 'toggle' | 'checkbox' | undefined | 'default' | - | The type of cell |
value | any | undefined | - | - | The value of the cell defining defaults for toggle, radio, and checkbox. It can also be used to define value shown on the right side of an un-pressable cell |
Cell Classes
| Class Name | Description |
|---|---|
| abyss-cell-root | Cell root |
| abyss-cell-leading-content | The leading content. Can include IconBrand component, a utility icon, or an Avatar |
| abyss-cell-content-wrapper | The content wrapper of the cell |
| abyss-cell-eyebrow | Cell eyebrow |
| abyss-cell-heading | Cell heading |
| abyss-cell-subheading | Cell subheading |
| abyss-cell-paragraph | Cell paragraph |
| abyss-cell-value | Cell value |
| abyss-cell-radio-button | Radio component |
| abyss-cell-checkbox-button | Checkbox component |
| abyss-cell-toggle-button | ToggleSwitch component |
| abyss-cell-indicator | Cell indicator |
| abyss-cell-nav-icon | onPress icon to the far right of cell |
| abyss-cell-trailing-icon | The icon placed at the end of the heading |
| abyss-cell-icon-button | The icon button at the end of the heading |
It is the responsibility of consuming teams to make sure all components within Cell are accessible.
When possible, please test on physical devices for accessibility accuracy.
Cell Tokens
| Token Name | Value | |
|---|---|---|
| cell.color.surface.container.rest | #FFFFFF | |
| cell.color.surface.container.active | #F3F3F3 | |
| cell.color.border.content | #CBCCCD | |
| cell.color.text.label | #323334 | |
| cell.color.text.indicator | #007000 | |
| cell.color.text.value-text | #323334 | |
| cell.color.text.heading | #002677 | |
| cell.color.text.paragraph | #4B4D4F | |
| cell.color.text.subheading | #323334 | |
| cell.color.text.eyebrow | #4B4D4F | |
| cell.color.icon.leading.utility | #002677 | |
| cell.color.icon.trailing.utility | #4B4D4F | |
| cell.color.icon.trailing.interactive | #196ECF | |
| cell.border-width.bottom.content | 0.5 | |
| cell.sizing.icon.all.leading | 24 | |
| cell.sizing.icon.all.trailing | 24 | |
| cell.spacing.padding.horizontal.container | 16 | |
| cell.spacing.padding.left.container | 16 | |
| cell.spacing.padding.right.content | 16 | |
| cell.spacing.padding.vertical.content | 16 | |
| cell.spacing.gap.horizontal.content | 16 | |
| cell.spacing.gap.horizontal.trailing-text | 8 | |
| cell.spacing.gap.vertical.main-content | 2 |
Cell Classes
| V2 | V1 | Status |
|---|---|---|
| cell-checkbox-button | cell-checkbox-button | Unchanged |
| cell-content-wrapper | cell-content-wrapper | Unchanged |
| cell-eyebrow | cell-eyebrow | Unchanged |
| cell-heading | cell-title | Renamed |
| cell-icon-button | - | Added |
| - | cell-icon-right | Removed |
| - | cell-indicator | Removed |
| - | cell-info-button | Removed |
| - | cell-info-icon | Removed |
| cell-leading-content | - | Added |
| - | cell-left-wrapper | Removed |
| cell-nav-icon | - | Added |
| cell-paragraph | cell-description | Renamed |
| cell-radio-button | cell-radio-button | Unchanged |
| - | cell-right-wrapper | Removed |
| cell-root | cell-root | Unchanged |
| cell-subheading | cell-subtitle | Renamed |
| cell-toggle-button | cell-toggle-button | Unchanged |
| cell-trailing-icon | - | Added |
| - | cell-value | Removed |
Cell Props
| V2 | V1 | Status |
|---|---|---|
| eyebrow | eyebrow | Unchanged |
| - | footer | Removed |
| heading | title | Renamed |
| - | highlight | Removed |
| - | iconBackgroundColor | Removed |
| indicator | indicator | Unchanged |
| isDisabled | isDisabled | Unchanged |
| leadingContent | icon | Renamed |
| link | - | Added |
| navIcon | - | Added |
| onChange | onChange | Unchanged |
| onPress | onPress | Unchanged |
| onPressIn | onPressIn | Unchanged |
| onPressOut | onPressOut | Unchanged |
| paragraph | description | Renamed |
| - | pressIcon | Removed |
| selectAll | selectAll | Unchanged |
| subheading | subtitle | Renamed |
| - | titleColor | Removed |
| - | titleWeight | Removed |
| trailingIcon | - | Added |
| type | type | Unchanged |
| value | value | Unchanged |