docs: move custom-field style variants to styling page (#4859)

Author: web-padawan

articles/components/custom-field/index.adoc

@@ -250,44 +250,4 @@ endif::[]
 --
 
 
-== Size Variants
-
-The small theme variant can be used to make Custom Field's label, helper, and error message smaller. Custom Field doesn't propagate its theme variant to its internal components. Each internal component's theme variant must be set individually.
-
-[.example]
---
-
-ifdef::lit[]
-[source,html]
-----
-include::{root}/frontend/demo/component/custom-field/custom-field-size-variants.ts[render,tags=snippet,indent=0,group=Lit]
-----
-endif::[]
-
-ifdef::flow[]
-[source,java]
-----
-include::{root}/src/main/java/com/vaadin/demo/component/customfield/MoneyField.java[tags=snippet,indent=0,group=Flow]
-----
-
-[source,java]
-----
-include::{root}/src/main/java/com/vaadin/demo/component/customfield/CustomFieldSizeVariants.java[render,tags=snippet,indent=0,group=Flow]
-----
-
-[source,java]
-----
-include::{root}/src/main/java/com/vaadin/demo/component/customfield/Money.java[tags=snippet,indent=0,group=Flow]
-----
-endif::[]
-
-ifdef::react[]
-[source,tsx]
-----
-include::{root}/frontend/demo/component/custom-field/react/custom-field-size-variants.tsx[render,tags=snippet,indent=0,group=React]
-----
-endif::[]
---
-
-
 [discussion-id]`CB7FDF39-7653-4DF0-A0C0-9C2A2EE7EDBA`

articles/components/custom-field/styling.adoc

@@ -7,6 +7,67 @@ order: 50
 ---
 = Custom Field Styling
 
+
+== Style Variants
+
+The following variants are supported:
+
+[cols="1,2,1"]
+|===
+| Variant | Description | Supported by
+
+|`small`
+|Used to make label, helper, and error message smaller
+|Lumo
+
+|`helper-above-field`
+|Used to position the helper above the field, and below the label
+|Aura, Lumo
+
+|`whitespace`
+|Adds padding below the label for wrapping components without outer margin
+|Lumo
+
+|===
+
+[.example]
+--
+
+ifdef::lit[]
+[source,html]
+----
+include::{root}/frontend/demo/component/custom-field/custom-field-size-variants.ts[render,tags=snippet,indent=0,group=Lit]
+----
+endif::[]
+
+ifdef::flow[]
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/customfield/MoneyField.java[tags=snippet,indent=0,group=Flow]
+----
+
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/customfield/CustomFieldSizeVariants.java[render,tags=snippet,indent=0,group=Flow]
+----
+
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/customfield/Money.java[tags=snippet,indent=0,group=Flow]
+----
+endif::[]
+
+ifdef::react[]
+[source,tsx]
+----
+include::{root}/frontend/demo/component/custom-field/react/custom-field-size-variants.tsx[render,tags=snippet,indent=0,group=React]
+----
+endif::[]
+--
+
+[NOTE]
+Custom Field doesn't propagate its style variant to the individual field components it wraps. Each individual component's style variant must be set individually.
+
 include::../_styling-section-intros.adoc[tag=selectors]