October 22, 2024

October Update [v4]

Image of the author of the blog.
Jordi Espinosa
Founder

Introduction

Hello everyone!

Welcome to the October update. If you're new and don't know how this works—every month at Koala UI, we release an update where we incorporate new layouts, fix issues, and make improvements.

As always, I bring you this month's update.

Before starting with this month's update, I want to thank all the new users who are joining us every month. It makes us very happy to see the new websites you are launching thanks to what we are creating at Koala.

Updates to Marketing Components

Introducing Social Buttons

Social Buttons are best used in sign-up or login forms across applications and websites where users benefit from a quick, streamlined authentication process. They allow users to register or log in with an existing account from popular platforms like Google, Discord, Facebook, and Apple, eliminating the need to create a new password and speeding up the onboarding experience.

New theme Available: Introducing Moonlight

We introduce a new theme: Moonlight, a variant of dark mode with bluish tones. If you follow us, you will see more examples of how we are applying this new theme.

Introduced Register, Login and OTP Verification Pages

Dropdowns

New variants added → Opened, disabled…

Avatars

New variants added -> Status, logo, country... Also, we've made them Figma Styles so it's easier to switch between them.

Button new states

New sizes: lg, md, sm and 2 buttons added: Link & Link Secondary.

Logos

We've introduced new logo placeholders, but better crafted to look as realistic as possible. Now they no longer say "lorem ipsum", but have proper names.

Dialogs

We've fixed some issues with the dialogs and we've added real content and new variants.

Updates to the Product

Table variants

We have introduced new table variants and improved their construction.

Product Navigation

We have introduced new sidebar variants and improved their construction. From now on, there are different views like the tree view, where you can add new elements within existing elements.

Charts

We have introduced new chart variants and added their empty state variants. Additionally, we have improved the way they have been constructed in Figma.

Tiny but mighty updates

  • In the inputs, previously when removing the label, only the text was removed, leaving the required asterisk in place. Now it removes everything completely.
  • We've worked on placing more real content instead of placeholders.
  • Created new dropdowns and comboboxes.
  • Created new dropdown menus.
  • Cursor: Created new cursor -> Disabled & Typing.
  • Pagination: New variants.
  • Fixed some of those "restore components" issues. This happens when working with a large Design System, and then problems appear when updating/improving components. Also fixed some "set to default" issues.
  • Dropdowns and inputs have the same height.
  • In the marketing sections, where the class "container-large" was previously used as width, it is now set as "max-width" with a width of "fill" to improve the responsive experience.
  • Additionally, many sections are now responsive when collapsed and will adjust to the dimensions. Also, we've added breakpoint variants, so on each component you can choose which breakpoint variant you want.
  • Mac Command Shortcuts on inputs
  • Login/Dialog: New login dialogs have been added.
  • Toggle/switch: Added new sizes.
  • Charts: Added new variants, and added the empty states.
  • Improved the way tables are built in the product and we've added new variants.
  • Icons: We've added 50 new Phosphoricons.
  • Tabs: Added new tabs variants.
  • Icons: We've removed the "filled icons".
  • Tooltips: New tooltips.
  • Flags: Introduced new flags.
  • Overlays are now no longer a gradient of colors, but a gradient of opacities, so they always work regardless of the color underneath.
  • New content dividers.