Merge pull request #10399 from nextcloud/enh/noid/update-atomic-componets

update atomiccomponents docs

developer_manual/design/atomiccomponents.rst

@@ -6,6 +6,8 @@ Atomic components
 Buttons
 -------
 
+`Buttons Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcButton>`_.
+`Penpot buttons <https://design.penpot.app/#/view/db3839da-807b-8052-8002-576401e9a375?page-id=3f784c86-6c27-80c6-8002-6ab157b6bd27&section=interactions&index=0&share-id=11fde340-21f4-802e-8002-8d8d305e7ab5>`_
 
 Buttons are used to initiate actions in your app. This may be a primary action, or it may be used to confirm an action in a dialog, or simply be used for any major action in your app.
 
@@ -42,6 +44,9 @@ There are generally different types of buttons for different purposes:
 Action menu
 -----------
 
+`Action menu Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcActions>`_.
+`Penpot action menu <https://design.penpot.app/#/view/db3839da-807b-8052-8002-576401e9a375?page-id=3f784c86-6c27-80c6-8002-6ab157b6bd27&section=interactions&index=4&share-id=11fde340-21f4-802e-8002-8d8d305e7ab5>`_
+
 .. image:: ../images/action-menu.png
    :alt: Files action menu
 
@@ -54,7 +59,7 @@ The action menu contains commonly used actions associated with an item. Each ent
 * checkboxes to quickly toggle a state, like in Mail
 
 .. image:: ../images/action-menu-radio-button.gif
-   :alt: Radio button in action menu in Talk
+   :alt: Radio button in action menu in Files link sharing
 
 * radio buttons to select from a few options, like chat notifications in Talk
 
@@ -64,9 +69,9 @@ The action menu contains commonly used actions associated with an item. Each ent
 * new entry elements to quickly add items, like add a new mailbox in Mail
 
 .. image:: ../images/action-menu-second-level.gif
-   :alt: Second level of actions in action menu to set due date reminders in Deck
+   :alt: Second level of actions in action menu to configure custom permissions for link shares in Files
 
-* a second level of actions, like due date reminders in Deck
+* a second level of actions, like to configure custom permissions for link shares in Files
 
 Some commonly used actions in the action menu are favoriting, renaming, downloading and deleting. Delete should always be at the last position as to not be confused with other actions.
 
@@ -77,8 +82,6 @@ It is important to keep the action menu simple and its length at a minimum. Too
 
 In most cases the action menu is accessed through a 3-dot menu. In certain cases, it is better to use a specific icon instead of the generic 3-dot icon. For example in Talk a paperclip icon is used for accessing the action menu for attaching an item, and a heading icon is used in Text formatting bar for heading level selection.
 
-`Action menu Vue component <https://nextcloud-vue-components.netlify.app/#/Components/Actions>`_.
-
 For Android and iOS, the action menu is generally opened as a bottom sheet.
 
 .. _Input fields:
@@ -86,6 +89,9 @@ For Android and iOS, the action menu is generally opened as a bottom sheet.
 Input fields
 ------------
 
+`Input field Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcFields?id=ncinputfield>`_.
+`Penpot text fields <https://design.penpot.app/#/view/db3839da-807b-8052-8002-576401e9a375?page-id=3f784c86-6c27-80c6-8002-6ab157b6bd27&section=interactions&index=2&share-id=11fde340-21f4-802e-8002-8d8d305e7ab5>`_
+
 .. _Text input:
 
 Text input
@@ -104,8 +110,11 @@ Text inputs are usually used for free-form inputs. Make sure that the label for
 Dropdowns
 ^^^^^^^^^ 
 
+`Dropdown Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcSelect>`_.
+`Penpot dropdowns <https://design.penpot.app/#/view/db3839da-807b-8052-8002-576401e9a375?page-id=3f784c86-6c27-80c6-8002-6ab157b6bd27&section=interactions&index=1&share-id=11fde340-21f4-802e-8002-8d8d305e7ab5>`_
+
 .. image:: ../images/dropdown-find-as-you-type.gif
-   :alt: Dropdown menu in settings
+   :alt: Dropdown menu in Files sharing
 
 Dropdowns allow the user to select one or more items from a list. Dropdowns can have predefined options from which the user can select one or more items, as seen in Contacts for selecting the type of a phone number. If there are not too many entries, you may also think about using a set of :ref:`checkboxes and radio buttons` instead.
 
@@ -113,13 +122,13 @@ Although not always necessary, it is generally a good idea to have a default ite
 
 Another variation of the dropdown allows the user to find their preferred option by typing it in, like in Mail where the "To" field in the composer allows you to type an email address, and as you type it shows a dropdown with the results matching the input. This kind of dropdown is useful for when there are many options and the user would already know what they are looking for. It can also be a good idea to allow new inputs if there are no matches.
 
-`Dropdown Vue component <https://nextcloud-vue-components.netlify.app/#/Components/Multiselect>`_.
-
 .. _Checkboxes and radio buttons:
 
 Checkboxes and radio buttons
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
+`Checkbox and radio button Vue components <https://nextcloud-vue-components.netlify.app/#/Components/NcCheckboxRadioSwitch>`_.
+`Penpot checkboxes and radio buttons <https://design.penpot.app/#/view/db3839da-807b-8052-8002-576401e9a375?page-id=3f784c86-6c27-80c6-8002-6ab157b6bd27&section=interactions&index=5&share-id=11fde340-21f4-802e-8002-8d8d305e7ab5>`_
 
 .. image:: ../images/checkboxes-settings.png
    :alt: Checkbox in Talk settings
@@ -132,8 +141,6 @@ Checkboxes and radio buttons are very common input methods. They are most common
 
 They should have a concise label, especially if they are inside an action menu. If more explanation is needed, you can also add a subline. 
 
-`Checkbox and radio button Vue components <https://nextcloud-vue-components.netlify.app/#/Components/CheckboxRadioSwitch>`_.
-
 Pickers
 -------
 
@@ -142,6 +149,7 @@ Pickers
 Datetime picker
 ^^^^^^^^^^^^^^^
 
+`Datetime picker Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcPickers?id=ncdatetimepicker>`_.
 
 .. image:: ../images/files-date-picker.png
    :alt: Files date picker
@@ -149,13 +157,12 @@ Datetime picker
 
 A user can quickly select dates, times and date ranges using the datetime picker. Use good default dates relevant to the task at hand. For example, in the case of setting an expiration date, unless the server has something enforced as default, 1 week is a good default. 
 
-`Datetime picker Vue component <https://nextcloud-vue-components.netlify.app/#/Components/Pickers?id=datetimepicker>`_.
-
 .. _Color picker:
 
 Color picker
 ^^^^^^^^^^^^
 
+`Color picker Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcPickers?id=nccolorpicker>`_.
 
 .. image:: ../images/colour-picker.gif
    :alt: Deck color picker
@@ -163,9 +170,7 @@ Color picker
 
 For certain elements of your UI you might want to allow people to set colors. This can easily be achieved using a color picker with some predefined colors. Be cautious about using different colors in the UI. In most Nextcloud apps like Deck and Calendar, user defined colors for UI elements are used sparingly and shown as a circle next to the element they refer to. 
 
-`Color picker Vue component <https://nextcloud-vue-components.netlify.app/#/Components/Pickers?id=colorpicker>`_.
-
-In addition to these 2 pickers, there is also the `emoji picker <https://nextcloud-vue-components.netlify.app/#/Components/Pickers?id=emojipicker>`_ and the `timezone picker <https://nextcloud-vue-components.netlify.app/#/Components/Pickers?id=timezonepicker>`_ which can be also be used in your app. 
+In addition to these 2 pickers, there is also the `emoji picker <https://nextcloud-vue-components.netlify.app/#/Components/NcPickers?id=ncemojipicker>`_ and the `timezone picker <https://nextcloud-vue-components.netlify.app/#/Components/NcPickers?id=nctimezonepicker>`_ which can be also be used in your app. 
 
 .. _Tags:
 
@@ -183,6 +188,9 @@ Tags are used by users to manage their items. They can be colored for easy ident
 Modal
 -----
 
+`Modal Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcModal>`_. 
+`Penpot modals <https://design.penpot.app/#/view/db3839da-807b-8052-8002-576401e9a375?page-id=3f784c86-6c27-80c6-8002-6ab157b6bd27&section=interactions&index=12&share-id=11fde340-21f4-802e-8002-8d8d305e7ab5>`_
+
 .. image:: ../images/deck-card-modal.png
    :alt: Deck card modal
 
@@ -199,8 +207,6 @@ Examples of modals are:
 * Move or copy dialog in Files
 * the file picker in Mail and Talk
 
-`Modal Vue component <https://nextcloud-vue-components.netlify.app/#/Components/Modal>`_. 
-
 On Android and iOS, content which is in a modal would usually be shown as a full-screen overlay, like for example composing a new mail in `iOS Mail <https://developer.apple.com/documentation/messageui/mfmailcomposeviewcontroller>`_.
 
 
@@ -209,6 +215,9 @@ On Android and iOS, content which is in a modal would usually be shown as a full
 Avatar
 ------
 
+`Avatar Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcAvatar>`_.
+`Penpot avatars <https://design.penpot.app/#/view/db3839da-807b-8052-8002-576401e9a375?page-id=3f784c86-6c27-80c6-8002-6ab157b6bd27&section=interactions&index=3&share-id=11fde340-21f4-802e-8002-8d8d305e7ab5>`_
+
 .. image:: ../images/avatar-talk.gif
    :alt: Avatars in Talk
 
@@ -218,14 +227,12 @@ When using an avatar it is usually accompanied by the name of the user as well,
 
 When multiple people are working on or are assigned to the same element, like in Text, Office, a Deck card, or in the Files list for sharing, they are shown as overlapped.
 
-`Avatar Vue component <https://nextcloud-vue-components.netlify.app/#/Components/Avatar>`_.
-
-
 .. _Progress bars and meters:
 
 Progress bars and meters
 ------------------------
 
+`Progress bar Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcProgressBar>`_.
 
 .. image:: ../images/progress-bar.png
    :alt: Desktop syncing progress bar
@@ -238,41 +245,41 @@ Progress bars shows progress for a potentially lengthy process such as uploading
 
 The progress bar component is also sometimes used as a meter to visualize data as seen in the settings for Files to show the quota.
 
-`Progress bar Vue component <https://nextcloud-vue-components.netlify.app/#/Components/ProgressBar>`_.
-
 .. _User bubbles:
 
 User bubbles
 ------------
 
+`User bubble Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcUserBubble>`_.
+`Penpot user bubbles <https://design.penpot.app/#/view/db3839da-807b-8052-8002-576401e9a375?page-id=3f784c86-6c27-80c6-8002-6ab157b6bd27&section=interactions&index=6&share-id=11fde340-21f4-802e-8002-8d8d305e7ab5>`_
+
 .. image:: ../images/talk-user-bubble.png
    :alt: Talk user bubble
 
 
 When referring to a user inline in your app, a user bubble element can be used. In Talk and Comments, user bubbles are used in the content when someone mentions a user. In Mail, it is used in the header for the recipients of the message. 
 
-`User bubble Vue component <https://nextcloud-vue-components.netlify.app/#/Components/UserBubble>`_.
+.. _Counter bubbles:
 
-.. _Tooltips:
+Counter bubbles
+------------
 
-Tooltips
---------
+`Counter bubble Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcCounterBubble>`_.
+`Penpot counter bubbles <https://design.penpot.app/#/view/db3839da-807b-8052-8002-576401e9a375?page-id=3f784c86-6c27-80c6-8002-6ab157b6bd27&section=interactions&index=7&share-id=11fde340-21f4-802e-8002-8d8d305e7ab5>`_
 
-.. image:: ../images/tooltip.png
-   :alt: Tooltip in Files
+.. image:: ../images/talk-counter-bubble.png
+   :alt: Talk counter bubble
 
-
-Tooltips are small elements which appear on hover and contain information about the element. Although not necessary for every action or item on the screen, tooltips are great for providing extra information or when an element is too small for the text contained in it.
-
-Using many tooltips is not advised, and if your app does this, possibly consider instead using text labels for icons, reducing the number of actions, or if the info in the tooltip is needed at all. 
-
-`The tooltip Vue component can be found here as a directive <https://nextcloud-vue-components.netlify.app/#/Directives>`_.
+In Talk, it is used for showing which chats are unread and if you or your group is mentioned. 
 
 .. _Empty content:
 
 Empty content
 -------------
 
+`Empty content component <https://nextcloud-vue-components.netlify.app/#/Components/NcEmptyContent>`_.
+`Penpot empty content <https://design.penpot.app/#/view/db3839da-807b-8052-8002-576401e9a375?page-id=3f784c86-6c27-80c6-8002-6ab157b6bd27&section=interactions&index=10&share-id=11fde340-21f4-802e-8002-8d8d305e7ab5>`_
+
 .. image:: ../images/empty-content.png
    :alt: Bookmarks empty content
 
@@ -281,8 +288,6 @@ The empty content state provides feedback that a view is empty, e.g. a new folde
 
 Make sure that empty content views only show when the view is really empty, and not while it is loading – otherwise people will be shocked as to where their data is gone. The wording on the empty content view should be friendly and helping people out of the situation, for example in the Bookmarks app.
 
-`Empty content component <https://nextcloud-vue-components.netlify.app/#/Components/EmptyContent>`_.
-
 .. _Skeleton screens:
 
 Skeleton screens