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:

Integration of new components
Standardization of design principles
Stability enhancements
Conversion of px to em units for scalability and accessibility
Introduction of Storybook for Component Validation
Implementation of color and text size constants
Addition of new component variants
Creation of Flutter widgets for cross-platform support

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 -

React Component
Flutter Component

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

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "With Icons",
disable: false,
populators: {
name: "dropdown-WIth Icons",
optionsKey: "name",
error: "",
required: true,
showIcon: true,
isSearchable:true,
options: [
{
code: "1",
name: "Option1",
icon: "Article",
},
{
code: "2",
name: "Option2",
icon: "Article",
},
{
code: "3",
name: "Option3",
icon: "Article",
},
],
}
}

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.

For more information: StoryBook for simple dropdown

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 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.

For more information: Storybook for nesteddropdown varinat

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:

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.

For more information: Storybook for treedropdown

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: StoryBook for nestedtext dropdown.

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: Storybook for profiledropdown

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: Storybook for profilenestedtext dropdown

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: Storybook for multiselect dropdown

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: Storybook for nested multiselect dropdown

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",
},
],
},
}

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.

For more information: Storybook for treemultiselect dropdown

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: Storybook for 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:

<InfoCard
populators={{
name: "infocardwithelements",
}}
variant="default"
text={
"Application process will take a minute to complete. It might cost around Rs.500/- to Rs.1000/- to clean your septic tank and you can expect the service to get completed in 24 hrs from the time of payment."
}
label={"Info"}
additionalElements={[
<p key="1">Additional Element 1</p>,
<img
key="2"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
alt="Additional Element 2"
/>,
<img
key="3"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
alt="Additional Element 3"
/>,
<img
key="4"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
alt="Additional Element 4"
/>,
<img
key="5"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
alt="Additional Element 5"
/>,
<img
key="6"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
alt="Additional Element 6"
/>,
<img
key="7"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
alt="Additional Element 7"
/>,
<img
key="8"
src="https://digit.org/wp-content/uploads/2023/06/Digit-Logo-1.png"
alt="Additional Element 8"
/>,
]}
inline={true}
/>

For more information: Storybook for infocard

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:

Name                              Description

controller(required)             textEditing Controller for input field

label                            label for input field

readOnly                        determines if the input field is read-only or not

isRequired                      determines if the input field is required or not

isDisabled                      indicates where the field is disabled or not

info                            boolean to show the tooltip

infoText                         customize the tooltip text

charCount                       boolean to show the char count

innerLabel                      inner label for input field

helpText                         help message to display below the text field

validations                     a list of validations can be passed

initialValue                     initial value for the field

keyBoardType                      customize keyboard type

textInputFormatter               list of filterTextInputFormatter

onTap                           a call-back function when the user taps on the field

suffixText                       a text which will be shown as a suffix

prefixText                      a text which will be shown as a prefix

suffixIcon                       an icon which will be shown as a suffix

textAreaScroll                 defines the scroll behaviour for textArea

TextAreaScroll

smart                           height will increase based on the input

vertical                        can be increased height by vertical drag

none                            height and width will not change

Configuration

Text Input Field

Usages

InputField(
  Type: InputType.text,
  label: "Text Field",
  initialValue: 'value',
  controller: TextEditingController(),
  innerLabel: 'label',
  helpText: 'help text',
  charCount: true,
);

TextArea Input Field

Usages

InputField(
  Type: InputType.textArea,
  label: "Text Area",
  controller: TextEditingController(),
  helpText: 'help text',
);

Search Input Field

Usages

InputField(
  Type: InputType.search,
  label: "Search Field",
  controller: TextEditingController(),
  helpText: 'help text',
  onSuffixTap: (value){},
);

Password Input Field

Usages

InputField(
  Type: InputType.password,
  label: "password Field",
  controller: TextEditingController(),
  helpText: 'help text',
);

Numeric Input Field

Usages

InputField(
  Type: InputType.numeric,
  label: "Numeric Field",
  controller: TextEditingController(),
  helpText: 'help text',
  initialValue: '0',
  step: 1,
);

Date Input Field

Usages

InputField(
  Type: InputType.date,
  label: "Date Field",
  controller: TextEditingController(),
  helpText: 'help text',
);

Time Input Field

Usages

InputField(
  Type: InputType.time,
  label: "Time Field",
  controller: TextEditingController(),
  helpText: 'help text',
);

Location Input Field

Usages

InputField(
  Type: InputType.location,
  label: "Location Field",
  controller: TextEditingController(),
  helpText: 'help text',
);

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:

Below are some additional parameters:

Configuration

Usages

Add the following lines of code:

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:

Name                         Description

label(string)                text displayed on the button

onPressed(voidCallBack)     A callback function, when button is pressed

type                        specify the type of button(primary or secondary)

These are some optional parameters:

PrefixIcon                  Icon to be displayed before the label text

SuffixIcon                  Icon to be displayed after the label text

isDisabled                  indicates where the button is in a disabled state

Configuration

Primary Button

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

Button(
  label: 'Primary Button',
  onPressed: () {},
  type: ButtonType.primary,
);

With suffix Icon:

Button(
  suffixIcon: Icons.add,
  label: 'Primary Button',
  onPressed: () {},
  type: ButtonType.primary,
);

With prefix Icon:

Button(
  prefixIcon: Icons.add,
  label: 'Primary Button',
  onPressed: () {},
  type: ButtonType.primary,
);

Secondary Button

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

Button(
  label: 'secondary Button',
  onPressed: () {},
  type: ButtonType.secondary,
);

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:

Button(
  label: 'tertiary Button',
  onPressed: () {},
  type: ButtonType.tertiary,
);

Link

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

Button(
  label: 'link',
  onPressed: () {},
  type: ButtonType.link,
);

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:

Name                             Description

textEditingController         controller for managing the text

onChange                      a callback when a new option is selected

items                         A list of DropdownItem representing the options

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

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:

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(),
);

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'
);