mirror of
https://github.com/discourse/discourse.git
synced 2024-12-01 06:53:46 +08:00
2ca06ba236
This PR introduces FormKit, a component-based form library designed to simplify form creation and management. This library provides a single `Form` component, various field components, controls, validation mechanisms, and customization options. Additionally, it includes helpers to facilitate testing and writing specifications for forms.
1. **Form Component**:
- The main component that encapsulates form logic and structure.
- Yields various utilities like `Field`, `Submit`, `Alert`, etc.
**Example Usage**:
```gjs
import Form from "discourse/form";
<template>
<Form as |form|>
<form.Field
@name="username"
@title="Username"
@validation="required"
as |field|
>
<field.Input />
</form.Field>
<form.Field @name="age" @title="Age" as |field|>
<field.Input @type="number" />
</form.Field>
<form.Submit />
</Form>
</template>
```
2. **Validation**:
- Built-in validation rules such as `required`, `number`, `length`, and `url`.
- Custom validation callbacks for more complex validation logic.
**Example Usage**:
```javascript
validateUsername(name, value, data, { addError }) {
if (data.bar / 2 === value) {
addError(name, "That's not how maths work.");
}
}
```
```hbs
<form.Field @name="username" @validate={{this.validateUsername}} />
```
3. **Customization**:
- Plugin outlets for extending form functionality.
- Styling capabilities through propagated attributes.
- Custom controls with properties provided by `form` and `field`.
**Example Usage**:
```hbs
<Form class="my-form" as |form|>
<form.Field class="my-field" as |field|>
<MyCustomControl id={{field.id}} @onChange={{field.set}} />
</form.Field>
</Form>
```
4. **Helpers for Testing**:
- Test assertions for form and field validation.
**Example usage**:
```javascript
assert.form().hasErrors("the form shows errors");
assert.form().field("foo").hasValue("bar", "user has set the value");
```
- Helper for interacting with he form
**Example usage**:
```javascript
await formKit().field("foo").fillIn("bar");
```
5. **Page Object for System Specs**:
- Page objects for interacting with forms in system specs.
- Methods for submitting forms, checking alerts, and interacting with fields.
**Example Usage**:
```ruby
form = PageObjects::Components::FormKit.new(".my-form")
form.submit
expect(form).to have_an_alert("message")
```
**Field Interactions**:
```ruby
field = form.field("foo")
expect(field).to have_value("bar")
field.fill_in("bar")
```
6. **Collections handling**:
- A specific component to handle array of objects
**Example Usage**:
```gjs
<Form @data={{hash foo=(array (hash bar=1) (hash bar=2))}} as |form|>
<form.Collection @name="foo" as |collection|>
<collection.Field @name="bar" @title="Bar" as |field|>
<field.Input />
</collection.Field>
</form.Collection>
</Form>
```
211 lines
3.8 KiB
SCSS
211 lines
3.8 KiB
SCSS
// These CSS custom properties are added here instead of in variables.scss
|
|
// because variables.scss is injected into every theme CSS file
|
|
// which causes problems when overriding custom properties in themes
|
|
|
|
:root {
|
|
--topic-body-width: #{$topic-body-width};
|
|
--topic-body-width-padding: #{$topic-body-width-padding};
|
|
--topic-avatar-width: #{$topic-avatar-width};
|
|
--d-border-radius: 2px;
|
|
--d-border-radius-large: 2px;
|
|
--d-nav-pill-border-radius: var(--d-border-radius);
|
|
--d-button-border-radius: 2px;
|
|
--d-input-border-radius: 2px;
|
|
--d-content-background: initial;
|
|
--d-font-family--monospace: Consolas, Menlo, Monaco, "Lucida Console",
|
|
"Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
|
|
"Courier New", monospace;
|
|
--d-button-transition: none;
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// Base styles for HTML elements
|
|
// --------------------------------------------------
|
|
|
|
html {
|
|
color: var(--primary);
|
|
font-family: var(--font-family);
|
|
font-size: var(--base-font-size);
|
|
line-height: var(--line-height-large);
|
|
background-color: var(--secondary);
|
|
overflow-y: scroll;
|
|
direction: ltr;
|
|
|
|
&.text-size-smallest {
|
|
font-size: var(--base-font-size-smallest);
|
|
}
|
|
|
|
&.text-size-smaller {
|
|
font-size: var(--base-font-size-smaller);
|
|
}
|
|
|
|
&.text-size-larger {
|
|
font-size: var(--base-font-size-larger);
|
|
}
|
|
|
|
&.text-size-largest {
|
|
font-size: var(--base-font-size-largest);
|
|
}
|
|
}
|
|
|
|
// Links
|
|
// --------------------------------------------------
|
|
|
|
a {
|
|
color: var(--tertiary);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
&:visited {
|
|
color: var(--tertiary);
|
|
}
|
|
&:hover {
|
|
color: var(--tertiary);
|
|
}
|
|
&:active {
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
|
|
// Typography
|
|
// --------------------------------------------------
|
|
|
|
hr {
|
|
display: block;
|
|
height: 1px;
|
|
margin: 1em 0;
|
|
border: 0;
|
|
border-top: 1px solid var(--primary-low);
|
|
padding: 0;
|
|
}
|
|
|
|
// Lists
|
|
// --------------------------------------------------
|
|
|
|
ul,
|
|
ol,
|
|
dd {
|
|
margin: 1em 0 1em 1.25em;
|
|
padding: 0;
|
|
}
|
|
|
|
.cooked ul,
|
|
.cooked ol,
|
|
.cooked dd {
|
|
clear: both;
|
|
}
|
|
|
|
.cooked,
|
|
.d-editor-preview {
|
|
ul,
|
|
ol {
|
|
padding-left: 1.25em;
|
|
}
|
|
}
|
|
|
|
li,
|
|
.cooked li,
|
|
.d-editor-preview li {
|
|
> ul,
|
|
> ol {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
// Embedded content
|
|
// --------------------------------------------------
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.svg-icon {
|
|
color: inherit;
|
|
}
|
|
|
|
// Forms
|
|
// --------------------------------------------------
|
|
|
|
fieldset {
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
pre code {
|
|
overflow: auto;
|
|
-moz-tab-size: 4;
|
|
tab-size: 4;
|
|
&.lang-markdown {
|
|
white-space: pre-wrap;
|
|
}
|
|
}
|
|
|
|
// Tables
|
|
// --------------------------------------------------
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
tbody {
|
|
border-top: 3px solid var(--primary-low);
|
|
}
|
|
|
|
.topic-list-item,
|
|
tr {
|
|
border-bottom: 1px solid var(--primary-low);
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
&.highlighted {
|
|
animation: background-fade-highlight 2.5s ease-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
// https://en.wikipedia.org/wiki/Ruby_character
|
|
ruby > rt {
|
|
font-size: 72%; // ~10px with 14px base
|
|
}
|
|
|
|
// Buttons (was in normalized)
|
|
// --------------------------------------------------
|
|
|
|
button,
|
|
html input[type="button"],
|
|
input[type="reset"],
|
|
input[type="submit"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
// Inline form
|
|
// --------------------------------------------------
|
|
|
|
.inline-form {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
&.full-width {
|
|
display: flex;
|
|
}
|
|
|
|
> input[type="text"],
|
|
> input[type="search"],
|
|
> input[type="password"] {
|
|
display: inline-flex;
|
|
flex: 1;
|
|
}
|
|
|
|
> .select-kit,
|
|
> input[type="text"],
|
|
> input[type="search"],
|
|
> input[type="password"],
|
|
> label,
|
|
> .btn,
|
|
> .d-date-input {
|
|
margin-bottom: 0.5em; // for when items wrap (mobile, narrow windows)
|
|
margin-right: 0.5em;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|