empty_state_marianna #1453
empty_state_marianna #1453
Conversation
MariannaKononenko
requested review from
eldar-jetbrains
and removed request for
eldar-jetbrains
MariannaKononenko
requested review from
eldar-jetbrains and
OlyaB
and removed request for
OlyaB and
eldar-jetbrains
| - [A reason why the container is empty](#reason-why-empty) | ||
| - [Actions to fill in the area](#actions-to-fill-the-area) | ||
| - [A link to the corresponding help topic](#help-topic) | ||
|
|
There was a problem hiding this comment.
I really liked how the article is restructured now, thank you!
| <tr> | ||
| <td> | ||
| <format color="369650" style="bold">Correct</format> | ||
| <img src="empty_state_clear_reason.png" alt="Correct text in the empty state" /> |
There was a problem hiding this comment.
Should these pics be about the library not the SQL dialects? Otherwise, we have the same illustration in nearby sections
|
|
||
| {width=574} | ||
| Required part. An action makes it easier to understand what to start with |
There was a problem hiding this comment.
"Required part" — possibly write as "The only required part" to make it more clear that other parts are optional?
There was a problem hiding this comment.
Maybe put it above all other chapters that are not required if this one is the most important?
There was a problem hiding this comment.
Maybe even put it in a note component to emphasise the importance? Right now it's easy to miss
|
|
||
| **Tool windows:** provide a link to a help topic that explains the functionality. Add the question mark icon in the beginning. | ||
| ### Explain what to do when there is no action` |
There was a problem hiding this comment.
Extra backtick symbol at the end of the header
| <tr> | ||
| <td> | ||
| <format color="369650" style="bold">Correct</format> | ||
| <img src="empty_state_clear_reason.png" alt="The reason is clear"/> |
There was a problem hiding this comment.
The half-width pics look a bit blurry in the article, possibly need to explicitly specify the width 378px
| <control>Link to a help topic</control> | ||
| <p>In tool windows and <a anchor="empty-state-of-the-master-detail-layout">master-detail layouts</a>, | ||
| provide a link to a help topic that explains the functionality. | ||
| Add the question mark icon in the beginning.</p> |
There was a problem hiding this comment.
Possibly add a link to the question mark icon so it's obvious which one https://intellij-icons.jetbrains.design/#AllIcons-expui-general-questionMark
| <control>Context help in inline hints</control> | ||
| <p>In tables, trees, and lists, provide instructions according to the <a href="context_help.md" anchor="inline-help-text">inline text help</a> rules. | ||
| Smaller UI areas rarely require an in-depth explanation compared to complex tool windows. | ||
| A short help text should be enough, and it does not require switching contexts.</p> |
There was a problem hiding this comment.
Didn't understand why we have these two last sentences here until I carefully read again the previous part — possibly specify more explicitly that the question mark link is only for tool windows and master-details, and not for any other place.
|
|
||
| <format color="Red" style="bold">Incorrect</format> | ||
| Three or more actions would make it harder to choose what to start from. |
There was a problem hiding this comment.
We have a couple of cases where we list 3 actions, like in the Run tool window. And I think it's an ok case to be mentioned. Possibly the guideline could be "In rare cases, when you need to list all possible starting points, use the list layout."
|
|
||
| <format color="Green" style="bold">Correct</format> | ||
|
|
There was a problem hiding this comment.
There was one more pic in the old article with the master part having a list https://plugins.jetbrains.com/docs/intellij/empty-state.html#master-detail-layout.
Possibly, add the 3rd bullet point with a guideline something like "When there's content in the master part, provide a specific empty state in the detail area"?
| <img src="empty_state_verbs_incorrect.png" alt="Incorrect usage of verbs in the empty state"/> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
|
|
There was a problem hiding this comment.
Possibly return info about non-breaking spaces? https://plugins.jetbrains.com/docs/intellij/empty-state.html#sizes-and-placement
It's a small detail but makes the typography a bit more polished
|
|
||
| Make the reason text short and descriptive. See [Writing short and clear](writing_short.md). | ||
| Separate sentences in the empty state with periods, but do not put a period after the action link. | ||
| Use the ellipses at the end of the action link if this link opens a dialog or a popup which requires some input from the user. |
There was a problem hiding this comment.
Maybe add a link to the Link guideline? There all rules are covered about how to write links
|
|
||
| ## Master-detail layout | ||
| - In actions, avoid words that describe physical actions like _press_ or _click_ — they are obvious from how the link works. |
There was a problem hiding this comment.
If I understood correctly the https://plugins.jetbrains.com/docs/intellij/how-to-write-guidelines.html#word-level-recommendations, we should use to format quotes instead of using italic. In this case all the quotes should be formatted differently
No description provided.