mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-06-19 07:03:42 +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"
/>
30 lines
532 B
SCSS
Vendored
30 lines
532 B
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
.form-kit__errors-summary {
|
|
box-sizing: border-box;
|
|
padding: var(--space-4);
|
|
border: 1px solid var(--danger);
|
|
background-color: var(--danger-low);
|
|
border-radius: var(--d-border-radius);
|
|
width: 100%;
|
|
|
|
h2 {
|
|
font-size: var(--font-0);
|
|
}
|
|
|
|
.d-icon {
|
|
color: var(--danger);
|
|
width: var(--space-5);
|
|
}
|
|
|
|
ul {
|
|
margin-block: 0;
|
|
margin-inline: var(--space-5) 0;
|
|
font-size: var(--font-down-1-rem);
|
|
|
|
a {
|
|
font-weight: bold;
|
|
padding-left: var(--space-1);
|
|
}
|
|
}
|
|
}
|
