mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-09 22:14:29 +09:00
Oleg Isonen
fb70166359
## Description - prevent form and inputs/buttons addable to Link, Button - button, form not addable to Link ## Steps for reproduction 1. click button 2. expect xyz ## Code Review - [ ] hi @kof, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 5de6) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env.example` and the `builder/env-check.js` if mandatory
59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
import { FormTextFieldIcon } from "@webstudio-is/icons/svg";
|
|
import {
|
|
defaultStates,
|
|
type PresetStyle,
|
|
type WsComponentMeta,
|
|
type WsComponentPropsMeta,
|
|
} from "@webstudio-is/react-sdk";
|
|
import { input } from "@webstudio-is/react-sdk/css-normalize";
|
|
import type { defaultTag } from "./input";
|
|
import { props } from "./__generated__/input.props";
|
|
|
|
const presetStyle = {
|
|
input: [
|
|
...input,
|
|
{
|
|
property: "display",
|
|
value: { type: "keyword", value: "block" },
|
|
},
|
|
],
|
|
} satisfies PresetStyle<typeof defaultTag>;
|
|
|
|
export const meta: WsComponentMeta = {
|
|
category: "forms",
|
|
invalidAncestors: ["Button", "Link"],
|
|
type: "control",
|
|
label: "Text Input",
|
|
description:
|
|
"A single-line text input for collecting string data from your users.",
|
|
icon: FormTextFieldIcon,
|
|
presetStyle,
|
|
order: 3,
|
|
states: [
|
|
...defaultStates,
|
|
{ selector: "::placeholder", label: "Placeholder" },
|
|
{ selector: ":valid", label: "Valid" },
|
|
{ selector: ":invalid", label: "Invalid" },
|
|
{ selector: ":required", label: "Required" },
|
|
{ selector: ":optional", label: "Optional" },
|
|
// Additional states will go into submenu
|
|
//{ selector: ":disabled", label: "Disabled" },
|
|
//{ selector: ":enabled", label: "Enabled" },
|
|
//{ selector: ":read-only", label: "Read Only" },
|
|
//{ selector: ":read-write", label: "Read Write" },
|
|
],
|
|
};
|
|
|
|
export const propsMeta: WsComponentPropsMeta = {
|
|
props,
|
|
initialProps: [
|
|
"id",
|
|
"className",
|
|
"name",
|
|
"type",
|
|
"placeholder",
|
|
"required",
|
|
"autoFocus",
|
|
],
|
|
};
|