From 10cfa314846b1ea5b3b861ea4b692664aa9ebc16 Mon Sep 17 00:00:00 2001
From: Kelvin Schoofs <schoofs.kelvin@gmail.com>
Date: Fri, 3 Dec 2021 18:17:07 +0100
Subject: [PATCH] Extract checkbox CSS of FieldCheckbox for reuse

---
 CHANGELOG.md                        |  2 ++
 webview/src/FieldTypes/base.tsx     |  7 +++----
 webview/src/FieldTypes/checkbox.tsx |  3 +++
 webview/src/FieldTypes/index.css    | 14 +++++++++-----
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8294183..3658ca1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,8 @@
   - `vsce` is now added as a `devDependency`, which will also result in a speedup due to Yarn caching
 - The `FieldNumber` component in the webview now doesn't always default to `22` as value
   - This component is only used for the `port` field, which now passes `22` to `FieldNumber` by default
+- Extracted checkbox CSS from `FieldCheckbox` to something generic using CSS classes to allow reuse
+  - Also added `getValueClassName(): string` to `FieldBase` to allow extra classes. Defaults to `"value"`
 
 ## v1.24.0 (2021-11-02)
 
diff --git a/webview/src/FieldTypes/base.tsx b/webview/src/FieldTypes/base.tsx
index d4ffe21..2fc7d56 100644
--- a/webview/src/FieldTypes/base.tsx
+++ b/webview/src/FieldTypes/base.tsx
@@ -62,9 +62,8 @@ export abstract class FieldBase<T, P = {}, S = {}> extends React.Component<Props
     public getLabel() {
         return this.props.label;
     }
-    protected getClassName(): string {
-        return 'Field';
-    }
+    protected getClassName(): string { return 'Field'; }
+    protected getValueClassName(): string { return 'value'; }
     public render() {
         const error = this.getError();
         const { description, label, optional, preface, postface } = this.props;
@@ -74,7 +73,7 @@ export abstract class FieldBase<T, P = {}, S = {}> extends React.Component<Props
             {description && <div className="description">{description}</div>}
             {preface}
             {error && <div className="error">{error}</div>}
-            <div className="value">
+            <div className={this.getValueClassName()}>
                 {this.renderInput()}
             </div>
             {postface}
diff --git a/webview/src/FieldTypes/checkbox.tsx b/webview/src/FieldTypes/checkbox.tsx
index d39f4cc..a9bd5d7 100644
--- a/webview/src/FieldTypes/checkbox.tsx
+++ b/webview/src/FieldTypes/checkbox.tsx
@@ -7,6 +7,9 @@ export class FieldCheckbox extends FieldBase<boolean, Props> {
     protected getClassName() {
         return super.getClassName() + ' FieldCheckbox';
     }
+    protected getValueClassName() {
+        return super.getValueClassName() + ' checkbox-box';
+    }
     public renderInput() {
         const { description } = this.props;
         return <>
diff --git a/webview/src/FieldTypes/index.css b/webview/src/FieldTypes/index.css
index 2bc9d45..76c1e38 100644
--- a/webview/src/FieldTypes/index.css
+++ b/webview/src/FieldTypes/index.css
@@ -146,18 +146,23 @@ div.FieldCheckbox > .description {
     display: none;
 }
 
-div.FieldCheckbox > div.value {
+.checkbox > .checkbox-box {
     --checkbox-size: 23px;
     max-width: none;
+    min-width: var(--checkbox-size);
     min-height: var(--checkbox-size);
 }
 
-div.FieldCheckbox > .value > .description {
+.checkbox > .checkbox-box.checkbox-small {
+    --checkbox-size: 18px;
+}
+
+.checkbox > .checkbox-box > .description {
     opacity: 0.75;
     margin-left: calc(var(--checkbox-size) + 10px);
 }
 
-div.FieldCheckbox > .value > .checkbox { 
+.checkbox > .checkbox-box > .checkbox { 
     float: left;
     height: var(--checkbox-size);
     width: var(--checkbox-size);
@@ -168,9 +173,8 @@ div.FieldCheckbox > .value > .checkbox {
     border: 1px solid var(--vscode-settings-checkboxBorder);
 }
 
-div.FieldCheckbox > .value > .checkbox.checked::before {
+.checkbox > .checkbox-box > .checkbox.checked::before {
     content: '\2713';
-    width: var(--checkbox-size);
     display: block;
     text-align: center;
 }