Extract checkbox CSS of FieldCheckbox for reuse

SchoofsKelvin · Dec 3, 2021 · 10cfa31 · 10cfa31
1 parent 00b52d7
commit 10cfa31
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
 }