2022-12-10 03:33:15 +08:00
|
|
|
// 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};
|
2024-04-09 04:21:57 +08:00
|
|
|
--d-border-radius: 2px;
|
|
|
|
|
--d-border-radius-large: 2px;
|
2022-12-10 03:33:15 +08:00
|
|
|
--d-nav-pill-border-radius: var(--d-border-radius);
|
DEV: form-kit
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>
```
2024-07-17 17:59:35 +08:00
|
|
|
--d-button-border-radius: 2px;
|
|
|
|
|
--d-input-border-radius: 2px;
|
2023-09-09 00:07:04 +08:00
|
|
|
--d-content-background: initial;
|
2024-11-23 03:52:23 +08:00
|
|
|
--d-font-family--monospace: ui-monospace, "Cascadia Mono", "Segoe UI Mono",
|
|
|
|
|
"Liberation Mono", Menlo, Monaco, Consolas, monospace;
|
2024-06-21 01:51:20 +08:00
|
|
|
--d-button-transition: none;
|
2022-12-10 03:33:15 +08:00
|
|
|
}
|
|
|
|
|
|
2013-02-06 03:16:51 +08:00
|
|
|
// --------------------------------------------------
|
|
|
|
|
// Base styles for HTML elements
|
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
|
|
html {
|
2020-08-04 10:57:10 +08:00
|
|
|
color: var(--primary);
|
2022-10-12 22:05:42 +08:00
|
|
|
font-family: var(--font-family);
|
|
|
|
|
font-size: var(--base-font-size);
|
|
|
|
|
line-height: var(--line-height-large);
|
2020-08-04 10:57:10 +08:00
|
|
|
background-color: var(--secondary);
|
2013-02-06 03:16:51 +08:00
|
|
|
overflow-y: scroll;
|
2015-04-15 10:07:23 +08:00
|
|
|
direction: ltr;
|
2019-01-14 21:21:46 +08:00
|
|
|
|
2020-07-08 01:08:19 +08:00
|
|
|
&.text-size-smallest {
|
2022-10-12 22:05:42 +08:00
|
|
|
font-size: var(--base-font-size-smallest);
|
2020-07-08 01:08:19 +08:00
|
|
|
}
|
|
|
|
|
|
2019-01-17 23:30:34 +08:00
|
|
|
&.text-size-smaller {
|
2022-10-12 22:05:42 +08:00
|
|
|
font-size: var(--base-font-size-smaller);
|
2019-01-17 23:30:34 +08:00
|
|
|
}
|
|
|
|
|
|
2019-01-14 21:21:46 +08:00
|
|
|
&.text-size-larger {
|
2022-10-12 22:05:42 +08:00
|
|
|
font-size: var(--base-font-size-larger);
|
2019-01-14 21:21:46 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.text-size-largest {
|
2022-10-12 22:05:42 +08:00
|
|
|
font-size: var(--base-font-size-largest);
|
2019-01-14 21:21:46 +08:00
|
|
|
}
|
2014-07-02 22:55:43 +08:00
|
|
|
}
|
2013-02-06 03:16:51 +08:00
|
|
|
|
|
|
|
|
// Links
|
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
|
|
a {
|
2020-08-04 10:57:10 +08:00
|
|
|
color: var(--tertiary);
|
2013-02-06 03:16:51 +08:00
|
|
|
text-decoration: none;
|
2013-06-17 11:43:30 +08:00
|
|
|
cursor: pointer;
|
2013-02-06 03:16:51 +08:00
|
|
|
&:visited {
|
2020-08-04 10:57:10 +08:00
|
|
|
color: var(--tertiary);
|
2013-02-06 03:16:51 +08:00
|
|
|
}
|
|
|
|
|
&:hover {
|
2020-08-04 10:57:10 +08:00
|
|
|
color: var(--tertiary);
|
2013-02-06 03:16:51 +08:00
|
|
|
}
|
|
|
|
|
&:active {
|
2020-08-04 10:57:10 +08:00
|
|
|
color: var(--tertiary);
|
2013-02-06 03:16:51 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Typography
|
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
|
|
hr {
|
|
|
|
|
display: block;
|
|
|
|
|
height: 1px;
|
|
|
|
|
margin: 1em 0;
|
|
|
|
|
border: 0;
|
2020-08-04 10:57:10 +08:00
|
|
|
border-top: 1px solid var(--primary-low);
|
2013-02-06 03:16:51 +08:00
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Lists
|
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
|
|
ul,
|
2022-02-23 05:17:41 +08:00
|
|
|
ol,
|
2013-02-06 03:16:51 +08:00
|
|
|
dd {
|
2021-05-26 11:52:33 +08:00
|
|
|
margin: 1em 0 1em 1.25em;
|
2013-02-06 03:16:51 +08:00
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2018-06-08 17:49:31 +08:00
|
|
|
.cooked ul,
|
|
|
|
|
.cooked ol,
|
|
|
|
|
.cooked dd {
|
2014-03-28 03:36:14 +08:00
|
|
|
clear: both;
|
2014-03-16 00:01:17 +08:00
|
|
|
}
|
|
|
|
|
|
2022-02-23 05:17:41 +08:00
|
|
|
.cooked,
|
|
|
|
|
.d-editor-preview {
|
|
|
|
|
ul,
|
|
|
|
|
ol {
|
|
|
|
|
padding-left: 1.25em;
|
|
|
|
|
}
|
2017-07-26 06:24:11 +08:00
|
|
|
}
|
|
|
|
|
|
2021-05-26 11:52:33 +08:00
|
|
|
li,
|
|
|
|
|
.cooked li,
|
|
|
|
|
.d-editor-preview li {
|
2013-02-06 03:16:51 +08:00
|
|
|
> ul,
|
|
|
|
|
> ol {
|
2021-05-26 11:52:33 +08:00
|
|
|
margin: 0;
|
2013-02-06 03:16:51 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Embedded content
|
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
|
2023-12-13 22:34:29 +08:00
|
|
|
.svg-icon {
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
2013-02-06 03:16:51 +08:00
|
|
|
// Forms
|
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
|
|
fieldset {
|
|
|
|
|
margin: 0;
|
|
|
|
|
border: 0;
|
|
|
|
|
padding: 0;
|
2013-06-17 11:43:30 +08:00
|
|
|
}
|
2013-06-20 15:46:18 +08:00
|
|
|
|
|
|
|
|
pre code {
|
|
|
|
|
overflow: auto;
|
2020-05-06 09:00:40 +08:00
|
|
|
-moz-tab-size: 4;
|
2017-01-10 17:06:53 +08:00
|
|
|
tab-size: 4;
|
2020-07-09 08:50:42 +08:00
|
|
|
&.lang-markdown {
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
}
|
2013-06-20 15:46:18 +08:00
|
|
|
}
|
2014-08-26 05:41:14 +08:00
|
|
|
|
2018-05-01 08:45:49 +08:00
|
|
|
// Tables
|
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
2020-07-06 21:25:41 +08:00
|
|
|
table {
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
}
|
|
|
|
|
|
2018-05-01 08:45:49 +08:00
|
|
|
tbody {
|
2020-08-04 10:57:10 +08:00
|
|
|
border-top: 3px solid var(--primary-low);
|
2018-05-01 08:45:49 +08:00
|
|
|
}
|
|
|
|
|
|
2021-11-16 04:49:45 +08:00
|
|
|
.topic-list-item,
|
2018-05-01 08:45:49 +08:00
|
|
|
tr {
|
2020-08-04 10:57:10 +08:00
|
|
|
border-bottom: 1px solid var(--primary-low);
|
2023-09-15 05:31:43 +08:00
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
|
|
|
&.highlighted {
|
|
|
|
|
animation: background-fade-highlight 2.5s ease-out;
|
|
|
|
|
}
|
2018-06-08 17:49:31 +08:00
|
|
|
}
|
|
|
|
|
}
|
2018-08-04 01:37:08 +08:00
|
|
|
|
|
|
|
|
// https://en.wikipedia.org/wiki/Ruby_character
|
|
|
|
|
ruby > rt {
|
|
|
|
|
font-size: 72%; // ~10px with 14px base
|
|
|
|
|
}
|
2020-07-06 19:15:31 +08:00
|
|
|
|
|
|
|
|
// Buttons (was in normalized)
|
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
|
|
button,
|
|
|
|
|
html input[type="button"],
|
|
|
|
|
input[type="reset"],
|
|
|
|
|
input[type="submit"] {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
2021-09-09 23:01:56 +08:00
|
|
|
|
|
|
|
|
// Inline form
|
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
|
|
.inline-form {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
&.full-width {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
2022-02-03 20:50:24 +08:00
|
|
|
> input[type="text"],
|
2023-10-14 00:24:06 +08:00
|
|
|
> input[type="search"],
|
|
|
|
|
> input[type="password"] {
|
2021-09-09 23:01:56 +08:00
|
|
|
display: inline-flex;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
> .select-kit,
|
|
|
|
|
> input[type="text"],
|
2022-02-03 20:50:24 +08:00
|
|
|
> input[type="search"],
|
2023-10-14 00:24:06 +08:00
|
|
|
> input[type="password"],
|
2021-09-09 23:01:56 +08:00
|
|
|
> label,
|
2021-09-20 22:01:11 +08:00
|
|
|
> .btn,
|
|
|
|
|
> .d-date-input {
|
2021-09-09 23:01:56 +08:00
|
|
|
margin-bottom: 0.5em; // for when items wrap (mobile, narrow windows)
|
|
|
|
|
margin-right: 0.5em;
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-12-12 04:55:22 +08:00
|
|
|
|
|
|
|
|
// Inputs
|
|
|
|
|
// --------------------------------------------------
|
2024-12-12 07:22:00 +08:00
|
|
|
input[type="checkbox"],
|
|
|
|
|
input[type="radio"] {
|
2024-12-12 04:55:22 +08:00
|
|
|
accent-color: var(--tertiary);
|
|
|
|
|
}
|