1 of 19

UI Components Standardisation

Introduction

This page outlines methods to reduce UI/UX audit bugs post-development by enhancing a UI library. Key improvements include:

These enhancements aim to streamline development and ensure a consistent, user-friendly interface.

Integrate New Components

To resolve UI/UX audit issues, we will implement new components featuring enhanced functionality, modern design, and superior performance. These elements should adhere to current design trends and meet user expectations to improve the user experience. Below is the list of DIGIT Components

Standardise Design Principles

Standardising design principles ensures consistency across the UI library, reducing the likelihood of UI/UX audit bugs. This involves establishing design guidelines, naming conventions, and component usage patterns.

Enhance Stability

Enhancing the stability of the UI library is crucial for reducing UI/UX audit bugs. This includes optimizing code quality, implementing robust testing strategies, and monitoring performance to identify and address potential issues.

Convert px To em Units

Transitioning from px to em units improves scalability and accessibility, reducing UI/UX audit bugs related to inconsistent text sizes and layouts across different devices and screen resolutions.

Integrate With Storybook

Storybook provides a development environment for testing and documenting components, helping to identify and address UI/UX audit bugs early in the development process.

Implement Color & Text Size Constants

Implementing colour and text size constants ensures consistency in styling across the UI library, reducing UI/UX audit bugs related to colour contrast, readability, and visual hierarchy.

Add New Component Variants

Introducing newer component variants enhances flexibility and caters to diverse user requirements, reducing UI/UX audit bugs related to limited functionality or options.

Create Flutter Widgets

Creating Flutter widgets extends the UI library's reach to mobile platforms, reducing UI/UX audit bugs related to inconsistent user experiences across different devices and operating systems.

Refer to the below docs to learn more about react and flutter components -

Conclusion

Implementing the improvements discussed here ensures the UI library is better equipped to reduce UI/UX audit bugs after development. These enhancements promote consistency, scalability, accessibility, and cross-platform compatibility, resulting in a more polished and user-friendly experience for end-users.

DIGIT UI Core React Components

Migration guide to aid users in shifting from the "react-components" package to the "components-core" package

Topics covered:

Overview
Install
Apply
Modify Project Module
Conclusion

Overview

This document details the essential modifications needed in the modules for smooth integration of components from the "components-core" package. It offers precise guidelines on utilizing FormComposerV2 and InboxSearchComposer, along with updates made in the configs.

In the components-core package, several enhancements have been implemented to improve code clarity and address issues related to pixel inconsistencies. Previously, there were challenges associated with pixel-based sizing, leading to inconsistencies across different devices and screen resolutions. To mitigate this, the codebase has been updated to utilize rems as the primary unit of measurement. This transition to rems offers several advantages over pixels, including improved scalability and responsiveness across various viewport sizes.

Adopting rems ensures the components' styling is more consistent and adaptable, providing a seamless user experience across different platforms and devices.

Furthermore, TextInput, TextArea, Radio, Button, Checkbox, Toggle, Dropdown, Multiselectdropdown, InfoCard, and Toast offer different variants. Adding variants for these components makes them more flexible, serving a wider range of purposes and meeting different design needs effectively.

These are some of the updates made in the components-core package.

Atom

Variants

State

Install

To install:

npm install -save @egovernments/digit-ui-components-core

Add the dependency in the frontend/micro-ui/web/package.json

"@egovernments/digit-ui-components-core":"0.0.1"

Apply

Syntax for importing any components:

import {TextInput, Dropdown} from "@egovernenets/digit-ui-components-core"

Syntax for importing FormComposerV2:

import {FormComposerV2} from "@egovernenets/digit-ui-components-core"

<React.Fragment>
<Header >{t("CREATE_HEADER")}</Header>
<FormComposerV2
label={t("PROCEED")}
config={configs.map((config) => {
return {
...config,
body: config.body.filter((a) => !a.hideInEmployee),
};
})}
defaultValues={sessionFormData}
onFormValueChange={onFormValueChange}
onSubmit={onFormSubmit}
/>
</React.Fragment>

Modify Project Module

In the micro-ui/web/micro-ui-internals/packages/modules/Project/src/pages/employee/CreateProject/CreateProjectForm.js:

return (
<React.Fragment>
<Header className="works-header-create">{isModify ? t("COMMON_MODIFY_PROJECT") : t("WORKS_CREATE_PROJECT")}</Header>
{createProjectConfig && (
<FormComposerV2
label={!isModify ? "WORKS_CREATE_PROJECT" : "WORKS_MODIFY_PROJECT"}
config={config?.form?.map((config) => {
return {
...config,
body: config?.body.filter((a) => !a.hideInEmployee),
};
})}
onSubmit={handleSubmit}
submitInForm={false}
inline={false}
className="form-no-margin"
defaultValues={sessionFormData}
showWrapperContainers={false}
noBreakLine={true}
showNavs={config?.metaData?.showNavs}
showFormInNav={true}
showMultipleCardsWithoutNavs={false}
showMultipleCardsInNavs={false}
horizontalNavConfig={navTypeConfig}
currentFormCategory={currentFormCategory}
onFormValueChange={onFormValueChange}
cardClassName="mukta-header-card"
/>
)}
</React.Fragment>
);

In the micro-ui/web/micro-ui-internals/packages/modules/Project/package.json :

Add “@egovernments/digit-ui-components-core”:”0.0.1” in the dependencies.

And when you import any component the syntax for the import statement is:

import {TextInput, Dropdown} from "@egovernenets/digit-ui-components-core"

In the micro-ui/web/micro-ui-internals/packages/modules/Project/src/pages/employee/ProjectWMSSearch:

import {InboxSearchComposer} from "@egovernenets/digit-ui-components-core"

<div className ="inbox-search-wrapper">
<InboxSearchComposer configs={configs}></InboxSearchComposer>
</div>

Conclusion

Verify the components in the sample module:

Sample module Integrated with new components

These are some of the modifications that need to be done in the modules to use the components from the components-core package.

Input Field

Description

The Input field enables users to interact with the application through content input and data. The component allows users to input responses or data based on specific requirements.

Configuration

Config for TextInput Component (using FormComposerV2)

Type: text

{
inline:true,
label:"Example",
placeholder:"Enter Text"
isMandatory: true,
type:"text",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultText",
error:"Error Message",
validation:{minLength:2, maxLength:10},
customIcon:"DownloadIcon",
onIconSelection:{(e)=>{console.log("clicked");}}
prefix:"$",
suffix:"$",
wrapLabel:true
}
}

Below are the details for the type: text:

Example Usage of TextInput Component

<TextInput
type="text"
disabled={false}
populators={{customIcon: "MyLocation"}
onIconSelection={()=>{console.log("selected")}
></TextInput>

For more information: StoryBook for Text Input field

Type: date

{
label:"ExampleDate",
placeholder:"dd/mm/yyyy"
isMandatory: true,
type:"date",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultDate",
error:"Error Message",
editableDate:true
}
}

The date can be selected from the date chart. If editableDate is set to true, the date can be edited without using the date chart; otherwise, it cannot be edited.

For more information: StoryBook for date field

Type: time

{
label:"ExampleTime",
placeholder:"placeholder"
isMandatory: true,
type:"time",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultTime",
error:"Error Message",
editableTime:true
}
}

The time can be selected from the time chart. If editableTime is set to true, the time can be edited without using the time chart; otherwise, it cannot be edited.

For more information: StoryBook for time field

Type: geolocation

{
label:"ExampleGeolocation",
placeholder:"placeholder"
isMandatory: true,
type:"geolocation",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultGeolocation",
error:"Error Message",
onIconSelection:{(e)=>{console.log(“clicked”);}}
}
}

Click on the geolocation icon to call and activate the onIconSelection function. Otherwise, the location details are captured by default.

For more information: StoryBook for Geolocation field

Type: numeric

{
label:"ExampleNumeric",
placeholder:"placeholder"
isMandatory: true,
type:"numeric",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultGeolocation",
error:"Error Message",
},
config:{step:””}
}

The numeric value by default increases and decreases by step value 1. But it can be configured using the step value sent as a prop in the config.

For more information: StoryBook for Numeric field

With Prefix and Suffix

{
label:"ExamplePrefix",
placeholder:"placeholder"
isMandatory: true,
type:"text",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultText",
error:"Error Message",
prefix:”+91”
},
}

{
label:"ExampleSuffix",
placeholder:"placeholder"
isMandatory: true,
type:"text",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultText",
error:"Error Message",
suffix:”Kg”
},
}

Type: password

{
label:"ExamplePassword",
placeholder:"placeholder"
isMandatory: true,
type:"password",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultText",
error:"Error Message",
},
}

For more information: Storybook for password field

Type: search

{
label:"ExampleSearch",
placeholder:"placeholder"
isMandatory: true,
type:"search",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultSearch",
error:"Error Message",
onIconSelection:{(e)=>{console.log(“clicked”);}}
}
}

Config for TextArea Component (using FormComposerV2)

{
label:"ExampleTextArea",
placeholder:"placeholder"
isMandatory: true,
type:"textarea",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultSearch",
error:"Error Message",
resizeSmart: false,
}

There are two variants for the textarea - one has a resize option and the other is resizeSmart which auto-adjusts the height based on the input content.

For more information: Storybook for TextArea

Radio

Description

Radio button components enable users to select a single option from a list of alternatives.

Configuration

Config for Radio Component (using FormComposerV2)

{
isMandatory: false,
type: "radio",
key: "genders",
label: "Deafult",
disable: false,
populators: {
name: "radio-Deafult",
optionsKey: "name",
error: "Error!",
required: true,
mdmsConfig: {
masterName: "GenderType",
moduleName: "common-masters",
localePrefix: "COMMON_GENDER",
},
},
}

While using the radio component independently and to disable it set the prop as disabled={true}.

For more information: Storybook for radio field

Toggle

Description

A toggle UI component is a user interface element that allows users to switch between two states, typically "on" and "off" or "enabled" and "disabled".

Configuration

Config for Toggle Component (using FormComposerV2)

{
isMandatory: false,
key: "toggle",
type: "toggle",
label: "Default",
disable: false,
populators: {
name: "toggle-Default",
optionsKey: "name",
error: "Error!",
required: false,
options: [
{
code: "1",
name: "Toggle1",
},
{
code: "2",
name: "Toggle2",
},
{
code: "3",
name: "Toggle3",
},
],
},
}

For more information: StoryBook for toggle field

Button

Description

Buttons are used for specific user actions. These clickable UI components allow the users to interact with the system.

Configuration

Usage of Button Component

Primary Variant

<Button
variation="primary"
label={"Primary"}
type="button"
icon="MyLocation"
isSuffix={false}
isDisabled={false}
/>

Secondary Variant

<Button
variation="secondary"
label={"Secondary"}
type="button"
icon="MyLocation"
isSuffix={false}
isDisabled={false}
/>

Tertiary Variant

<Button
variation="teritiary"
label={"Teritiary"}
type="button"
icon="MyLocation"
isSuffix={false}
isDisabled={false}
/>

Link Variant

<Button
variation="link"
label={"Link"}
type="button"
icon="MyLocation"
isSuffix={false}
isDisabled={false}
/>

Icons are sent as a string added before the label. To add it as a suffix, set the isSuffix parameter to true.

For more information: StoryBook for button components

Dropdown

Description

A dropdown UI component is a user interface element that allows users to select one option from a list of choices. When the dropdown is clicked, it expands to reveal the list of options, and the user can click an item to select it. This component is often used in forms and navigation menus to save space and organize options efficiently.

Configuration

Config for Dropdown Component (using FormComposerV2)

Simple Dropdown

To show the icons beside each option, set the showIcon prop to true. Send the icons as a string along with the required options. The dropdown is searchable but can be configured using the isSearchable prop.

To reset the option after selecting it, clear the option and click enter.

Nested Dropdown

For the type dropdown with the "nesteddropdown" variant, options can be configured as shown above. Icons are optional but can be included if needed. The search results are displayed as per the main category names.

Tree Dropdown

Here's a simplified version of your explanation:

For the type dropdown with the "treedropdown" variant, options can be configured as shown in the configuration above. Currently, the treedropdown does not support icons. Clicking on the parent option displays the child options. The final child options are enabled for selection.

This version maintains the necessary details while being clear and concise.

NestedText Dropdown

For the type dropdown with the variant nestedtextdropdown, use the above configuration details to define the options.

Use this variant when you need to describe each option.

Profile Dropdown

For the type dropdown with the "profiledropdown" variant, use the configuration details above to define the options.

You can set any image as a profileIcon as shown in the configuration.

Profilenestedtext Dropdown

Config for MultiSelectDropdown Component (using FormComposerV2)

Simple MultiSelect Dropdown

For a multi-select dropdown, set options in the format given in the above configuration.

Ignore these If icons are not needed. Else, set the showIcon to true. Set the isDropdownWithChip parameter to true to show chips once the options are selected.

Configure the clearLabel param to ensure the chips are cleared from the label.

Nested MultiSelect Dropdown

Multiple options can be selected for each category.

Tree MultiSelect Dropdown

In a tree multiselect dropdown, you can select both parent and child options. Choosing a child option does not automatically select the parent option. When only some child options are selected, the parent option will show in an intermediate state.

Selecting any parent option will automatically select all its child options.

NestedText MultiSelect Dropdown

Checkbox

Description

The checkbox component allows users to select one or multiple options from a given set of choices.

Configuration

Config for Checkbox Component (using FormComposerV2)

{
inline:true,
isMandatory: true,
type:"checkbox",
disable:false,
withoutLabel:true,
populators:{
name:"checkbox",
error:"Error Message",
title:”Checkbox Label”,
isLabelFirst: false,
}
}

By default, the checkbox appears before the label, but this order can be changed using the isLabelFirst option.

For more information: Storybook for checkbox field

Toast

Description

The Toast component is used to provide users with temporary notifications. It does not require any user action.

Configuration

Usage of Toast Component (using FormComposerV2)

Success Toast

<Toast
label={"Success Toast Message"}
onClose={}
transitionTime={}
/>

Warning Toast

<Toast
label={"Warning Toast Message"}
warning={“warning”}
onClose={}
transitionTime={}
/>

Error Toast

<Toast
label={"Error Toast Message"}
error={true}
onClose={}
transitionTime={}
/>

The default transitionTime for any variant of toast is 5 seconds. However, this is configurable using the transitionTime prop (in milliseconds).

For more information: Storybook for Toast

Info Card

Description

The InfoCard component has four variants: default, success, error and warning. The default labels for these variants are Info, Success, Error and Warning.

However, the label can be configured using the label prop. The configuration enables users to set the array of elements for display in the info card component.

By default, the elements are shown in the vertical direction. To show the elements in the horizontal direction set the inline prop to true.

Configuration

With Additional Elements:

DIGIT UI Core Flutter Components

Introduction

DIGIT UI components is a collection of common Flutter widgets designed to simplify UI development. These components offer easy-to-use and customizable features to enhance UI design and streamline the development process.

Getting Started

Add this to your pubspec.yaml file:

Then run:

Import the package in your Dart code:

Component List

Atom

Variants

States

Input Field

Overview

DIGIT UI components include various text input fields with optional features such as character count display, inner labels, and help text. These fields also come with built-in validation support for improved data integrity.

Input Field Type

Text Input Field: A text input field for general alphanumeric data.
Text Area Input Field: For multi-line text input.
Search Input Field: Designed for search queries or search-related inputs.
Password Input Field: A secure input field for password entry.
Numeric Input Field: This field is suitable for numeric input.
Date Input Field: An input field designed to capture dates.
Time Input Field: Use this field to input time values.
Location Input Field: Specifically for geographic location data, such as coordinates.

Properties

These are some common props which can be sent inside all the input fields:

TextAreaScroll

Configuration

Text Input Field

Usages

TextArea Input Field

Usages

Search Input Field

Usages

Password Input Field

Usages

Numeric Input Field

Usages

Date Input Field

Usages

Time Input Field

Usages

Location Input Field

Usages

Radio

Overview

The Radio Buttons component in DIGIT UI empowers users to make a single selection from a list of options. This intuitive interface provides a smooth user experience with hover and mouse-down effects. It is designed to handle both horizontal and vertical layouts based on the screen width.

Properties

Below are some required parameters inside the radio list:

Name                            Description

radioButtons                 A list of RadioButtonModel representing the radio button

onChanged                   a callback when a radio button is selected

The following are additional parameters:

groupValue                  the current selected value in the radio group, using this
                            any radio button can be selected initially, the default is a
                            empty string.

isDisabled                   indicates whether radio buttons are disabled

containerPadding              padding applied around each radio button

Configuration

Usages

Add the below lines of code to configure the radio button:

RadioList(
  onChanged: (value) {},
  radioButtons: [
    RadioButtonModel(code: '1',name: 'One',),
    RadioButtonModel(code: '2', name: 'Two'),
    RadioButtonModel(code: '3', name: 'Three'),
  ],
);

Toggle

Overview

The Toggle Buttons component in DIGIT UI presents a list of interactive toggle buttons, providing users with the ability to select an option. Each button is equipped with callbacks for both mouse-down and hover effects, ensuring a responsive and engaging user interface.

Properties

The widget contains the following required parameters:

Name                           Description

toggleButtons                   A list of ToggleButtonModels that define the toggle 
                                button

onChanged                       a callback when a toggle is selected

Below are some additional parameters:

selectedIndex                 initially selected toggle(by default first toggle will 
                              be selected)

contentPadding                optional Padding around toggle buttons

Configuration

Usages

Add the following lines of code:

ToggleList(
  toggleButtons: [
    ToggleButtonModel(
      name: 'Toggle 1', key: 'key1', onSelected: (value) {}),
    ToggleButtonModel(
      name: 'Toggle 2', key: 'key2', onSelected: (value) {}),
    ToggleButtonModel(
      name: 'Toggle 3', key: 'key3', onSelected: (value) {}),
  ],
  selectedIndex: 1,
onChanged: (selectedValues) {},
);

Button

Overview

DIGIT UI components provide a variety of buttons with optional suffix and prefix icons, contributing to a cohesive and visually appealing UI.

Properties

Button Type

Primary: Represents the primary action. It features a prominent colour, and its appearance can change on hover or click.
Secondary: Offers a secondary action. It has a different colour scheme than the primary button.
Tertiary: Provides a tertiary action with a distinct visual style.
Link: Resembles a hyperlink, suitable for navigation or linking to other parts of the application. It typically includes an underline.

Hover and Disabled State

The DigitButton widget handles hover effects and a disabled state. When the button is hovered over, it can exhibit visual changes depending on its type. The disabled state prevents interaction and adjusts the button's appearance accordingly.

Icon Placement

The widget supports the placement of icons both before and after the label text. This allows for flexibility in button design.

Properties

It contains the following required Parameters:

These are some optional parameters:

Configuration

Primary Button

To use the primary button add the below lines of code:

With suffix Icon:

With prefix Icon:

Secondary Button

To use the secondary button add the following lines of code:

Prefix and Suffix icons can be added to the secondary button using the same code as given for the primary button.

Tertiary Button

To use the tertiary button add the below lines of code:

Link

To use a link, add the following lines of code:

Dropdown

Overview

DIGIT UI components offer various drop-down menus, including single-select, multi-select, and tree-select options.

Single Select Drop-down

The Single Select drop-down in Digit UI Components provides a drop-down menu for users to make a single selection. It supports various features such as item filtering and selection handling. This intuitive component supports options with additional features such as images, icons, and descriptions, complemented by hover and mouse-down effects.

Sub-Types

Default drop-down
Nested drop-down
Tree drop-down

Properties

Below are some required parameters:

These are some additional customisation parameters:

DropdownItem

Inside the dropdown item, we can pass additional parameters to include the drop-down like description, image and icons.

There are the customisations available inside the drop-down item:

TreeNode

Inside the tree node we can pass a list of children associated with a node:

Configuration

Usages

Default drop-down

With description and profile image:

Nested drop-down

Tree drop-down

Multi Select Drop-down

The Multi-Select drop-down in DIGIT UI components offers a user-friendly interface for selecting multiple options simultaneously. This clean and intuitive component is equipped with built-in chips and provides responsive mouse-down and hover effects.

Sub-Types

Default drop-down
Nested drop-down
Tree drop-down

Properties

Below are some required parameters:

These are some additional parameters:

Configuration

Usages

Default Drop-down

Nested Drop-down

Tree Drop-down

Checkbox

Overview

This widget is a versatile and customizable checkbox component. It provides a checkbox with an associated label and allows users to toggle between checked and unchecked states. This widget supports various customisation options, including the ability to customise the checkbox icon colour, label, padding, and disabled state.

The widget provides a hover state, visually indicating when the user hovers over the checkbox. This is useful for enhancing the user experience.

Properties

This widget contains the following required parameters:

Name                         Description

label(string)               label associated with the checkbox

onChange(boolCallBack)      callback function when the checkbox value changes

These are some option parameters:

value(default: false)        current state of checkbox

isDisabled                     indicates whether the checkbox is disabled

iconColor                    checkbox colour can be customized using this

Padding                      padding around the checkbox widget

Configuration

Usages

Add the following lines of code:

DigitCheckbox(
  label: "Label for checkbox",
  onChanged: (value) {},
),

Toast

Overview

The Toast widget provides a customizable toast notification for Flutter applications. It is designed to display short-lived messages, alerts, or notifications to users in a visually appealing and informative manner.

The ToastType enumeration defines different types of toasts, including:

success: Indicates a successful operation.
error: Indicates an error or failure.
warning: Indicates a warning or caution.

Properties

The Toast widget provides a static method for displaying toasts. This method includes the following parameters:

Name                                Description

context(required)                  the build context for the widget

options(required)                  configuration options for the toast, such as the
                                   message and type

duration                           how long the toast message will be shown
                                   (default: 5 sec)

Configuration

Usage

Success Toast

Toast.show(context,
options: DigitToastOptions(
"Your Success message", ToastType.success));

Error Toast

Toast.show(context,
options: DigitToastOptions(
"Your Error message", ToastType.error));

Warning Toast

Toast.show(context,
options: DigitToastOptions(
"Your Warning message", ToastType.warning));

Info Card

Overview

This widget is a versatile and customizable information card designed inside a digit ui widget. It provides a visually appealing way to display information, with options for different types of information.

The Info Card supports different types of information, each with its distinct visual style:

Info: Default information card with a blue background and an information icon.
Success: This represents a successful operation, featuring a green background and a check-circle icon.
Error: Indicates an error or unsuccessful operation with a red background and an error icon.
Warning: Represents a warning or caution, featuring a yellow background and a warning icon.

Developers can include additional widgets beneath the description for extra information or interactive elements. The inline property controls whether these widgets are displayed horizontally or vertically.

Properties

Info cards contain the following required parameters:

Name                             Description

title                           title displayed on the top of the card

description                     detailed content associated with the card

type                             specify the type of information

There are some additional customisation parameters:

icon                             optional icon to display on card

additionalWidgets               a list of widget to display below description

inline                          determine whether additional widgets displayed inline

Configuration

Usages

Info Card

InfoCard(
  title: 'Info',
  type: InfoType.info,
  Description: 'description'
);

Success Card

InfoCard(
  title: 'Success',
  type: InfoType.success,
  Description: 'description'
);

Error Card

InfoCard(
  title: 'Error',
  type: InfoType.error,
  Description: 'description'
);

Warning Card

InfoCard(
  title: 'Warning',
  type: InfoType.warning,
  Description: 'description'
);

Dropdown

Overview

DIGIT UI components offer various drop-down menus, including single-select, multi-select, and tree-select options.

Single Select Drop-down

Sub-Types

Default drop-down
Nested drop-down
Tree drop-down

Properties

Below are some required parameters:

These are some additional customisation parameters:

suffixIcon                    modify the suffixIcon to open dropdown

dropdownType                   dropdown can be nested dropdown( type is mandatory in
                               nested dropdown item list)

emptyItemText                 Text to display when empty options are sent or no match
                              is found during searching

isSearchable                 flag indicating if the dropdown should support filtering
                             option

selectedOption              the default selected option

isDisabled                 flag indicating where dropdown is disabled(default: false)

DropdownItem

Inside the dropdown item, we can pass additional parameters to include the drop-down like description, image and icons.

There are the customisations available inside the drop-down item:

code(required)                 unique identifier for option

name(required)                 the label or name of dropdown option

description                    additional description for the dropdown option

textIcon                      Icon to be displayed inside the dropdown option

textIcon                      Icon to be displayed inside the dropdown option

type                          in case of nested dropdown type will be sent

TreeNode

Inside the tree node we can pass a list of children associated with a node:

code(required)                 unique identifier for that node

name(required)                 displaying the name or label for the node

children                      a list of the tree node

Configuration

Usages

Default drop-down

DigitDropdown<int>(
  dropdownType: type.singleSelect,
  onChange: (String value, String index) => {},
  textEditingController: TextEditingController(),
  items: const [
    DropdownItem(name: 'first',code: '1',),
    DropdownItem(name: 'second',code: '2',),
    DropdownItem(name: 'third',code: '3',),
    DropdownItem(name: 'fourth',code: '4',),
  ],
);

With description and profile image:

DigitDropdown<int>(
  dropdownType: type.singleSelect,
  onChange: (String value, String index) => {},
  textEditingController: TextEditingController(),
  items: const [
    DropdownItem(
      name: 'first',
      code: '1',
      description: 'description for first one',
      profileImageUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzBXNuO6PezhC18aYH_2cYtS0I7KbxoKYdwA&usqp=CAU',
    ),
    DropdownItem(
      name: 'second',
      code: '2',
      description: 'description for second one',
      profileImageUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzBXNuO6PezhC18aYH_2cYtS0I7KbxoKYdwA&usqp=CAU',
    ),
    DropdownItem(
      name: 'third',
      code: '3',
      description: 'description for third one',
      profileImageUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzBXNuO6PezhC18aYH_2cYtS0I7KbxoKYdwA&usqp=CAU',
    ),
    DropdownItem(
      name: 'fourth',
      code: '4',
      description: 'description for fourth one',
      profileImageUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzBXNuO6PezhC18aYH_2cYtS0I7KbxoKYdwA&usqp=CAU',
    ),
  ],
);

Nested drop-down

DigitDropdown<int>(
  dropdownType: type.singleSelect,
  dropdownSubtype: DropdownSubtype.nested,
  onChange: (String value, String index) => {},
  textEditingController: TextEditingController(),
  dropdownType: DropdownType.nestedSelect,
  items: const [
    DropdownItem(name: 'first',code: '1',type: 'Type A',),
    DropdownItem(name: 'second',code: '2',type: 'Type B'),
    DropdownItem(name: 'third',code: '3',type: 'Type A',),
    DropdownItem(name: 'fourth',code: '4',type: 'Type B'),
  ],
);

Tree drop-down

TreeSelectDropDown<int>(
  dropdownType: type.singleSelect,
  dropdownSubtype: DropdownSubtype.tree,
  onOptionSelected: (List<TreeNode> selectedOptions) {},
  options: [
      TreeNode('C', 'C', [
      TreeNode('C.C1', 'C1', []),
      TreeNode('C.C2', 'C2', []),
    ]),
    TreeNode('D', 'D', [
      TreeNode('D.D1', 'D1', []),
      TreeNode('D.D2', 'D2', []),
    ]),
  ],
  controller: TreeSelectController(),
);

Multi Select Drop-down

Sub-Types

Default drop-down
Nested drop-down
Tree drop-down

Properties

Below are some required parameters:

Name                             Description

options                         A list of DropdownItem representing options

onOptionSelected                callback function when an option is selected

These are some additional parameters:

selectionType                   nested Selected(type is required inside DropdownItem)

selectedOptions                  List of DropdownItem, which will be selected by 
                                 default

chipConfig                       configuration of appearance of selected option

suffixIcon                      custom suffix icon

focusNode                       a focus node can be passed, to control focus

isDisabled                      whether dropdown is enabled or disabled

clearAllText                    Text for Clear all button in chip selection

valueMapper                      mapper to show selected option inside the chip

controller                      MultiSelectController can be passed

Configuration

Usages

Default Drop-down

MultiSelectDropDown<int>(
  dropdownType: type.multiSelect,
  onOptionSelected: (List<DropdownItem> selectedOptions) {},
  options: const [
    DropdownItem(code: '1', name: 'first'),
    DropdownItem(code: '2', name: 'second'),
    DropdownItem(code: '3', name: 'third'),
    DropdownItem(code: '4', name: 'four'),
  ],
);

Nested Drop-down

MultiSelectDropDown<int>(
  dropdownType: type.multiSelect,
  dropdownSubtype: DropdownSubtype.nested,
  onOptionSelected: (List<DropdownItem> selectedOptions) {},
  options: const [
    DropdownItem(
      code: '1', name: 'first', type: "Type A"),
    DropdownItem(
      code: '2', name: 'second', type: "Type A"),
    DropdownItem(
      code: '3', name: 'third', type: "Type A"),
    DropdownItem(
      code: '4', name: 'four', type: "Type B"),
    DropdownItem(
      code: '5', name: 'five', type: "Type B"),
  ],
  selectionType: SelectionType.nestedMultiSelect,
);

Tree Drop-down

TreeSelectDropDown<int>(
  dropdownType: type.multiSelect,
  dropdownSubtype: DropdownSubtype.tree,
  onOptionSelected: (List<TreeNode> selectedOptions) {},
  options: [
    TreeNode('C', 'C', [
      TreeNode('C.C1', 'C1', []),
      TreeNode('C.C2', 'C2', []),
    ]),
    TreeNode('D', 'D', [
      TreeNode('D.D1', 'D1', []),
      TreeNode('D.D2', 'D2', []),
    ]),
  ],
  controller: TreeSelectController(),
);

Dropdown

Description

Configuration

Config for Dropdown Component (using FormComposerV2)

Simple Dropdown

To reset the option after selecting it, clear the option and click enter.

For more information:

Nested Dropdown

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "With Icons",
disable: false,
variant: "nesteddropdown",
populators: {
name: "nesteddropdown-With Icons",
optionsKey: "name",
error: "",
required: true,
showIcon:true,
isSearchable:true,
options: [
{
name: "Category A",
options: [
{ code: "Category A.Option A", name: "Option A", icon: "Article" },
{ code: "Category A.Option B", name: "Option B", icon: "Article" },
{ code: "Category A.Option C", name: "Option C", icon: "Article" },
],
code: "Category A",
},
{
name: "Category B",
options: [
{ code: "Category B.Option A", name: "Option A", icon: "Article" },
{ code: "Category B.Option 2", name: "Option 2", icon: "Article" },
{ code: "Category B.Option 3", name: "Option 3", icon: "Article" },
],
code: "Category B",
},
],
},
}

For more information:

Tree Dropdown

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "Default",
disable: false,
variant: "treedropdown",
populators: {
name: "treedropdown-Default",
optionsKey: "name",
error: "",
required: true,
options: [
{
name: "Category A",
options: [
{
code: "Category A.Option A",
name: "Option A",
options: [
{ code: "Category A.Option A.Option 1", name: "Option 1" },
{ code: "Category A.Option A.Option 2", name: "Option 2" },
],
},
{
code: "Category A.Option B",
name: "Option B",
options: [
{ code: "Category A.Option B.Option 1", name: "Option 1" },
{ code: "Category A.Option B.Option 2", name: "Option 2" },
],
},
],
code: "Category A",
},
{
name: "Category B",
options: [
{ code: "Category B.Option A", name: "Option A" },
{
code: "Category B.Option B",
name: "Option B",
options: [
{ code: "Category B.Option B.Option 1", name: "Option 1" },
{ code: "Category B.Option B.Option 2", name: "Option 2" },
],
},
],
code: "Category B",
},
{
name: "Category C",
options: [{ code: "Category C.Option A", name: "Option A" }],
code: "Category C",
},
],
},
}

Here's a simplified version of your explanation:

This version maintains the necessary details while being clear and concise.

For more information:

NestedText Dropdown

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "With Icon",
disable: false,
variant: "nestedtextdropdown",
populators: {
name: "nestedtextdropdown-With Icon",
optionsKey: "name",
error: "",
required: true,
showIcon:true,
options: [
{
code: "Option1",
name: "Option1",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor ",
},
{
code: "Option2",
name: "Option2",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
{
code: "Option3",
name: "Option3",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
],
},
},

For the type dropdown with the variant nestedtextdropdown, use the above configuration details to define the options.

Use this variant when you need to describe each option.

For more information: .

Profile Dropdown

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "With CustomIcon",
disable: false,
variant: "profiledropdown",
populators: {
name: "profiledropdown-With CustomIcon",
optionsKey: "name",
error: "",
required: true,
options: [
{
code: "Option1",
name: "Option1",
profileIcon:"
https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",

},
{
code: "Option2",
name: "Option2",
profileIcon:"
https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",

},
{
code: "Option3",
name: "Option3",
profileIcon:"
https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",

},
],
},
}

For the type dropdown with the "profiledropdown" variant, use the configuration details above to define the options.

You can set any image as a profileIcon as shown in the configuration.

For more information:

Profilenestedtext Dropdown

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "ProfileDropdown",
disable: false,
variant: "profilenestedtext",
populators: {
name: "profiledropdown-With NestedText",
optionsKey: "name",
error: "",
required: true,
options: [
{
code: "Option1",
name: "Option1",
profileIcon:"
https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
{
code: "Option2",
name: "Option2",
profileIcon:"

https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",

},
{
code: "Option3",
name: "Option3",
profileIcon:"
https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
],
},
}

For more information:

Config for MultiSelectDropdown Component (using FormComposerV2)

Simple MultiSelect Dropdown

{
isMandatory: false,
key: "multiselect",
type: "multiselectdropdown",
label: "With Icons",
disable: false,
populators: {
name: "multiselectdropdown-With Icons",
optionsKey: "name",
error: "Error!",
required: false,
isDropdownWithChip: true,
showIcon:true,
clearLabel:"Clear All"
options: [
{
code: "Option1",
name: "Option1",
icon: "Article",
},
{
code: "Option2",
name: "Option2",
icon: "Article",
},
{
code: "Option3",
name: "Option3",
icon: "Article",
},
],
},
}

For a multi-select dropdown, set options in the format given in the above configuration.

Ignore these If icons are not needed. Else, set the showIcon to true. Set the isDropdownWithChip parameter to true to show chips once the options are selected.

Configure the clearLabel param to ensure the chips are cleared from the label.

For more information:

Nested MultiSelect Dropdown

{
isMandatory: false,
key: "multiselect",
type: "multiselectdropdown",
label: "With Icons",
disable: false,
variant: "nestedmultiselect",
populators: {
name: "nestedmultiselect-With Icons",
optionsKey: "name",
error: "Error!",
required: false,
isDropdownWithChip: true,
showIcon:true,
options: [
{
name: "Category A",
options: [
{ code: "Category A.Option A", name: "Option A", icon: "Article" },
{ code: "Category A.Option B", name: "Option B", icon: "Article" },
{ code: "Category A.Option C", name: "Option C", icon: "Article" },
],
code: "Category A",
},
{
name: "Category B",
options: [
{ code: "Category B.Option A", name: "Option A", icon: "Article" },
{ code: "Category B.Option 2", name: "Option 2", icon: "Article" },
{ code: "Category B.Option 3", name: "Option 3", icon: "Article" },
],
code: "Category B",
},
],
},
}

Multiple options can be selected for each category.

For more information:

Tree MultiSelect Dropdown

{
isMandatory: false,
key: "multiselect",
type: "multiselectdropdown",
label: "Default",
disable: false,
variant: "treemultiselect",
populators: {
name: "treemultiselect-Default",
optionsKey: "name",
error: "Error!",
required: false,
isDropdownWithChip: true,
options: [
{
name: "Category A",
options: [
{
code: "Category A.Option A",
name: "Option A",
options: [
{ code: "Category A.Option A.Option 1", name: "Option 1" },
{ code: "Category A.Option A.Option 2", name: "Option 2" },
],
},
{
code: "Category A.Option B",
name: "Option B",
options: [
{ code: "Category A.Option B.Option 1", name: "Option 1" },
{ code: "Category A.Option B.Option 2", name: "Option 2" },
],
},
],
code: "Category A",
},
{
name: "Category B",
options: [
{ code: "Category B.Option A", name: "Option A" },
{
code: "Category B.Option B",
name: "Option B",
options: [
{ code: "Category B.Option B.Option 1", name: "Option 1" },
{ code: "Category B.Option B.Option 2", name: "Option 2" },
],
},
],
code: "Category B",
},
{
name: "Category C",
options: [{ code: "Category C.Option A", name: "Option A" }],
code: "Category C",
},
],
},
}

Selecting any parent option will automatically select all its child options.

For more information:

NestedText MultiSelect Dropdown

{
isMandatory: false,
type: "multiselectdropdown",
key: "multiselect",
label: "With Icons",
disable: false,
variant: "nestedtextmultiselect",
populators: {
name: "nestedtextmultiselect-With Icon",
optionsKey: "name",
error: "Error!",
required: false,
showIcon:true,
isDropdownWithChip:true,
options: [
{
code: "Option1",
name: "Option1",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor ",
},
{
code: "Option2",
name: "Option2",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
{
code: "Option3",
name: "Option3",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
],
},
},

For more information: