@ -59,7 +59,7 @@ An optional icon can be added to the left edge to provide additional context whe
> Example: A search bar with a icon to the left
An icon can also optionally be placed on the right edge. This arrow can provide additional hints on how the text input field will behave; for example, a right arrow might suggest that the value will be immediately submitted, or a down arrow might indicate that the text field will open a drop modal underneath it (a list of assignees, for example).
An icon can also optionally be placed on the right edge. This arrow can provide additional hints on how the text input field will behave; for example, a right arrow might suggest that the value will be immediately submitted, or a dropdown arrow might indicate that the text field will open a drop modal underneath it (a list of assignees, for example).
The right icon can also be converted to an icon-only link that allows the user to clear the field.
@ -104,7 +104,7 @@ The **Default** state indicates that a text field is ready to accept text input.
The **Focus** state has a coloured outline, the same as any focused element in OpenProject.
The **Hover** element has a darker border.
The **Hover** element has a darker border (Basic/Gray 1: #333333).
The **Disabled** state shows all elements (including icons and any placeholder or input text) in grey, and makes any interaction impossible.
@ -119,7 +119,7 @@ The **Disabled** state shows all elements (including icons and any placeholder o
</Story>
</Canvas>
The **Error** state puts a red outline around the text input. (_Note_: This state is only used when the text input is part of a _Form element_, which supplements this red outline with an message error message). The error state is usually temporary; fixing the cause of the error (via asyncronous form validation) usually allows it to revert back to the focus
The **Error** state puts a red outline around the text input. (_Note_: This state is only used when the text input is part of a _Form element_, which supplements this red outline with an message error message). The error state is usually temporary; fixing the cause of the error (via asyncronous form validation) usually allows it to revert back to the focus state.
@ -20,12 +20,12 @@ However, they can be extended with a few additional features:
**Left icon**
This icon can be added to provide context. In a files list, for example, the left icon is used to indicate to which storage provider (for example, Nextcloud) that file storage is linked.
In some parts of the application, this icon is also used to indicate open/closed state when the section header functions as an accordian (see *Behaviour*).
In some parts of the application, this icon is also used to indicate open/closed state when the section header functions as an accordion (see *Behaviour*).
*Note: Since this element is always all-caps, the baseline of the font requires the icon to be raised by a few pixels. See* Margins and Spacing *for more details.*
**Right icon**
The icon can be placed to the right of the text too, if required. This should be used sparingly.
The icon can be placed to the right of the text too, if required. It can optionally also be used as a link (in icon-only mode). This should nevertheless be used sparingly.
**Action**
This is usually a button on the far edge (by default the right edge) of the component, but can also be a link. This is used to provide additional contextual action related to that whole section (to access the home directory in Nextcloud in a new tab, for example).
@ -37,9 +37,9 @@ The entire structure can be inverted, with the action buton on the left and the
## Behaviour
The section header behaves either as a regular header (static) or as an accordian, where clicking on the entire section header will expand and collapse the content underneath.
The section header behaves either as a regular header (static) or as an accordion, where clicking on the entire section header will expand and collapse the content underneath.
> Example: "Group by" accordian, like a cost report page
> Example: "Group by" accordion, like a cost report page