Contrib.social

Add Custom Rivet Component for fieldset styles for Webforms

Open on Drupal.org →
Created on 15 November 2023, 11 months ago
Updated 17 November 2023, 11 months ago

Problem/Motivation

On its own, the default Rivet fieldset styles exhibit no visual grouping of related elements; the Rivet Legend is also not styled and barely indistinguishable from a form input label; additional HTML or spacing classes are required to add separation between fieldsets.)

Proposed resolution

Implement a Custom Rivet Component called .rvt-c-fieldset that adds the standard Rivet light gray border to the fieldset and stylize it with rounded corners, and then a companion style .rvt-c-fieldset__legend that provisions a semi-bold font style to the fieldset legend text.

Add the new custom classes to most (but not all) fieldset Twig templates. There are some Twig templates that should still use the default .rvt-fieldset, such as composite fields that need to minimize extra whitespace and stylization for improved display and usability.

See codepen for more context:

https://codepen.io/jameswilson/pen/bGzoXqX

📌 Task
Status

Fixed

Version

1.0

Component

Code

Created by

🇪🇨Ecuador jwilson3

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024