Using the Group Component

Note: Group Cell Info is currently undergoing QA and is undergoing improvement. Known issues are listed at the end of this article

Introduction

The Group Component is a ui_component that is defined as a plugin in the main Quick Brick repo.

A group component consists of the following

• 2 Plugins called Group Component (QB) and Group Info (QB)
  • These control the structure of the group in a screen and must be added to the app for Group to work

• Group Cell Info plugin

  • This is a power cell for Header / Footer / Separator (actually the same type of cell, just placed differently relative to the river). It is optional to use within the group

  • 

• Standard QB components of Grid, List etc.

The purpose of the Group Component is to handle the following scenarios:

• Distribute the data from the group’s data source into its children:

  • Meta data will go in header / footer / separator components

  • Entries will go in nested ui_components

• Provide Styling for the group components

When several rivers are used, the items should be distributed following certain rules:

• Default behaviour is to populate the first component up to its item limit, then the next, and so on

• Not yet implemented:

  • Handle repeat patterns, based on item limit: i.e. 2 items in List, then 4 in grid, then repeat

  • Handle group by rules => group items by a specific metadata, and populate components accordingly

Group Component Configuration Options

Here is a list of the current configuration options & default values that the group component can take.

Description	Name	Value
Group Margin	group-margin-top	0
	group-margin-bottom	0
Group Padding	group-padding-left	0
	group-padding-right	0
	group-padding-top	0
	group-padding-bottom	0
Background Color	group-background-color	Transparen

The illustration of the group component below shows how a group can be structured using content components and group info cells

The Group Cell Info

Consider this power cell can be used in a number of different situations within a group component:

• Header: Structured at the top of the group component

• Decorative: Structured between components within the group component

• Footer: Structured at the bottom of the group component

Through configuration, the cell can take on many forms - it can be used a blank spacer to separate components or as a text label cell with a button. Below is a full list of configurable elements:

Section	Name	Value
Cell	Background Color	Transparent
	Padding (Top, Right, Bottom, Left)	16, component-padding-right, 16, component-padding-left
	Margin (Top, Bottom)	0
	Border Top Color	Transparent
	Border Top Thickness	0
	Border Bottom Color	Transparent
	Border Bottom Thickness	0
Title text label (Toggle On/Off)	Font family	iOS: SF Pro Display Heavy Android: Roboto Bold
	Font size	Both: 20
	Color	Both: #FFFFFF
	Line Height	Both: 24
	Letter Spacing	iOS: -0.4 Android: 0
	Margin (Top, Right, Bottom, Left)	0
	Number of lines (max)	1
	Alignment (Left, Center, Right)	Left
Button Element (Toggle On/Off)	Vertical Position (Top, Middle, Bottom)	Middle
	Background Color	Transparent
	Padding (Top, Right, Bottom, Left)	0, 0, 0, 0
	Margin (Top, Right, Bottom, Left)	0, 0, 0, 16
	Corner Radius	0
	Border Color	Transparent
	Border Thickness	0
Button Text Label (Toggle On/Off)	Font family	iOS: SF Pro Text Semi Bold Android: Roboto Medium
	Font size	Both: 14
	Color	#04CF99
	Line Height	Both: 20
	Letter Spacing	iOS: -0.4 Android: 0
	Margin (Top, Right, Bottom, Left)	0, 0, 0, 0
Button Icon (Toggle On/Off)	Width	20
	Height	20
	Asset	arrow.png

Illustration of how the default values look when rendered:

Default Arrow Asset LTR (20x20 @3x resolution):

Default Arrow Asset RTL (20x20 @3x resolution):

Title Text Label

Buttons

Button Alignment

Borders

Examples

Badges

NOT YET IMPLEMENTED

Badge Asset (Toggle On/Off) Default Off	Width	0
	Ratio	1x1
	Margin (Top, Right, Bottom, Left)	0, 0, 0, 10

 

Group repeat patterns

Group components can be configured to repeat a sequence if required.

The options are

No Repeat: A group configuration will not repeat

Repeat all components: The entire group configuration will repeat

Repeat last X components: E.g. a group of header, hero, list 1, list 2, list 3 set to repeat last 3 will only repeat the list 1,2,3 components. The header and hero will only be displayed once. Enter the required number of repeats in the Amount field

Known issues with Group Info Cell

April 2020

- Padding left & right should pull in Theme values (Component padding left & right)
- Border Top color doesn't seem to be working. Bottom border color works fine.
- Button label splits onto two lines when label & icon are 'On'. The button text should take up as much space as it needs. It should take away from the title text width.
- UI builder: When toggling off button element then button text label & icon should hide.
- When turning off the text label in the button but keeping icon on, the icon is squashed/stretched. Does not render at specified size.
- When turning off button icon the button text label does not align with the right hand side of the cell. It should anchor there with any 'margin right' space that has been added. Looks like the space assigned or icon is still showing even when turned off.
- Button icon: If i change the asset to 8x20 image & update the width & height fields the icons renders squashed on screen.
- Vertical position of button should default to middle.
- When adding a button background or border the size of the button matches the text label height. This should not be the case. The buttons height should reflect either the height of the image or the line-height of the text, plus any paddings that have been added.
- Badge would benefit from a corner radius. I missed this on the table, apologies.
- We should keep all of the cell styling in the cell composition part of the UI builder. Will remove the configuration options that appear under title 'Cell' when in the Group component on the screens section of UI builder.