UCLA Design System

Changelog

v2.2.0 Release

October 31, 2024

Accessibility

Navigation

  • Improve navigation with Tab key and arrow keys

Features

Global

  • Refactor JavaScript and added modules

Accordion

  • JavaScript Refactor
    • Added component methods and custom event listeners

Alert

  • JavaScript Refactor
    • Added component methods and custom event listeners

Banners

  • Added Video Banner component

Carousel

  • Replace Splide with Swiper

Table

  • JavaScript Refactor

Tabs

  • JavaScript Refactor
    • Added component methods and custom event listeners

Fixes

Banners

  • Fix font size in banners

Cards

  • Fix image width not spanning if too small

Ribbon

  • Fix spacing on FireFox

Typography

  • List margin in prose

Previous Releases

April 03, 2024

Accessibility

Global

  • Improve visibility of all focus states

Alert

  • Add alt text and aria labels

Callouts

  • Ranking cite color to comply with WCAG 2.1 Contrast

Form elements

  • Add aria labels for validation states

Navigation

  • Improve arrow key navigation for primary nav

Pagination

  • Add aria label for current page

Tables

  • Add default value for aria-sort

Typography

  • Add default heading font size

Features

Global

Alert

  • Add dismiss function

Grid

  • Add responsive classes for CSS Grid
  • Add column offsets

Images & Media

  • Add class for responsive embeds

Navigation

  • Change box logo link to be a single link
    • Removed gateway link

Typography

  • Change heading font-size to use clamp()

Fixes

Accordion

  • Fix caret size

Banners

  • Fix Box Banner text box responsive width

Buttons

  • Fix active state for Tertiary Button

Footer

  • Fix department footer icon states

Header

  • Remove all underlines from links
  • Fix hamburger button from wrapping in mobile

Navigation

  • Reset navigation on widnow resize

Radio & Checkbox

  • Implement fieldsets, vertical layouts, and icons
  • Fix spacing nuances

Typography

  • Fix list spacing issues

Version 2 May 2023 with all elements rebuilt. Specific notes below.

  • Documentation added for Figma library access and usage.
  • Documentation added to specify how to use components. Note: This will eventually be moved to a website resource.
  • All components completely redesigned for consistency and accessibility standards.
  • Updated layout grid and breakpoints.
  • Addition of section spacing guidelines.
  • Introduced new type scale system.
  • Removed "molecule" graphic from components.
  • Updated image aspect ratios.
  • Redesigned icon library and addition of guidelines for consistency.
  • Added alternate header option with the UCLA box logo.
  • Updated global footer to dark blue. "Report Misconduct" link added.
  • Updated email banner.
  • Updated person card to include pronouns.
  • Updated button sizes to meet touch target standards.
  • "Tags" renamed to "Chips" with new specs.
  • Redesigned event card.
  • Removed social cards.

Original set of components released January 2021 titled "Web Components."