From f008ca5fb9d75a2db47318dc4d9d72c097c27eb9 Mon Sep 17 00:00:00 2001
From: asonix <asonix@asonix.dog>
Date: Wed, 6 Jan 2021 23:38:52 -0600
Subject: [PATCH] Enable removing a file input's group div

Always style headings inside a card
Add vertical padding to paragraphs in a card
---
 toolkit/scss/toolkit.scss            | 15 ++++++++-------
 toolkit/src/file_input.rs            | 10 ++++++++++
 toolkit/templates/file_input.rs.html | 26 ++++++++++++++++++++++++--
 3 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/toolkit/scss/toolkit.scss b/toolkit/scss/toolkit.scss
index 5086227..afa9f38 100644
--- a/toolkit/scss/toolkit.scss
+++ b/toolkit/scss/toolkit.scss
@@ -108,15 +108,15 @@ body {
     border: 1px solid $border-light;
     border-radius: 3px;
 
+    h6, h5, h4, h3, h2, h1 {
+        font-weight: 400;
+        padding: 0;
+        margin: 0;
+    }
+
     .toolkit-card--title {
         padding: 16px;
         font-size: 18px;
-
-        h6, h5, h4, h3, h2, h1 {
-            font-weight: 400;
-            padding: 0;
-            margin: 0;
-        }
     }
 
     .toolkit-card--body {
@@ -125,7 +125,7 @@ body {
         border-top: 1px solid $border-light;
 
         p {
-            padding: 0;
+            padding: 8px 0;
             margin: 0;
         }
 
@@ -144,6 +144,7 @@ body {
     position: relative;
     overflow: hidden;
     font-family: sans-serif;
+    font-size: 16px;
 
     padding: 8px 16px;
     margin: 0 4px;
diff --git a/toolkit/src/file_input.rs b/toolkit/src/file_input.rs
index ff7dd4a..d4a631c 100644
--- a/toolkit/src/file_input.rs
+++ b/toolkit/src/file_input.rs
@@ -9,6 +9,7 @@ pub struct FileInput {
     pub(crate) accept: String,
     pub(crate) classes: Vec<String>,
     pub(crate) multiple: bool,
+    pub(crate) group: bool,
 }
 
 impl FileInput {
@@ -17,6 +18,7 @@ impl FileInput {
             name: name.to_owned(),
             label: label.to_owned(),
             id: id.to_owned(),
+            group: true,
             ..Default::default()
         }
     }
@@ -27,6 +29,7 @@ impl FileInput {
             label: label.to_owned(),
             id: id.to_owned(),
             kind: ButtonKind::PrimaryOutline,
+            group: true,
             ..Default::default()
         }
     }
@@ -37,6 +40,7 @@ impl FileInput {
             label: label.to_owned(),
             id: id.to_owned(),
             kind: ButtonKind::Outline,
+            group: true,
             ..Default::default()
         }
     }
@@ -47,6 +51,7 @@ impl FileInput {
             label: label.to_owned(),
             id: id.to_owned(),
             kind: ButtonKind::Secondary,
+            group: true,
             ..Default::default()
         }
     }
@@ -66,6 +71,11 @@ impl FileInput {
         self
     }
 
+    pub fn no_group(&mut self) -> &mut Self {
+        self.group = false;
+        self
+    }
+
     pub(crate) fn class_string(&self) -> String {
         use ButtonKind::*;
 
diff --git a/toolkit/templates/file_input.rs.html b/toolkit/templates/file_input.rs.html
index 1c2cf1d..edcf155 100644
--- a/toolkit/templates/file_input.rs.html
+++ b/toolkit/templates/file_input.rs.html
@@ -2,7 +2,29 @@
 
 @(file: &FileInput)
 
-<div class="toolkit-button-group">
+@if file.group {
+    <div class="toolkit-button-group">
+        <div class="@file.class_string()">
+            <span id="@file.id">@file.label</span>
+            @if file.multiple {
+                <input
+                    type="file"
+                    class="toolkit-file--action"
+                    name="@file.name"
+                    accept="@file.accept"
+                    multiple
+                />
+            } else {
+                <input
+                    type="file"
+                    class="toolkit-file--action"
+                    name="@file.name"
+                    accept="@file.accept"
+                />
+            }
+        </div>
+    </div>
+} else {
     <div class="@file.class_string()">
         <span id="@file.id">@file.label</span>
         @if file.multiple {
@@ -22,4 +44,4 @@
             />
         }
     </div>
-</div>
+}