New Component Proposal - Floating Action Button - Areteans

[s-thutupalli]

Overview

Title: Floating Action Button

Description:
The Float Action Button (FAB) is a versatile, page-level component designed for use in any template. It serves as a floating button that provides immediate access to actions from a constant, easily accessible location. This component can be configured with multiple items, making it ideal for quick access to info links, branding guidelines, and other day-to-day actions.
A FAB can display three to six actions in the form of a Speed Dial, ensuring that essential functions are always at your fingertips.
FAB collapsed

• The FAB is displayed in its collapsed state.

Dependencies:
Used Material UI(MUI) library for FAB development.

Configurations:

1. Icons Customizations(Boolean)
2. Purpose of the Component(Dropdown)
3. Data Page(string)

1. Icons Customizations

   Default icons : "+" & "x".

   Checkbox checked: When the "Custom Icons Required?" checkbox is checked, two input fields become visible -->

      Initial Icon: Enter the URL or Binary file name for the initial icon.
   
      Second Icon: Enter the URL or Binary file name for the second icon.
   

2. Purpose of the Component : This a dropdown with 2 options :

     Create Case Type: When the purpose is set to "Create Case Type" pls check point 3.i
   
     General Purpose: When the purpose is set to "General Purpose", a new checkbox is visible below data page pls check point 4.
   

3. Data Page: Depending on the selected purpose, a "Data Page Name" field must be provided:

     i. Create Case Type: "D_pyQuickCreate" it is a generic data page for case creation.
     ii. General Purpose: Provide the Data Page name created for this component
   
   The component fetches records, parameters, and required data from the specified Data Page.
   

4. Display Options:
   o For the "General Purpose" flow, a "Display as List" checkbox is available to configure the view of records inside the FAB.
   o The default view of records is "image". When the checkbox is checked, the records will be shown as a list.

Benefits of Using this Component in Constellation UI Applications

A Floating Action Button (FAB) performs the primary or most common action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center. This design ensures that the FAB is prominently visible and easily accessible for users to perform key actions quickly.

Enhanced User Experience:

Accessibility: A FAB makes it easy for users to access the primary action without having to navigate through menus or other UI elements.

Visibility: Its floating nature and prominent placement ensure that the primary action is always visible and easily accessible.

Consistent Design:

Uniformity: Using a reusable FAB component ensures that the design and behaviour are consistent across different parts of the application.

Styling: Centralized styling makes it easier to maintain and update the look and feel of the FAB.

Improved Code Maintainability:

Reusability: A single FAB component can be reused in multiple places, reducing code duplication.

Modularity: Encapsulating the FAB logic and styling in a component makes the codebase more modular and easier to manage.

Props and Configurations: The component can be designed to accept various props, allowing customization of the icon, colour, size, and actions.

Extensions: The FAB component can be extended with additional features like tooltips, animations, and different action states.

Attached the component code and detailed description with images below.

Floating Action Button.zip

Floating_Action_Button_Component.docx

[ricmars]

This component is not following best practices by using material UI and a custom set of icons - while the UI is slick, it will not scale if you have a lot of case types to create and it is doing double duty with the +Create action in the workportal or the quickcreate widget.

Having said that this widget could be valuable in the context of a self-service portal - I will discuss with the rest of the team if there is a value in adding this component to this repo.

[jhelmbrecht-pega]

Really cool component, has this component been tested against any of the accessibility compliances, and can it function with keyboard navigation right now?