Elements UI Kit

Todd Reynolds

Elements UI Kit

The Elements UI Kit is composed of design and code components used for creating lists, forms, modals, and prompts intended for the iOS Platform.

This is a work in progress…

06.26.2020

Added

  • “Message”, “Mail”, and “Phone” icons.

06.15.2020

Added

  • “Search” icon

06.10.2020

Added

  • Added the ability to add options directly to OptionsBottomSheet for quick creation of menus.

Changed

  • Improved the positioning of the scroll component within ModalView.
  • Recreated a tappable version of SelectionItem as a code component.

Fixed

  • Improved the width properties on PrimaryButton for it to be able to resize better.

06.09.2020

Added

  • Added support for responsiveness in the Prompt and TextField components.

06.08.2020

Changed

  • Removed the old SelectionItem code component.

Fixed

  • Added a layout constraint for the right side of the BottomSheetMenu component’s title to prevent it from running into the close icon.
  • Fixed the TextField component to allow for event handlers on tap. In other words, it is now able to link directly to a new scene, like for a menu.

06.06.2020

Added

  • Added TextField—a static component used for designing forms, but for layout purposes only because it’s not a functioning input. Choose between Inactive, Active, and Completed states.
  • Added “Required” status to TextField component.
  • Added “Toggle” as a style option for TextField.
  • Added BottomSheetMenu component.

Changed

  • Implemented hiding of Value and Icon properties of TextField, depending on the settings of other properties.
  • Set the background color for TextField to null.
  • Changed “Status” property to “Style” in TextField component.
  • Replaced the static Icon with Framer’s standard checkbox component for the SelectItem design components.

Fixed

  • Fixed a bug in TextField in the Required status that was causing weird wrapping issues for longer labels.

06.04.2020

Changed

  • Set the overflow property to hidden for Prompt to be able to hide the bottoms of long cards when stacked.

Fixed

  • Removed code that was causing ElementsOverviewList to throw errors and not display.

06.03.2020

Added

  • ElementsOverviewList

Changed

  • Detached from master the rows showing the Elements in the ElementsContent design components.

06.02.2020

Changed

  • Updated “ModalView” with a toggle to allow for a 2-line title in the navigation bar.
  • Adjusted the Small Title in “ModalView” to allow for center truncation on long titles.

Fixed

  • Fixed text alignment and layout for list design components.
  • Removed paddingTop from the Scroll in “ModalView” that was causing truncated scrolling of the conent. Note: You will need to add padding to the top of your content (112 for default title; 152 for wrapped titles).

06.01.2020

Added

  • “Arrow Trending Down” icon
  • “Arrow Trending Up” icon

Fixed

  • Fixed the Action Label properties for the primary buttons in the Prompt component to be hidden according to the number of Actions (buttons) that are selected.

05.29.2020

Added

  • ElementsListItem (Design Component)
  • LedgerWithCategory (Design Component)
  • New Icon: “Dollar Circle”
  • NavigationBarSmallTitle
  • SceneOverviewWithScrolling
  • ElementsGrouping
  • NetWorthHome (Design Component)
  • NetWorthContent (Design Component)
  • ElementsOverview (Design Component)
  • ElementsContentFull (Design Component)
  • ElementsContentCurrent (Design Component)

Changed

  • Replaced SF Pro Text and SF Pro Display fonts with Inter in all Design Components.
  • Tweaked the background blur effect on the FABButton component.

05.28.2020

Added

  • LedgerBasic (Design Component)
  • SectionTotalRow (Design Component)
  • Ability to add additonal content to a Prompt using a child node.

Changed

  • Prompts can now have 0, 1, or 2 action buttons.
  • Background blur has been applied to both the FAB button and the Primary Button.
  • Removed references to “SF Pro Text” and “SF Pro Display” fontFamily properties, deferring to the default font (Inter?), which is close enough of a clone for me.
  • Removed the blue-tinted placeholder on the scroll in ModalView to make it easier to drop simlpe UI pieces on top of it.