mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-04-29 02:42:45 +08:00
6a6abaf3a0
### CSS
* adjust input before/after height to use vars
* moving the `--small` / `--medium` / `--large` / `--full` width rules
to the `form-kit__container`
* undid the limit on form-error-summary as this doesn't look good in
full-width forms, essentially shifting the problem
* wrap width classes in MQ so that they remain full width on SM views
* globally override select-kit width within formkit
### `form.Container @format="full"` now applies `--full` to the outer
container
`form.Field` already adds `--full` to its root div when
`@format="full"`, but `form.Container` only applied `@format` to its
inner content div. This left the outer `.form-kit__container` at its
default width, even though `@format` is documented as supported on
Container.
### `row.Col` passes HTML attributes
`form.Row` already used `...attributes`, but `row.Col` did not — passing
`class`, `data-*`, or any HTML attribute to a Col silently dropped it.
Classes can be needed on specific cols.
### FormKit size modifiers
FormKit applied size modifiers (`--small`/`--medium`/`--large`/`--full`)
to `form-kit__container-content` and to its children. It also had a
separate `@titleFormat` and `@descriptionFormat` args, which made
label/description
widths drift apart and required scattered CSS overrides.
Changed to: Size modifiers move up to `form-kit__field` so title,
description, and content share one width, the
title/description args collapse into a single `@labelFormat` which can
override the field level modifier.
#### Example
```
<div id="control-username" class="form-kit__container form-kit__field form-kit__field-input --large" data-name="username" data-control-type="input">
<label for="d07b0c2a-42bb-45f1-881e-4ca441f10add" class="form-kit__container-title">. <span>Username</span>
<div class="form-kit__container-content --small">
</div>
</div>
```
Would result in a `--large` field/label with a `--small'` input field
(typical usecase would be a number, not text):
<img width="796" height="344" alt="CleanShot 2026-04-27 at 15 39 27@2x"
src="https://github.com/user-attachments/assets/58ffff48-99d2-4b3d-be4e-d2fb382ca89a"
/>
|
||
|---|---|---|
| .. | ||
| developer-guides | ||
| ADMIN-QUICK-START-GUIDE.md | ||
| AUTHORS.md | ||
| code-of-conduct.md | ||
| INSTALL-cloud.md | ||
| INSTALL-email.md | ||
| INSTALL.md | ||
| PLUGINS.md | ||
| SECURITY.md | ||
| TESTING.md | ||
