mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-28 13:16:34 +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"
/>
53 lines
1.1 KiB
SCSS
Vendored
53 lines
1.1 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
.form-kit__control-input {
|
|
z-index: 1;
|
|
min-width: auto !important;
|
|
max-width: 100% !important;
|
|
|
|
@include default-input;
|
|
|
|
.form-kit__field.has-error & {
|
|
border-color: var(--danger);
|
|
}
|
|
|
|
&.has-prefix.has-suffix {
|
|
border-radius: 0;
|
|
}
|
|
|
|
&.has-prefix:not(.has-suffix) {
|
|
border-radius: 0 var(--d-input-border-radius) var(--d-input-border-radius) 0;
|
|
}
|
|
|
|
&.has-suffix:not(.has-prefix) {
|
|
border-radius: var(--d-input-border-radius) 0 0 var(--d-input-border-radius);
|
|
}
|
|
|
|
&-wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.form-kit__before-input,
|
|
.form-kit__after-input {
|
|
border: 1px solid var(--primary-low-mid);
|
|
padding-inline: 0.5em;
|
|
height: var(--space-9);
|
|
box-sizing: border-box;
|
|
background: var(--primary-low);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.form-kit__before-input {
|
|
margin-right: -0.25em;
|
|
border-radius: var(--d-input-border-radius) 0 0 var(--d-input-border-radius);
|
|
}
|
|
|
|
.form-kit__after-input {
|
|
margin-left: -0.25em;
|
|
border-radius: 0 var(--d-input-border-radius) var(--d-input-border-radius) 0;
|
|
}
|
