feat: add prefix/suffix options for boolean, number and string widgets

BREAKING_CHANGES.md

@@ -1,3 +1,7 @@
 View Filters config structure changed
 View Groups config structure changed
-`theme` props removed (use new `useTheme` hook instead)
+`theme` props removed (use new `useTheme` hook instead)
+
+
+# Typescript
+`StringOrTextField` has been split into `StringField` and `TextField`.

packages/core/dev-test/config.yml

@@ -156,6 +156,19 @@ collections:
             widget: boolean
             pattern: ['true', 'Must be true']
             required: false
+          - name: prefix
+            label: With Prefix
+            widget: boolean
+            prefix: "I'm a prefix"
+          - name: suffix
+            label: With Suffix
+            widget: boolean
+            suffix: "I'm a suffix"
+          - name: prefix_and_suffix
+            label: With Prefix and Suffix
+            widget: boolean
+            prefix: "I'm a prefix"
+            suffix: "I'm a suffix"
       - name: code
         label: Code
         file: _widgets/code.json
@@ -784,6 +797,19 @@ collections:
             widget: number
             pattern: ['[0-9]{3,}', 'Must be at least 3 digits']
             required: false
+          - name: prefix
+            label: With Prefix
+            widget: number
+            prefix: "$"
+          - name: suffix
+            label: With Suffix
+            widget: number
+            suffix: "%"
+          - name: prefix_and_suffix
+            label: With Prefix and Suffix
+            widget: number
+            prefix: "$"
+            suffix: "%"
       - name: object
         label: Object
         file: _widgets/object.json
@@ -1061,6 +1087,19 @@ collections:
             widget: string
             pattern: ['.{12,}', 'Must have at least 12 characters']
             required: false
+          - name: prefix
+            label: With Prefix
+            widget: string
+            prefix: "$"
+          - name: suffix
+            label: With Suffix
+            widget: string
+            suffix: "%"
+          - name: prefix_and_suffix
+            label: With Prefix and Suffix
+            widget: string
+            prefix: "$"
+            suffix: "%"
       - name: text
         label: Text
         file: _widgets/text.json

packages/core/dev-test/index.js

@@ -11,7 +11,7 @@ const PostPreview = ({ entry, widgetFor }) => {
   );
 };
 
-const PostPreviewCard = ({ entry, theme, hasLocalBackup, collection }) => {
+const PostPreviewCard = ({ entry, hasLocalBackup, collection }) => {
   const theme = useTheme();
   const date = new Date(entry.data.date);
 
@@ -292,7 +292,7 @@ CMS.registerShortcode('youtube', {
   toArgs: ({ src }) => {
     return [src];
   },
-  control: ({ src, onChange, theme }) => {
+  control: ({ src, onChange }) => {
     const theme = useTheme();
 
     return h('span', {}, [

packages/core/src/components/entry-editor/editor-control-pane/EditorControlPane.tsx

@@ -16,7 +16,7 @@ import type {
   Field,
   FieldsErrors,
   I18nSettings,
-  StringOrTextField,
+  StringField,
   TranslatedProps,
 } from '@staticcms/core/interface';
 
@@ -71,7 +71,7 @@ const EditorControlPane = ({
         widget: 'string',
         i18n: 'none',
         hint: ``,
-      } as StringOrTextField),
+      } as StringField),
     [collection],
   );
 

packages/core/src/interface.ts

@@ -633,6 +633,9 @@ export interface MediaField extends BaseField {
 export interface BooleanField extends BaseField {
   widget: 'boolean';
   default?: boolean;
+
+  prefix?: string;
+  suffix?: string;
 }
 
 export interface CodeField extends BaseField {
@@ -777,6 +780,9 @@ export interface NumberField extends BaseField {
   max?: number;
 
   step?: number;
+
+  prefix?: string;
+  suffix?: string;
 }
 
 export interface SelectField extends BaseField {
@@ -809,8 +815,15 @@ export interface HiddenField extends BaseField {
   default?: ValueOrNestedValue;
 }
 
-export interface StringOrTextField extends BaseField {
-  widget: 'string' | 'text';
+export interface StringField extends BaseField {
+  widget: 'string';
+  default?: string;
+  prefix?: string;
+  suffix?: string;
+}
+
+export interface TextField extends BaseField {
+  widget: 'text';
   default?: string;
 }
 
@@ -839,7 +852,8 @@ export type Field<EF extends BaseField = UnknownField> =
   | RelationField
   | SelectField
   | HiddenField
-  | StringOrTextField
+  | StringField
+  | TextField
   | UUIDField
   | EF;
 

packages/core/src/lib/util/__tests__/field.util.spec.ts

@@ -2,16 +2,16 @@ import { createMockEntry } from '@staticcms/test/data/entry.mock';
 import { isHidden } from '../field.util';
 import { I18N_FIELD_NONE } from '../../i18n';
 
-import type { StringOrTextField } from '@staticcms/core/interface';
+import type { StringField, TextField } from '@staticcms/core/interface';
 
 describe('filterEntries', () => {
-  const mockTitleField: StringOrTextField = {
+  const mockTitleField: StringField = {
     label: 'Title',
     name: 'title',
     widget: 'string',
   };
 
-  const mockUrlField: StringOrTextField = {
+  const mockUrlField: StringField = {
     label: 'URL',
     name: 'url',
     widget: 'string',
@@ -22,7 +22,7 @@ describe('filterEntries', () => {
     },
   };
 
-  const mockBodyField: StringOrTextField = {
+  const mockBodyField: TextField = {
     label: 'Body',
     name: 'body',
     widget: 'text',

packages/core/src/reducers/__tests__/entryDraft.spec.ts

@@ -2,7 +2,7 @@ import { DRAFT_CHANGE_FIELD, DRAFT_CREATE_EMPTY } from '@staticcms/core/constant
 import entryDraftReducer from '../entryDraft';
 import { createMockEntry } from '@staticcms/test/data/entry.mock';
 
-import type { I18nSettings, StringOrTextField } from '@staticcms/core/interface';
+import type { I18nSettings, StringField } from '@staticcms/core/interface';
 import type { EntryDraftState } from '../entryDraft';
 
 describe('entryDraft', () => {
@@ -145,7 +145,7 @@ describe('entryDraft', () => {
         });
 
         it('should duplicate values to other locales for singleton list', () => {
-          const field: StringOrTextField = {
+          const field: StringField = {
             widget: 'string',
             name: 'stringInput',
             i18n: 'duplicate',

packages/core/src/widgets/boolean/BooleanControl.css

@@ -0,0 +1,23 @@
+.CMS_WidgetBoolean_content {
+  @apply flex
+    gap-2
+    items-center;
+}
+
+.CMS_WidgetBoolean_prefix {
+  color: var(--text-secondary);
+
+  @apply text-sm
+    whitespace-nowrap;
+
+  line-height: 100%;
+}
+
+.CMS_WidgetBoolean_suffix {
+  color: var(--text-secondary);
+
+  @apply text-sm
+    whitespace-nowrap;
+
+  line-height: 100%;
+}

packages/core/src/widgets/boolean/BooleanControl.tsx

@@ -3,18 +3,24 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import Field from '@staticcms/core/components/common/field/Field';
 import Switch from '@staticcms/core/components/common/switch/Switch';
 import classNames from '@staticcms/core/lib/util/classNames.util';
+import { isNotEmpty } from '@staticcms/core/lib/util/string.util';
 import { generateClassNames } from '@staticcms/core/lib/util/theming.util';
 
 import type { BooleanField, WidgetControlProps } from '@staticcms/core/interface';
 import type { ChangeEvent, FC } from 'react';
 
+import './BooleanControl.css';
+
 const classes = generateClassNames('WidgetBoolean', [
   'root',
   'error',
   'required',
   'disabled',
   'for-single-list',
   'input',
+  'content',
+  'prefix',
+  'suffix',
 ]);
 
 const BooleanControl: FC<WidgetControlProps<boolean, BooleanField>> = ({
@@ -43,6 +49,9 @@ const BooleanControl: FC<WidgetControlProps<boolean, BooleanField>> = ({
     [onChange],
   );
 
+  const prefix = useMemo(() => field.prefix ?? '', [field.prefix]);
+  const suffix = useMemo(() => field.suffix ?? '', [field.suffix]);
+
   return (
     <Field
       inputRef={ref}
@@ -61,13 +70,17 @@ const BooleanControl: FC<WidgetControlProps<boolean, BooleanField>> = ({
         forSingleList && classes['for-single-list'],
       )}
     >
-      <Switch
-        ref={ref}
-        value={internalValue}
-        disabled={disabled}
-        onChange={handleChange}
-        rootClassName={classes.input}
-      />
+      <div className={classes.content}>
+        {isNotEmpty(prefix) ? <div className={classes.prefix}>{prefix}</div> : null}
+        <Switch
+          ref={ref}
+          value={internalValue}
+          disabled={disabled}
+          onChange={handleChange}
+          rootClassName={classes.input}
+        />
+        {isNotEmpty(suffix) ? <div className={classes.suffix}>{suffix}</div> : null}
+      </div>
     </Field>
   );
 };

packages/core/src/widgets/boolean/schema.ts

@@ -1,5 +1,7 @@
 export default {
   properties: {
     default: { type: 'boolean' },
+    prefix: { type: 'string' },
+    suffix: { type: 'string' },
   },
 };

packages/core/src/widgets/number/NumberControl.css

@@ -0,0 +1,35 @@
+.CMS_WidgetNumber_root {
+  & .CMS_WidgetNumber_input {
+    &.CMS_WidgetNumber_with-prefix {
+      @apply ps-0.5;
+    }
+
+    &.CMS_WidgetNumber_with-suffix {
+      @apply pe-0.5;
+    }
+  }
+}
+
+.CMS_WidgetNumber_prefix {
+  color: var(--text-secondary);
+
+  @apply ps-3
+    text-sm
+    flex
+    items-center
+    whitespace-nowrap;
+
+  line-height: 100%;
+}
+
+.CMS_WidgetNumber_suffix {
+  color: var(--text-secondary);
+
+  @apply pe-3
+    text-sm
+    flex
+    items-center
+    whitespace-nowrap;
+
+  line-height: 100%;
+}

packages/core/src/widgets/number/NumberControl.tsx

@@ -3,18 +3,25 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import Field from '@staticcms/core/components/common/field/Field';
 import TextField from '@staticcms/core/components/common/text-field/TextField';
 import classNames from '@staticcms/core/lib/util/classNames.util';
+import { isNotEmpty } from '@staticcms/core/lib/util/string.util';
 import { generateClassNames } from '@staticcms/core/lib/util/theming.util';
 
 import type { NumberField, WidgetControlProps } from '@staticcms/core/interface';
 import type { ChangeEvent, FC } from 'react';
 
-const classes = generateClassNames('WidgetNumberPreview', [
+import './NumberControl.css';
+
+const classes = generateClassNames('WidgetNumber', [
   'root',
   'error',
   'required',
   'disabled',
   'for-single-list',
   'input',
+  'with-prefix',
+  'with-suffix',
+  'prefix',
+  'suffix',
 ]);
 
 const NumberControl: FC<WidgetControlProps<string | number, NumberField>> = ({
@@ -68,6 +75,9 @@ const NumberControl: FC<WidgetControlProps<string | number, NumberField>> = ({
     return 1;
   }, [field.step, field.value_type]);
 
+  const prefix = useMemo(() => field.prefix ?? '', [field.prefix]);
+  const suffix = useMemo(() => field.suffix ?? '', [field.suffix]);
+
   return (
     <Field
       inputRef={ref}
@@ -94,7 +104,13 @@ const NumberControl: FC<WidgetControlProps<string | number, NumberField>> = ({
         step={step}
         disabled={disabled}
         onChange={handleChange}
-        inputClassName={classes.input}
+        inputClassName={classNames(
+          classes.input,
+          isNotEmpty(prefix) && classes['with-prefix'],
+          isNotEmpty(suffix) && classes['with-suffix'],
+        )}
+        startAdornment={isNotEmpty(prefix) ? <div className={classes.prefix}>{prefix}</div> : null}
+        endAdornment={isNotEmpty(suffix) ? <div className={classes.suffix}>{suffix}</div> : null}
       />
     </Field>
   );

packages/core/src/widgets/number/schema.ts

@@ -5,5 +5,7 @@ export default {
     min: { type: 'number' },
     max: { type: 'number' },
     default: { type: 'number' },
+    prefix: { type: 'string' },
+    suffix: { type: 'string' },
   },
 };