diff --git a/docs/content/components/form/search-field/search-field-error.demo.tsx b/docs/content/components/form/search-field/search-field-error.demo.tsx deleted file mode 100644 index 76241c7f5a..0000000000 --- a/docs/content/components/form/search-field/search-field-error.demo.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { SearchField } from '@marigold/components/src/SearchField'; - -export default () => ( - -); diff --git a/docs/content/components/form/search-field/search-field-readoOnly.demo.tsx b/docs/content/components/form/search-field/search-field-readoOnly.demo.tsx deleted file mode 100644 index 41f358afa6..0000000000 --- a/docs/content/components/form/search-field/search-field-readoOnly.demo.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { SearchField } from '@marigold/components/src/SearchField'; - -export default () => ( - -); diff --git a/docs/content/components/form/search-field/search-field-req.demo.tsx b/docs/content/components/form/search-field/search-field-req.demo.tsx deleted file mode 100644 index 73d5e0f565..0000000000 --- a/docs/content/components/form/search-field/search-field-req.demo.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { SearchField } from '@marigold/components/src/SearchField'; - -export default () => ; diff --git a/docs/content/components/form/search-field/search-field.mdx b/docs/content/components/form/search-field/search-field.mdx index 09c0c30e05..eadff6ce64 100644 --- a/docs/content/components/form/search-field/search-field.mdx +++ b/docs/content/components/form/search-field/search-field.mdx @@ -4,17 +4,15 @@ caption: Component which allows user to enter and clear a search query. badge: updated --- -The `` component is a versatile UI element that enables users to search for specific information within a given context or data set. It offers a user-friendly input field specifically designed for search queries, often accompanied by a search icon or button to initiate the search action. - -`` consists of an input element, a label, and an optional clear button. `` automatically manages the labeling and relationships between the elements, and handles keyboard events. Users can press the Escape key to clear the ``, or the Enter key to trigger the `onSubmit` event. +The `` component offers a user-friendly input field specifically designed for search queries, often accompanied by a search icon or button to initiate the search action. ## Anatomy -A table is composed of a container element that organizes data into rows and columns. Each cell within the table can hold either plain text or focusable elements. If the table allows multiple row selection, the first column of each row include a checkbox for selecting that row and the first column header will contain a "select all" checkbox. +A `` consists of an input element, a label, and an optional clear button. Anatomy of table` component is a versatile UI element that enables users to search for specific information within a given context or data set. + +### Placement + +The placement of a search field plays a critical role in its effectiveness and usability. A well-positioned search field ensures users can easily find and use it, enhancing their overall experience on a website or application. + + + + + Do: Position the search field prominently + + Position the search field prominently. + + + + Don’t place the search field in an obscure location + + + Don’t place the search field in an obscure location. + + + + +### Label + +In general label should be short and precise about what is expected from the user. Avoid unnecessary instructional +verbs (doing words) in your labels and hints because it’s already implied by the input field. +Avoid placeholder text in most cases, as there’s no need for it (more about it in the next section). + + + + + Do: Use short labels + + Use short labels. + + + + Don’t use unnecessary instructional verbs + + + Don’t use unnecessary instructional verbs. + + + + +### Placeholder + +Placeholder text is a short hint displayed inside an input field before +a user enters a value. To save space, placeholder text is often used instead of a label, as shown in the first +example. +This is problematic for the following reasons: + +- Placeholder text disappears once a person starts filling in an input field, causing some to forget what the + field + was for +- Some might miss or skip fields with placeholder text, as it can look like the field has already been pre-filled. +- Placeholder text colour contrast is almost always inaccessible, as it’s very light by design. This means many + will struggle to read the label. + + + + + Do: Provide a short description of what the user will be able to search for. + + + Provide a short description of what the user will be able to search for. + + + + + Don’t use placeholder alone + + Don’t use placeholder alone. + + + ## Props -## Alternative components - ## Related -## Examples - -### Simple Search Field - -This is how a basic `` looks like. - - - -### Disabled Search Field - -If you want to implement a disabled `` you have to add the `disabled` property. - - - -### Required Search Field - -The `required` property adds an required icon to the label. - - - -### Text Field with an Error - -The example shows how to set the `error` and `errorMessage` properties. If you fill in the field correctly, it will disappear automatically. - - - -### Text Field with readOnly - - +{' '} + + + + ), + }, + { + title: 'Forms', + href: '../../recipes/form-recipes', + caption: 'Here you can find some recipes for some form components.', + icon: ( + + + + ), + }, + { + title: 'Form Fields', + href: '../../foundations/form-fields', + caption: + 'Here you can find a comprehensive guide for working with form fields.', + icon: ( + + + + ), + }, + ]} +/> diff --git a/docs/content/components/form/search-field/search-field-disabled.demo.tsx b/docs/content/components/form/search-field/searchfield-appearance.demo.tsx similarity index 52% rename from docs/content/components/form/search-field/search-field-disabled.demo.tsx rename to docs/content/components/form/search-field/searchfield-appearance.demo.tsx index 903840a341..bace6b351f 100644 --- a/docs/content/components/form/search-field/search-field-disabled.demo.tsx +++ b/docs/content/components/form/search-field/searchfield-appearance.demo.tsx @@ -1,3 +1,3 @@ import { SearchField } from '@marigold/components/src/SearchField'; -export default () => ; +export default () => ; diff --git a/docs/public/search-field/search-field-anatomy.jpg b/docs/public/search-field/search-field-anatomy.jpg new file mode 100644 index 0000000000..06aa14375d Binary files /dev/null and b/docs/public/search-field/search-field-anatomy.jpg differ diff --git a/docs/public/search-field/search-field-do-label.jpg b/docs/public/search-field/search-field-do-label.jpg new file mode 100644 index 0000000000..67cf3c40f9 Binary files /dev/null and b/docs/public/search-field/search-field-do-label.jpg differ diff --git a/docs/public/search-field/search-field-do-placeholder.jpg b/docs/public/search-field/search-field-do-placeholder.jpg new file mode 100644 index 0000000000..404b73a977 Binary files /dev/null and b/docs/public/search-field/search-field-do-placeholder.jpg differ diff --git a/docs/public/search-field/search-field-do-placement.jpg b/docs/public/search-field/search-field-do-placement.jpg new file mode 100644 index 0000000000..e768277c2a Binary files /dev/null and b/docs/public/search-field/search-field-do-placement.jpg differ diff --git a/docs/public/search-field/search-field-dont-label.jpg b/docs/public/search-field/search-field-dont-label.jpg new file mode 100644 index 0000000000..132b92e3c1 Binary files /dev/null and b/docs/public/search-field/search-field-dont-label.jpg differ diff --git a/docs/public/search-field/search-field-dont-placeholder.jpg b/docs/public/search-field/search-field-dont-placeholder.jpg new file mode 100644 index 0000000000..215cdc76f1 Binary files /dev/null and b/docs/public/search-field/search-field-dont-placeholder.jpg differ diff --git a/docs/public/search-field/search-field-dont-placement.jpg b/docs/public/search-field/search-field-dont-placement.jpg new file mode 100644 index 0000000000..7b11b8b3b9 Binary files /dev/null and b/docs/public/search-field/search-field-dont-placement.jpg differ diff --git a/packages/components/src/SearchField/SearchField.stories.tsx b/packages/components/src/SearchField/SearchField.stories.tsx index f381f7cc3d..b56f3f19d0 100644 --- a/packages/components/src/SearchField/SearchField.stories.tsx +++ b/packages/components/src/SearchField/SearchField.stories.tsx @@ -84,6 +84,7 @@ export const Controlled: Story = { onChange={setValue} required label="search field" + placeholder="Type something" /> 
           Input Value:
diff --git a/packages/components/src/SearchField/SearchField.tsx b/packages/components/src/SearchField/SearchField.tsx
index d6c676fec6..d53964f073 100644
--- a/packages/components/src/SearchField/SearchField.tsx
+++ b/packages/components/src/SearchField/SearchField.tsx
@@ -21,11 +21,6 @@ type RemovedProps =
 export interface SearchFieldProps
   extends Omit,
     Pick, 'label' | 'description' | 'errorMessage'> {
-  /**
-   * Icon element to display in the search field.
-   */
-  icon?: ReactElement;
-
   /**
    * Action element to display in the search field.
    */