Base Attributes

All Whisper Components contain certain Attributes to help identify and style the component.

WhisperComponent

WhisperComponents are the individual elements, whether visible or not, that build up the UI of a Whisper in Olive Helps. While each type of component produces something different, they all have some attributes in common with each other, as described below:

type WhisperComponent {
    id?: string;
    type: WhisperComponentType;
    key?: string;
    layout?: LayoutOptions;
}

Descriptions

• id (Optional):

  • id of the component

  • Used to maintain object state across Whisper Updates

  • undefined by default

• type:

  • The type of component that the configuration object is creating. WhisperComponentType. Enumerations that includes Button, CheckBox, Markdown and etc.

  • This is automatically inferred when using JSX Whispers

• key (Optional):

  • The key is used to maintain the object state across Whisper Updates

  • The component's key must be unique among its sibling components.

  • undefined by default

• layout (Optional):

  • Defined LayoutOptions. Provides a way to configure the spacing and space occupied by individual components.

  • undefined by default.

  • Note: Some component types may have their own default styling.

Layout

The layout attribute is used to modify the spacing and size of a specific component. It's value is an object of the type LayoutOptions defined below:

type StyleSize = 'none' | 'small' | 'medium' | 'large';

type WidthSize = 'full' | 'half';

interface LayoutOptions {
    flex?: string; 
    margin?: StyleSize; 
    marginBottom?: StyleSize; 
    marginLeft?: StyleSize; 
    marginTop?: StyleSize; 
    marginRight?: StyleSize; 
    padding?: StyleSize; 
    paddingBottom?: StyleSize; 
    paddingLeft?: StyleSize; 
    paddingTop?: StyleSize; 
    paddingRight?: StyleSize; 
    width?: WidthSize;
}

All properties are pretty straightforward except flex.

The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container. This property is a shorthand for the following CSS properties:

• flex-grow
• flex-shrink
• flex-basis

Flex Syntax

/* Keyword values */
flex: 'auto';
flex: 'initial';
flex: 'none';

/* One value, unitless number: flex-grow */
/* flex-basis is then equal to 0. */
flex: '2';

/* One value, width/height: flex-basis */
flex: '10em';
flex: '30%';
flex: 'min-content';

/* Two values: flex-grow | flex-basis */
flex: '1 30px';

/* Two values: flex-grow | flex-shrink */
flex: '2 2';

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: '2 2 10%';

OliveHelps has certain preset formats and sizes. We recommend using numbers and 'auto' instead of px or rem.

Values

initial

The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting "flex: 0 1 auto".

auto

The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting "flex: 1 1 auto".

none

The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting "flex: 0 0 auto".

<'flex-grow'>

Defines the flex-grow of the flex item. Negative values are considered invalid. Defaults to 1 when omitted. (initial is 0)

<'flex-shrink'>

Defines the flex-shrink of the flex item. Negative values are considered invalid. Defaults to 1 when omitted. (initial is 1)

<'flex-basis'>

Defines the flex-basis of the flex item. A preferred size of 0 must have a unit to avoid being interpreted as a flexibility. Defaults to 0 when omitted. (initial is auto)The default flex value is same as CSS's initial value, which is:

flex-grow: 0
flex-shrink: 1
flex-basis: auto

Examples

Now we can take a look of some examples when we set flex to different values. flex

is applied to Select Component.

Flex	Image
Left Box flex: 'auto' Right Box flex: 'auto'
Left Box flex: 'auto' Right Box flex: 'none'
Left Box flex: '2' Right Box flex: '1'

Reference : https://developer.mozilla.org/en-US/docs/Web/CSS/flex

WhisperComponentType

This is a glimpse of what each WhisperComponentType can look like, as well as a brief description. You can see more features and use cases in specific Whisper component pages.

WhisperComponentType	Image
Autocomplete - A text or dropdown that is configured with a list of options, which are suggested as autocompleted options to the end user.
Box - A container component for formatting other components.	See box page
Breadcrumbs- A list of Links that display a hierarchal relationship.
Button- A interactive element that allows users to take actions and can be configured to have different weights.
Checkbox- A boolean input that has a configurable label.
CollapseBox- A container component to allow content to be opened and closed with a click on interactive text. Can be configured to open up or down.
DateTimeInput- Input field that allows the user to provide date and time information. The field can be pre-populated by the Loop.
Divider- This component shows a horizontal divider to separate different kinds of content in a Whisper. This component has no options.
DropZone- Input that give a Loop a way to receive an uploaded file from the end user. Can be configured to reject certain files.
Email- Input field that allows the end user to provide an email address.
Icon- Renders requested icon, chosen from Material Icons. Icons can be placed inside of Box components.
Link- A configurable link that either can trigger a process in a Loop, or link to an external website.
ListPair- A component for presenting information where there is a bolded label on the left of a non-bolded value. Either is configurable to be copyable to the end user's clipboard.
Markdown- A basic component where Markdown text can be added, granting greater flexibility with information presentation.
Message- This component shows a banner in the Whisper that functions as a call to action to the user.
Number- Input field that allows the end user to provide a number within the parameters provided.
Password - Input field that allows the end user to provide a password. This field protects the end user by obscuring what they type. Showing each character as a solid black dot.
Progress- Progress components express an unspecified wait time or display the length of a process.
RadioGroup- A collection of options in which a user selects a single result. The result is selected by clicking one of the radio elements in the radio group. A selected value of -1 indicates that nothing is selected.
RichTextEditor- An input / editor that allows the end user to enter rich text, which is then output as Markdown.
SectionTitle- A presentation component that is meant to help signify a section of content. Can be configured to have a background color.
Select- A dropdown input that gives the end user a list of options to pick from. A selected value of -1 indicates that nothing is selected.
Telephone- Input field that allows the end user to provide a telephone number, automatically formatting it.
TextInput- Input field that allows the end user to provide text information. The text can be pre-populated by the Loop.