You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: contribute-docs/style-guide/ui-writing.md
-71Lines changed: 0 additions & 71 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -114,77 +114,6 @@ When referring to apps or pages in the docs, and especially in tasks and tutoria
114
114
115
115
You can adapt these patterns and the link to the search bar documentation to match your context and scenario.
116
116
117
-
## Naming
118
-
119
-
Our UIs contain a variety of elements, and it's important that you're consistent
120
-
in how you refer to them. The following screenshots and definitions can help you
121
-
choose the right word.
122
-
123
-
Remember, the best documentation explains the feature and its use case, and not
124
-
the UI element itself.
125
-
126
-
### Kibana, labeled
127
-
128
-

129
-
130
-
| Number | Definition |
131
-
|--------|------------|
132
-
| 1. |**main menu** <br> The hamburger menu that opens the top-level navigation for Kibana. <br> Avoid using _sidebar_, _navigation bar_, _side nav_, _left-hand nav_, _toolbar_. For example, _Open the main menu, then click [app name]_. <br>**apps** <br> The items you access from the main menu. Render app names in **bold** and match the capitalization in the UI. <br> Avoid using _applications_, _tabs_, _pages_, or _UI_. For example, _Open the main menu, then click **Dashboard**_. |
133
-
| 2. |**spaces** <br> Opens the **Change current space** popup, where you can select a different space, or manage existing spaces. |
134
-
| 3. |**breadcrumb** <br> The path that shows where you are in the app hierarchy. |
135
-
| 4. |**search field** <br> Enables you to search for applications and objects, such as dashboards and visualizations. |
136
-
| 5. |**toolbar** <br> Options that enable you to share, cancel unsaved changes, apply design options, save, and more. The options in the toolbar depend on the app you are using. |
137
-
| 6. |**Help** <br> Opens the **Help** popup, where you can access the documentation, ask a question, provide feedback, and open Github issues. |
138
-
| 7. |**What's new at Elastic** <br> Opens the **What's new at Elastic** popup, where you can access blogs. |
139
-
| 8. |**user menu** <br> Opens the user menu, where you can access your **Profile**, **Account & Billing**, **Preferences**, or log out. |
140
-
| 9. |**filters** <br> Specifies the filters you want to apply to the data. <br> Avoid referring to the collection of filters as the _filter bar_. |
141
-
| 10. |**query bar** <br> A text field that allows you to combine free-text search with field-based search using the Kibana Query Language (KQL). <br> Avoid using _query box_, _query field_, _query input_, and _search bar_. For example, _In the KQL query bar, enter..._. |
142
-
| 11. |**time filter** <br> Specifies the data you want to display within a specified time range. |
143
-
| 12. |**Refresh** <br> Refreshes the data that is displayed. |
144
-
145
-

146
-
147
-
| Number | Definition |
148
-
|--------|------------|
149
-
| 1. |**fields list** <br> The list of data fields that are available based on your index pattern and the time filter. <br> When referring to individual lists, use: <br> •**Available fields** list <br> •**Empty fields** list <br> •**Meta fields** list <br> When referring to the action of adding fields, use `drag x to the x…`. For example, _from the **Available fields** list, drag **agent.keyword** to the workspace_. |
150
-
| 2. |**Filter by type dropdown** <br> Specifies the filters you want to apply to the fields list. |
151
-
| 3. |**Index pattern dropdown** <br> Opens the **Index pattern** dropdown, where you can select a different index pattern. <br> In general, refer to all dropdown menus in Kibana as a _dropdown_. |
152
-
| 4. |**action menu (…)** <br> Opens a menu that allows you to add fields to the index pattern, and manage index pattern fields. <br> For example, _open the action menu (…) next to the Index pattern dropdown_. |
153
-
| 5. |**Visualization type dropdown** <br> Opens the Visualization type dropdown, where you can select a different visualization. |
154
-
| 6. |**editor toolbar menus** <br> Opens menus that allows you to customize the visualization. <br> For example, _in the editor toolbar, open the **Legend** menu_. |
155
-
| 7. |**workspace** <br> The space where you drag fields and create visualizations. <br> To describe how you add data fields to the workspace, use _drag_ instead of _drag and drop_. For example, _from the **Available fields** list, drag bytes to the workspace_. <br> To describe how you zoom in on a data set, never use _brush_. Instead, use _click and drag your cursor_. For example, _to zoom in on the data you want to view, click and drag your cursor across the bars_. |
156
-
| 8. |**Chart type menu** <br> Opens the **Chart type** menu, where you can click a different chart type for the layer. Available only for area, line, and bar charts. |
157
-
| 9. |**layer pane** <br> The layer configuration options, such as fields, functions, formula, colors, and more. |
158
-
| 10. |**Index pattern dropdown** <br> Opens the **Index pattern dropdown**, where you can select a different index pattern for the layer. |
159
-
| 11. |**Horizontal axis, Vertical axis, Break down by, etc.** <br> Refers to the field groups. <br> To be generic, use _drag fields to the layer pane_. |
160
-
| 12. |**Suggestions** <br> The alternative visualizations that **Lens** creates for your data. |
161
-
162
-
163
-
### Cloud, labeled
164
-
165
-

166
-
167
-
| UI element | Definition |
168
-
|--------|------------|
169
-
| badges | Quick facts about the instance. Avoid using _tags_ or _labels_. |
170
-
| card | Representations of each instance, showing health and some interactive features. |
171
-
| callout | Not pictured, but the page-width informative banner. Color-coded to the severity level. Refer to the [EUI callout](https://elastic.github.io/eui/#/display/callout) for more information. You can just use the severity to refer to it, such as, "Dismiss the warning..." |
172
-
| header | The top bar of Cloud; not currently in use. Stay tuned! |
173
-
| navigation menu | The primary menu for Cloud, click a top-level option to see the subtree options. Avoid using _main menu_, _side navigation_, _sidebar_, _navigation bar_, _side nav_, _left-hand nav_, _toolbar_. |
174
-
| page | Contains everything but the navigation menu and header. Avoid using _screen_. |
175
-
| section | An area of a page with a title that's usually separated by a horizontal bar. Avoid using _panel_, _area_, _pane_. |
176
-
| tab | Controls used to switch between sets of items. |
177
-
| user menu | Location of the dark mode setting and user logout. |
0 commit comments