diff --git a/apps/dev/content/primary/fields/examples/rich-text-fields.json b/apps/dev/content/primary/fields/examples/rich-text-fields.json index 3d42a5c99..796483a77 100644 --- a/apps/dev/content/primary/fields/examples/rich-text-fields.json +++ b/apps/dev/content/primary/fields/examples/rich-text-fields.json @@ -26,6 +26,16 @@ } ] }, + { + "_type": "Inner", + "_id": "35NHj0CoZZwsTXBfRwm1vB3ZsQR", + "checkbox1": true, + "checkbox2": false, + "selectNative": "optionC", + "select": "optionB", + "title": "", + "content": [] + }, { "_type": "paragraph", "textAlign": "left", @@ -48,6 +58,15 @@ ] } ] + }, + { + "_type": "Inner", + "_id": "35NHkXfiMBpbK5x09C4bD2pZOLn", + "checkbox2": true, + "selectNative": "optionB", + "select": "optionB", + "title": "Test", + "content": [] } ], "metadata": { @@ -59,4 +78,4 @@ "description": "" } } -} +} \ No newline at end of file diff --git a/apps/dev/src/schema/example/RichTextFields.tsx b/apps/dev/src/schema/example/RichTextFields.tsx index 7c7feb34a..e7d2eb6dc 100644 --- a/apps/dev/src/schema/example/RichTextFields.tsx +++ b/apps/dev/src/schema/example/RichTextFields.tsx @@ -25,6 +25,21 @@ export const RichTextFields = Config.document('Rich text fields', { fields: { checkbox1: Field.check('Checkbox 1'), checkbox2: Field.check('Checkbox 2'), + selectNative: Field.select('Select', { + options: { + optionA: 'Option A', + optionB: 'Option B', + optionC: 'Option C' + } + }), + select: Field.select('Select (native)', { + native: true, + options: { + optionA: 'Option A', + optionB: 'Option B', + optionC: 'Option C' + } + }), title: Field.text('Title'), content: Field.richText('Inner rich text', { searchable: true diff --git a/apps/dev/src/schema/example/index.ts b/apps/dev/src/schema/example/index.ts index 117b318fa..8a865bcee 100644 --- a/apps/dev/src/schema/example/index.ts +++ b/apps/dev/src/schema/example/index.ts @@ -11,5 +11,5 @@ export * from './LinkFields' export * from './ListFields' export * from './QuizExample' export * from './RichTextFields' -export * from './TabsExample' export * from './SharedFields' +export * from './TabsExample' diff --git a/src/field/select/SelectField.module.scss b/src/field/select/SelectField.module.scss index a284e07c5..582f8c0ce 100644 --- a/src/field/select/SelectField.module.scss +++ b/src/field/select/SelectField.module.scss @@ -1,3 +1,25 @@ +.native { + select { + cursor: pointer; + // appearance: none; + background: transparent; + + border-radius: var(--alinea-border-radius); + background: var(--alinea-background); + border: 1px solid var(--alinea-outline); + box-shadow: var(--alinea-fields-shadow); + padding: 9px 0 9px 14px; + text-align: left; + line-height: 1.5; + width: 100%; + + &:focus-within { + background: var(--alinea-fields-selected); + outline: 2px solid var(--alinea-fields-focus); + } + } +} + .root { position: relative; background: var(--alinea-fields); diff --git a/src/field/select/SelectField.ts b/src/field/select/SelectField.ts index f2b9197a5..200960b48 100644 --- a/src/field/select/SelectField.ts +++ b/src/field/select/SelectField.ts @@ -16,6 +16,8 @@ export interface SelectConfig extends FieldOptions { inline?: boolean /** Choose a custom placeholder (eg. 'Select an option') */ placeholder?: string + /** Display as a native select, with limited styling (usable to prevent issues in edge cases) */ + native?: boolean } export interface SelectOptions extends SelectConfig { diff --git a/src/field/select/SelectField.view.tsx b/src/field/select/SelectField.view.tsx index a98c17da4..c07414562 100644 --- a/src/field/select/SelectField.view.tsx +++ b/src/field/select/SelectField.view.tsx @@ -29,6 +29,7 @@ export function SelectInput({ field }: SelectInputProps) { const {value = null, mutator, label, options, error} = useField(field) + const {readOnly} = options const items = options.options as Record const {x, y, reference, floating, refs, strategy} = useFloating({ @@ -49,6 +50,29 @@ export function SelectInput({ ] }) + if (options.native) { + return ( + +
+ +
+
+ ) + } + return (