Skip to content

Commit d3e052a

Browse files
andrew-boydandrew-boyd
committed
feat: migrate input docs to use FormKitInputDiagrams component
Replace inline FormKitInputDiagram blocks with the new FormKitInputDiagrams component across all input documentation pages including: - Text family: email, password, number, tel, url, search, month, week, time, range - Button family: button, submit - Box family: checkbox, radio - Dropdown family: dropdown, select, taglist - Complex inputs: file, transfer-list, datepicker, colorpicker, slider, rating, toggle, togglebuttons, repeater, mask - Plugins: barcode, multi-step
1 parent be3c00d commit d3e052a

31 files changed

+57
-3530
lines changed

‎3.inputs/button.md‎

Lines changed: 1 addition & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -67,67 +67,7 @@ input: "button"
6767

6868
:SectionKeysIntro
6969

70-
::FormKitInputDiagram
71-
---
72-
class: "input-diagram--button"
73-
schema: [
74-
{
75-
name: "outer",
76-
children: [
77-
{
78-
name: "messages",
79-
position: "right",
80-
children: [
81-
{
82-
name: "message",
83-
content: "Validation messages about the button.",
84-
position: "right"
85-
}
86-
]
87-
},
88-
{
89-
name: "wrapper",
90-
position: "right",
91-
children: [
92-
{
93-
name: "input",
94-
position: "left",
95-
class: "flex button button--pro",
96-
children: [
97-
{
98-
name: "prefixIcon",
99-
content: "🤟"
100-
},
101-
{
102-
name: "prefix",
103-
},
104-
{
105-
name: "label",
106-
content: "Submit application",
107-
},
108-
{
109-
name: "suffix",
110-
position: "right",
111-
},
112-
{
113-
name: "suffixIcon",
114-
position: "right",
115-
content: "🚀"
116-
},
117-
]
118-
},
119-
]
120-
},
121-
{
122-
name: "help",
123-
position: "right",
124-
content: "Click this button to submit your application. "
125-
}
126-
]
127-
}
128-
]
129-
---
130-
::
70+
:FormKitInputDiagrams
13171

13272
::ReferenceTable
13373
---

‎3.inputs/checkbox.md‎

Lines changed: 1 addition & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -120,166 +120,7 @@ The checkbox input has a different construction depending on if it's a single or
120120

121121
:SectionKeysIntro
122122

123-
### Single checkbox diagram
124-
125-
::FormKitInputDiagram
126-
---
127-
class: "input-diagram--checkbox checkbox-single"
128-
schema: [
129-
{
130-
name: "outer",
131-
position: "right",
132-
children: [
133-
{
134-
name: "wrapper",
135-
position: "right",
136-
children: [
137-
{
138-
name: "inner",
139-
children: [
140-
{
141-
name: "prefix",
142-
},
143-
{
144-
name: "input",
145-
},
146-
{
147-
name: "decorator",
148-
children: [
149-
{
150-
name: "decoratorIcon",
151-
content: "✅",
152-
}
153-
]
154-
},
155-
{
156-
name: "suffix"
157-
},
158-
]
159-
},
160-
{
161-
name: "label",
162-
content: "I would like a free t-shirt",
163-
position: "right",
164-
class: "center-vert"
165-
},
166-
]
167-
},
168-
{
169-
name: "help",
170-
content: "We will send a free-shirt if you have this box selected.",
171-
position: "right"
172-
},
173-
{
174-
name: "messages",
175-
position: "right",
176-
children: [
177-
{
178-
name: "message",
179-
content: "You must make a selection.",
180-
position: "right"
181-
}
182-
]
183-
}
184-
]
185-
}
186-
]
187-
---
188-
::
189-
190-
### Multiple checkbox diagram
191-
192-
::FormKitInputDiagram
193-
---
194-
class: "input-diagram--checkbox checkbox-multiple"
195-
schema: [
196-
{
197-
name: "outer",
198-
children: [
199-
{
200-
name: "fieldset",
201-
children: [
202-
{
203-
name: "legend",
204-
content: "Topics",
205-
class: "margin-collapse",
206-
position: "right",
207-
},
208-
{
209-
name: "help",
210-
content: "Choose the topics you`d like to learn this year.",
211-
position: "right",
212-
},
213-
{
214-
name: "options",
215-
position: "right",
216-
children: [
217-
{
218-
name: "option",
219-
position: "right",
220-
children: [
221-
{
222-
name: "wrapper",
223-
position: "right",
224-
children: [
225-
{
226-
name: "inner",
227-
children: [
228-
{
229-
name: "prefix",
230-
},
231-
{
232-
name: "input",
233-
},
234-
{
235-
name: "decorator",
236-
children: [
237-
{
238-
name: "decoratorIcon",
239-
content: "✅",
240-
}
241-
]
242-
},
243-
{
244-
name: "suffix",
245-
},
246-
]
247-
},
248-
{
249-
name: "label",
250-
content: "Gardening",
251-
position: "right",
252-
class: "margin-standard center-vert"
253-
}
254-
]
255-
},
256-
{
257-
name: "optionHelp",
258-
content: "We`ll be studying soil, plants, and seasons.",
259-
position: "right",
260-
},
261-
]
262-
}
263-
]
264-
}
265-
]
266-
},
267-
{
268-
name: "messages",
269-
position: "right",
270-
children: [
271-
{
272-
name: "message",
273-
content: "You must make a selection.",
274-
position: "right",
275-
}
276-
]
277-
}
278-
]
279-
}
280-
]
281-
---
282-
::
123+
:FormKitInputDiagrams
283124

284125
::ReferenceTable
285126
---

0 commit comments

Comments
 (0)