Updates after Marc's feedback

Updated:

- Text Field
- Tooltip
- Dropdown Menu
- Section headers

There are a few few more open questions, which will be handled in a separate commit.

frontend/src/app/spot/components/text-field/stories/TextField.stories.mdx

@@ -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.
 
 > Example: Error state
 

frontend/src/app/spot/components/tooltip/stories/Tooltip.stories.mdx

@@ -83,7 +83,7 @@ However, due to technical limitations, there is a hard min-width of 20-rem and a
 
 The minimum width of the tooltip depends on the length of the text, and the maximum width depends on the width of the containing element.
 
-A tooltip can be multi-line if necessary (?) It is never truncated.
+A tooltip can be multi-line if necessary. It is never truncated.
 
 > Eg. A long multi-line tooltip
 

frontend/src/stories/DropdownMenu.stories.mdx

@@ -10,11 +10,14 @@ The dropdown menu is a contextual menu triggered by clicking on a dropdown butto
 
 ## Structure and Options
 
-The dropdown menu consists of a list of items, generally *menu rows*, with an optional title.
+The dropdown menu consists of a list of items, generally *menu rows* and an optional title.
 
 The title is not interactive. It serves to provide additional context, if necessary.
 
-A menu item is interactive and generally represents an action. 
+A menu item is interactive and generally represents an action. The menu item can optionally have an icon on the left side.
+
+> Example of an existing more menu that has icons next to each menu row
+
 
 ## States
 

frontend/src/stories/SectionHeaders.stories.mdx

@@ -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
 
 ## Margins and Spacing