form now has a style for the entire form

grid_form.scss

@@ -30,7 +30,6 @@
 	background-color: #0295f744;
 	border-radius: 25px;
   padding: 20px; 
-	grid-column: 1 / -1;
 }
 
 .form_label {
@@ -87,12 +86,19 @@
 	color: #fff;
 	font-weight: bold;
 	cursor: pointer;
-	margin: 0 auto;
+	margin: 0 auto auto auto;
 	padding: 0.75rem 1.25rem;
 	font-size: 1rem;
 	appearance: none;
 	min-height: 40px;
 }
+
+.form_submit {
+	@extend .form_button;
+	@extend .col-span-full;
+	margin: 0 auto;
+}
+
 .form_submit:hover {
 	background-color: #005fb3;
 }

src/controls/group.rs

@@ -19,7 +19,7 @@ impl<FD: FormToolData, FS: FormStyle> FormBuilder<FD, FS> {
                 .map(|r_fn| r_fn(&fs, fd))
                 .unzip();
 
-            let view = fs.group(views.collect_view());
+            let view = fs.group(views.collect_view(), group_builder.styles);
             let validation_cb = move || {
                 let mut success = true;
                 for validation in validation_cbs.iter().flatten() {

src/form_builder.rs

@@ -28,6 +28,8 @@ pub struct FormBuilder<FD: FormToolData, FS: FormStyle> {
     pub(crate) validations: Vec<Rc<dyn ValidationFn<FD>>>,
     /// The list of functions that will render the form.
     pub(crate) render_fns: Vec<Box<dyn RenderFn<FS, FD>>>,
+    /// The list of styling attributes applied on the form level
+    pub(crate) styles: Vec<FS::StylingAttributes>,
 }
 
 impl<FD: FormToolData, FS: FormStyle> FormBuilder<FD, FS> {
@@ -39,6 +41,7 @@ impl<FD: FormToolData, FS: FormStyle> FormBuilder<FD, FS> {
             fs: form_style,
             validations: Vec::new(),
             render_fns: Vec::new(),
+            styles: Vec::new(),
         }
     }
 
@@ -48,9 +51,15 @@ impl<FD: FormToolData, FS: FormStyle> FormBuilder<FD, FS> {
             fs,
             validations: Vec::new(),
             render_fns: Vec::new(),
+            styles: Vec::new(),
         }
     }
 
+    pub fn style(mut self, style: FS::StylingAttributes) -> Self {
+        self.styles.push(style);
+        self
+    }
+
     pub(crate) fn new_vanity<C: VanityControlData + Default>(
         mut self,
         builder: impl Fn(VanityControlBuilder<FD, FS, C>) -> VanityControlBuilder<FD, FS, C>,
@@ -235,7 +244,7 @@ impl<FD: FormToolData, FS: FormStyle> FormBuilder<FD, FS> {
             .map(|r_fn| r_fn(&self.fs, self.fd))
             .unzip();
 
-        let elements = self.fs.form_frame(views.into_view());
+        let elements = self.fs.form_frame(views.into_view(), self.styles);
 
         let on_submit = move |ev: SubmitEvent| {
             let mut failed = false;
@@ -269,7 +278,7 @@ impl<FD: FormToolData, FS: FormStyle> FormBuilder<FD, FS> {
             .map(|r_fn| r_fn(&self.fs, self.fd))
             .unzip();
 
-        let elements = self.fs.form_frame(views.into_view());
+        let elements = self.fs.form_frame(views.into_view(), self.styles);
 
         let on_submit = move |ev: SubmitEvent| {
             let mut failed = false;

src/styles/grid_form.rs

@@ -18,7 +18,7 @@ pub struct GridFormStyle;
 impl FormStyle for GridFormStyle {
     type StylingAttributes = GridFormStylingAttributes;
 
-    fn form_frame(&self, children: View) -> View {
+    fn form_frame(&self, children: View, _styles: Vec<Self::StylingAttributes>) -> View {
         view! { <div class="form_grid">{children}</div> }.into_view()
     }
 
@@ -113,7 +113,7 @@ impl FormStyle for GridFormStyle {
 
     fn submit(&self, control: ControlRenderData<Self, SubmitData>) -> View {
         view! {
-            <input type="submit" value=control.data.text class="col-span-full form_button"/>
+            <input type="submit" value=control.data.text class="form_submit"/>
         }
         .into_view()
     }
@@ -372,16 +372,24 @@ impl FormStyle for GridFormStyle {
         };
 
         view! {
-            <button type="button" class="form_button" on:click=on_click style:grid-column=format!("span {}", width) class="form_button">
+            <button type="button" class="form_button" on:click=on_click style:grid-column=format!("span {}", width)>
                 {control.data.text}
             </button>
         }
         .into_view()
     }
 
-    fn group(&self, inner: View) -> View {
+    // TODO: change this and form frame to use ControlRenderData
+    fn group(&self, inner: View, styles: Vec<Self::StylingAttributes>) -> View {
+        let mut width = 12;
+        for style in styles {
+            match style {
+                GridFormStylingAttributes::Width(w) => width = w,
+            }
+        }
+
         view! {
-            <div class="form_group form_grid">
+            <div class="form_group form_grid" style:grid-column=format!("span {}", width)>
                 {inner}
             </div>
         }

src/styles/mod.rs

@@ -22,7 +22,7 @@ pub trait FormStyle: Default + 'static {
     ///
     /// Do NOT wrap it in an actual `form` element; any
     /// wrapping should be done with `div` or similar elements.
-    fn form_frame(&self, children: View) -> View;
+    fn form_frame(&self, children: View, styles: Vec<Self::StylingAttributes>) -> View;
     fn heading(&self, control: ControlRenderData<Self, HeadingData>) -> View;
     fn hidden(
         &self,
@@ -87,5 +87,5 @@ pub trait FormStyle: Default + 'static {
     // TODO: test custom component
     fn custom_component(&self, view: View) -> View;
     // TODO: test group
-    fn group(&self, inner: View) -> View;
+    fn group(&self, inner: View, styles: Vec<Self::StylingAttributes>) -> View;
 }