UI library attributes

attrs.md

Typography

• Mifos.DesignSystem.TextStyle.Heading
• Mifos.DesignSystem.TextStyle.SubHeading
• Mifos.DesignSystem.TextStyle.MainFocusText
• Mifos.DesignSystem.TextStyle.BodyLarger
• Mifos.DesignSystem.TextStyle.Body
• Mifos.DesignSystem.TextStyle.Label
• Mifos.DesignSystem.TextStyle.Link
• Mifos.DesignSystem.TextStyle.PrimaryColorBody
• Mifos.DesignSystem.TextStyle.PrimaryColorBodyLarger
• Mifos.DesignSystem.TextStyle.BodyRed(error or potentially harmful action)

Dividers

• Mifos.DesignSystem.Components.VerticalSpacer
• Mifos.DesignSystem.Components.HorizontalSpacer
• usage

<View
    style="@style/Mifos.DesignSystem.Components.HorizontalSpacer"/>

Text fields

• Mifos.DesignSystem.Components.NoBorderTextField: can be used in places like search bar
• Mifos.DesignSystem.Components.ExposedDropdownMenuField: for choosing one out of many choices

Dialogs

• default: Mifos.DesignSystem.Components.Dialog:
• error/red(to be used for actions like logout/delete account): Mifos.DesignSystem.Components.RedDialog

Button styles

• default style
• neutral Mifos.DesignSystem.Components.Button.Neutral
• error/red Mifos.DesignSystem.Components.Button.Red
• outlined Mifos.DesignSystem.Components.Button.Outline
• text button Mifos.DesignSystem.Components.Button.Text
• icon button Mifos.DesignSystem.Components.IconButton

Card styles

• default outlined card
• filled card(Mifos.DesignSystem.Components.Cards.Filled)
• typography
  • Mifos.DesignSystem.TextStyle.CardTitle
  • Mifos.DesignSystem.TextStyle.CardSubtitle
• card icon
  • Mifos.DesignSystem.Size.ListItemsIconSize
• card inner padding
  • Mifos.DesignSystem.Spacing.CardInnerPadding
  • Mifos.DesignSystem.Spacing.CardInnerPaddingLarge
  • Mifos.DesignSystem.Spacing.CardInnerPaddingLarger
• spacing between card in list
  • Mifos.DesignSystem.Spacing.BetweenListCardItems
  • Mifos.DesignSystem.Spacing.BetweenListCardItemsHalf
• spacing inside card
  • Mifos.DesignSystem.Spacing.BetweenCardTitleSubtitle(vertical)
  • Mifos.DesignSystem.Spacing.BetweenCardImageTitle(horizontal)

Dimension values

• file has description for respective value

Images

• org.mifos.mobile.ui.ProfileImageView custom view for profile image
• Mifos.DesignSystem.Components.roundedImageWithContentPadding round image
  • padding is included because otherwise some part of usual icons is cut down on periphery