Categories: BlogCanonicalUbuntu

Revisiting form elements in Vanilla Framework

Over the years, we’ve identified a number of areas for improvement when it comes to the basic building blocks of a form – inputs, buttons, etc:

  • Long-standing complaints that inputs and buttons are too similar and therefore hard to distinguish
  • “Noisiness” of long forms caused by the presence of borders around all sides of inputs and buttons

Last cycle, our proposal for updated form elements was discussed and approved, and in this iteration, we worked on implementing it in Vanilla, our front-end framework.

Before Vanilla 3.9:

Sponsored

After Vanilla 3.9:

Sponsored
  • We’ve reduced the number of borders (all around) to the minimum required to satisfy WCAG contrast ratio requirements for interactive elements
  • We’ve removed round corners from buttons and other elements, as part of a wider push to align better with the work of our Brand team
  • We’ve introduced subtle transitions when interacting with form elements

This update also affects components that build on the functionality of form elements, like our search and Filter component:

The updated style was released as part of Vanilla 3.9.0 release.

Version 3.9.0 has just been released. You can see the updated form elements in action here

Ubuntu Server Admin

Recent Posts

Ubuntu Weekly Newsletter Issue 873

Welcome to the Ubuntu Weekly Newsletter, Issue 873 for the week of December 29, 2024…

1 day ago

How to resolve WiFi Issues on Ubuntu 24.04

Have WiFi troubles on your Ubuntu 24.04 system? Don’t worry, you’re not alone. WiFi problems…

1 day ago

Remembering and thanking Steve Langasek

The following is a post from Mark Shuttleworth on the Ubuntu Discourse instance. For more…

1 day ago

How to Change Your Prompt in Bash Shell in Ubuntu

I don’t like my prompt, i want to change it. it has my username and…

2 days ago

The Silent Guardian: Why Bundler Checksums Are a Game-Changer for Your Applications

Introduction: A Fragile Trust The Ruby ecosystem relies heavily on RubyGems.org as the central platform…

3 days ago

How to Install Snipe-IT on Ubuntu 24.04

Asset management is the process of managing and maintaining a company’s assets to maximize their…

7 days ago