material-component-library-v2

Material component library is a library of custom react components implemented according to material design 3 specification using react, typescript and tailwindcss.

Table of Contents

• Button
  • Parameters
• Fab
  • Parameters
• SegmentedButton
  • Parameters
• List
  • Parameters
• Modal
  • Parameters
• TextField
  • Parameters

Button

Common button component for UI actions.

Parameters

• props Object The properties for the button.

  • props.height string Tailwind height command to configure the height of the button. (optional, default "h-10")
  • props.borderRadius string The border radius of the button. Default is ButtonBorderEnum.full. (optional, default ButtonBorderEnum.full)
  • props.variant string? The variant of the button. This could be filled, outlined etc.
  • props.className string? Additional classes for the button.
  • props.name string? The name or label of the button.
  • props.icon string? The icon to be displayed on the button.
  • props.width string The width of the button. (optional, default "w-full")
  • props.onClick function? The function to be executed on button click.
  • props.disabled boolean Indicates whether the button is disabled. (optional, default false)

Returns JSX.Element The button component.

Fab

Floating action buttons (FABs) help people take primary actions

Note: Label is only shown in extended FAB

Type: React.FC<FabProps>

Parameters

• props Object The properties for the button.

  • props.icon string The icon to display on the button.

  • props.fabType string The type of FAB to render (optional, default FabTypeEnum.FAB)

  • props.buttonColour string Colour of the button (optional, default "")

  • props.buttonTextColour string Colour of text on the button (optional, default "")

  • props.buttonState Object Object to manage the state of the FAB

    • props.buttonState.value Object React state instance of the FAB
    • props.buttonState.updater Function React dispatch function to update FAB state

  • props.onClick Function? Function to call when the FAB is clicked (optional, default ()=>{})

  • props.label (optional, default "Extended FAB")

  • props.buttonProps ...any

Returns JSX.Element The FAB component.

SegmentedButton

Segmented buttons help people select options, switch views, or sort elements

To learn more about material design segmented button visit https://m3.material.io/components/segmented-buttons/specs

Parameters

• props Object The properties for the Segmented button.

  • props.className string? Additional classes for the button. (optional, default "")
  • props.numberOfSegments string The number of segments the button should contain. The number of buttons shown depends on the numberOfSegments passed in.* when numberOfSegments is two, only first and fifth buttons are shown.
    • when numberOfSegments is three, only first, second and fifth buttons are shown.
    • when numberOfSegments is four, only first, second, third and fifth buttons are shown.
    • when numberOfSegments is five, all buttons are shown.You need to keep this in mind when passing callbacks for each buttons (optional, default SegmentedButtonNumberOfSegmentsEnum.two)
  • props.edgeStyle string This tells how the corner of the button is going to be styled. This could be round or fully round.* when you pass in round, the edge will be slightly rounded. This uses the "lg" class in tailwindcss
    • when you pass in fully round, the edge will be fully rounded. This uses the "full" class in tailwindcss (optional, default SegmentedButtonStyleEnum.round)
  • props.activeButtonColour string The colour the active button/segment should have; defaults to the material secondary container colour token. (optional, default "bg-light-secondaryContainer")
  • props.buttonsConfiguration Object? Configuration for each segment in the button.
  • props.buttonState
  • props.buttonStateUpdater

Returns JSX.Element The segmented button component.

List

Lists are continuous, vertical indexes of text and images

Parameters

• props Object The properties for the Segmented button.

  • props.className string? Additional classes for the list

  • props.items Array<ItemDto> is the array of items to display in the list

    • props.items.id (string | number) The id for each list item. This is necessary incases where you need to reference each item in the list uniquely
    • props.items.headline string This is the main content in the list item
    • props.items.null string [overline] - An overline drawing attention to the list item
    • props.items.null string [supportingText] - Text explaining the list item
    • props.items.meta GenericType Additional information about the list item

  • props.leading string Icon to display at the beginging of each list item. Its optional and it defaults to empty string

  • props.trailing string Icon to display at the end of each list item. Its optional and it defaults to empty string

  • props.divider boolean This indicates if the list is going to be seperated by dividers

  • props.dividerStyle Object Additional information about the list item

    • props.dividerStyle.type string this describe the type of divider; values can be full-width, inset, middle-inset.* when dividerStyle type is fullWidth, the divider takes the whole width of the list item
    • props.dividerStyle.marginAfterDivider boolean this determines if there is going to be a margin after the divider or not

  • props.condition string? This describe the type of list item. it can be one-line, two-lines, three-lines (optional, default ListItemConditionEnum.oneLine)

  • props.onListItemClick function? This is an optional function to call on each list item when clicked. The list item component is going to pass the id of the item on this component to your click event handler. This can be used to handle things like deleting list item. (optional, default ()=>{})

Returns JSX.Element The List component.

Modal

Modal

Parameters

• props Object The properties for the Modal.

  • props.onHideOverlay function this is a callback function that contains logic to hide the overlay on click
  • props.children (ReactNode | Array<ReactNode>) this are the elements to display in the modal
  • props.overlayRoot string location in the dom where the modal should be displayed... its a string
  • props.backdropColour string? optional tailwindcss class to be used to style the backdrop colour. It should be passed with its opacity value e.g bg-dark-scrim/75. it defaults to black at 75% opacity (optional, default "bg-dark-scrim/75")
  • props.maxHeight string? maximum height of the modal (optional, default "max-h-[70%] sm:max-h-[60%]")
  • props.topPosition string? the position of the modal on the top side of the screen (optional, default "top-[32vh] sm:top-[30vh]")
  • props.leftPosition string? the position of the modal on the left side of the screen (optional, default "left-0 sm:left-[30%]")
  • props.width (optional, default "w-full sm:w-2/5")

TextField

This is a textfield component styled according to google's material design specification

Parameters

• props Object The properties for the TextField.

  • props.leading string? This is an optional icon to be displayed at the start of the textfield
  • props.trailing string? This is an optional icon to be displayed at the end of the textfield
  • props.supportingText string? This is an optional text that further explain the textfield
  • props.label string This specify the label of the textfield
  • props.contentType string The type of content the textfield is holding. This could be button, checkbox, date, color etc.
  • props.className string? A field to pass in additional tailwind class to still the textfield
  • props.onBlur function? Callback function to call when the textfield lose focus
  • props.onChange function? Callback function to call when the textfield content changes
  • props.state Object An object consisting a react state and the dispatch function to set the state.
  • props.width string The width of the textfield. This accept only tailwind classes (optional, default "w-full")
  • props.style
  • props.inputRef

Returns JSX.Element The Textfield component.