[F] Add simple color input

Author: 1aurend

client/src/backend/containers/settings/Theme.js

@@ -90,35 +90,31 @@ export class SettingsThemeContainer extends PureComponent {
               />
             </Form.FieldGroup>
             <Form.FieldGroup label={t("settings.theme.colors_header")}>
-              <Form.TextInput
+              <Form.ColorInput
                 label={t("settings.theme.accent_color_label")}
                 name="attributes[theme][accentColor]"
-                placeholder="#52e3ac"
+                defaultValue="#52e3ac"
                 instructions={t("settings.theme.accent_color_instructions")}
-                wide
               />
-              <Form.TextInput
+              <Form.ColorInput
                 label={t("settings.theme.foreground_color_label")}
                 name="attributes[theme][headerForegroundColor]"
-                placeholder="#ffffff"
+                defaultValue="#ffffff"
                 instructions={t("settings.theme.foreground_color_instructions")}
-                wide
               />
-              <Form.TextInput
+              <Form.ColorInput
                 label={t("settings.theme.active_foreground_color_label")}
                 name="attributes[theme][headerForegroundActiveColor]"
-                placeholder="#363636"
+                defaultValue="#363636"
                 instructions={t(
                   "settings.theme.active_foreground_color_instructions"
                 )}
-                wide
               />
-              <Form.TextInput
+              <Form.ColorInput
                 label={t("settings.theme.background_color_label")}
                 name="attributes[theme][headerBackgroundColor]"
-                placeholder="#696969"
+                defaultValue="#696969"
                 instructions={t("settings.theme.background_color_instructions")}
-                wide
               />
             </Form.FieldGroup>
             <Form.FieldGroup label={t("settings.theme.typography_header")}>

client/src/global/components/form/BaseInput/index.js

@@ -91,6 +91,37 @@ export class FormBaseInput extends PureComponent {
     return props.renderValue(props.value);
   }
 
+  renderInputComponent() {
+    const { id, idForError, idForInstructions } = this.props;
+
+    const InputComponent =
+      this.context?.styleType === "secondary"
+        ? Styled.SecondaryInput
+        : Styled.PrimaryInput;
+
+    return (
+      <InputComponent
+        ref={input => {
+          this.inputElement = input;
+        }}
+        id={id}
+        name={this.props.name}
+        disabled={this.props.isDisabled}
+        type={this.props.inputType ?? this.props.type}
+        placeholder={this.props.placeholder}
+        onChange={this.props.onChange}
+        onKeyDown={e => {
+          if (this.props.onKeyDown) this.props.onKeyDown(e, this.inputElement);
+        }}
+        value={this.renderValue(this.props)}
+        aria-describedby={`${idForError || ""} ${idForInstructions || ""}`}
+        autoComplete={this.props.autoComplete}
+        defaultValue={this.props.defaultValue}
+        required={this.props.required}
+      />
+    );
+  }
+
   render() {
     const {
       id,
@@ -107,11 +138,6 @@ export class FormBaseInput extends PureComponent {
     });
     const Wrapper = buttons ? Styled.WrapperWithActions : Errorable;
 
-    const InputComponent =
-      this.context?.styleType === "secondary"
-        ? Styled.SecondaryInput
-        : Styled.PrimaryInput;
-
     return (
       <Wrapper
         className={buttons ? undefined : fieldClasses}
@@ -126,26 +152,14 @@ export class FormBaseInput extends PureComponent {
           hasInstructions={isString(instructions)}
           styleType={this.context?.styleType}
         />
-        <InputComponent
-          ref={input => {
-            this.inputElement = input;
-          }}
-          id={id}
-          name={this.props.name}
-          disabled={this.props.isDisabled}
-          type={this.props.inputType ?? this.props.type}
-          placeholder={this.props.placeholder}
-          onChange={this.props.onChange}
-          onKeyDown={e => {
-            if (this.props.onKeyDown)
-              this.props.onKeyDown(e, this.inputElement);
-          }}
-          value={this.renderValue(this.props)}
-          aria-describedby={`${idForError || ""} ${idForInstructions || ""}`}
-          autoComplete={this.props.autoComplete}
-          defaultValue={this.props.defaultValue}
-          required={this.props.required}
-        />
+        {this.props.inputType === "color" ? (
+          <span className="ColorInput-wrapper">
+            {this.renderInputComponent()}
+            <span>{this.renderValue(this.props)}</span>
+          </span>
+        ) : (
+          this.renderInputComponent()
+        )}
         {buttons && this.renderButtons(buttons)}
         {this.props.instructions && (
           <Instructions

client/src/global/components/form/ColorInput/index.js

@@ -0,0 +1,21 @@
+import { useId } from "react";
+import PropTypes from "prop-types";
+import * as Styled from "./styles";
+
+export default function ColorInput({ defaultValue, ...props }) {
+  const id = useId();
+
+  const renderValue = value => value ?? defaultValue;
+  return (
+    <Styled.ColorInput
+      inputType="color"
+      id={`color-input-${id}`}
+      idForError={`color-input-error-${id}`}
+      idForInstructions={`color-input-instructions-${id}`}
+      renderValue={renderValue}
+      {...props}
+    />
+  );
+}
+
+ColorInput.displayName = "Form.ColorInput";

client/src/global/components/form/ColorInput/styles.js

@@ -0,0 +1,21 @@
+import styled from "@emotion/styled";
+import BaseInput from "../BaseInput";
+
+export const ColorInput = styled(BaseInput)`
+  input[type="color"] {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+    cursor: pointer;
+    border: none;
+  }
+
+  span.ColorInput-wrapper {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    font-family: var(--font-family-sans);
+    padding-block-end: 8px;
+    border-bottom: 1px solid var(--input-border-color);
+  }
+`;

client/src/global/components/form/index.js

@@ -31,6 +31,7 @@ import Label from "./BaseLabel";
 import FieldWrapper from "./FieldWrapper";
 import { InputGroupPrimary, InputGroupSecondary } from "./InputGroup/styles";
 import DrawerButtons from "./DrawerButtons";
+import ColorInput from "./ColorInput";
 
 export default {
   CoverUploadPlaceholder,
@@ -65,7 +66,8 @@ export default {
   FieldWrapper,
   InputGroupPrimary,
   InputGroupSecondary,
-  DrawerButtons
+  DrawerButtons,
+  ColorInput
 };
 
 export const Unwrapped = {