Merge pull request #1853 from owncloud/fix-avatar-icons

Fix icon usage after switch to Remix icons
owncloud · Jan 3, 2022 · 6eb810c · 6eb810c
2 parents cc79d45 + dbd2052
commit 6eb810c
Show file tree

Hide file tree

Showing 16 changed files with 45 additions and 33 deletions.
diff --git a/changelog/unreleased/change-use-remixicons b/changelog/unreleased/change-use-remixicons
@@ -4,4 +4,5 @@ We've switched the iconset to remixicons to
 fit the new design.
 
 https://github.com/owncloud/owncloud-design-system/pull/1826
+https://github.com/owncloud/owncloud-design-system/pull/1853
 https://github.com/owncloud/web/issues/6100
diff --git a/docs/components/status/Components.vue b/docs/components/status/Components.vue
@@ -2,19 +2,19 @@
   <div class="component-status">
     <ul class="status-list">
       <li>
-        <oc-icon name="ready" variation="success" />
+        <oc-icon name="checkbox-circle" variation="success" />
         <p>Ready</p>
       </li>
       <li>
-        <oc-icon name="review" variation="warning" />
+        <oc-icon name="todo" variation="warning" />
         <p>Under review</p>
       </li>
       <li>
-        <oc-icon name="deprecated" variation="danger" />
+        <oc-icon name="alert" variation="danger" />
         <p>Deprecated</p>
       </li>
       <li>
-        <oc-icon name="prototype" />
+        <oc-icon name="code-box" />
         <p>Prototype</p>
       </li>
       <li>
@@ -43,18 +43,18 @@
           </td>
           <td v-else>N/A</td>
           <td v-if="component.status">
-            <oc-icon v-if="component.status === 'ready'" name="ready" variation="success" />
             <oc-icon
-              v-if="component.status === 'under-review' || component.status === 'review'"
-              name="review"
-              variation="warning"
+              v-if="component.status === 'ready'"
+              name="checkbox-circle"
+              variation="success"
             />
-            <oc-icon v-if="component.status === 'prototype'" name="prototype" variation="passive" />
             <oc-icon
-              v-if="component.status === 'deprecated'"
-              name="deprecated"
-              variation="danger"
+              v-if="component.status === 'under-review' || component.status === 'review'"
+              name="todo"
+              variation="warning"
             />
+            <oc-icon v-if="component.status === 'prototype'" name="code-box" variation="passive" />
+            <oc-icon v-if="component.status === 'deprecated'" name="alert" variation="danger" />
           </td>
           <td v-else>—</td>
         </tr>

diff --git a/src/components/atoms/OcAvatarItem/OcAvatarItem.vue b/src/components/atoms/OcAvatarItem/OcAvatarItem.vue
@@ -8,7 +8,7 @@
     :role="accessibleLabel === '' ? null : 'img'"
     :data-test-item-name="name"
   >
-    <oc-icon v-if="hasIcon" :name="icon" :size="iconSize" />
+    <oc-icon v-if="hasIcon" :name="icon" :size="iconSize" :fill-type="iconFillType" />
   </span>
 </template>
 
@@ -42,6 +42,14 @@ export default {
       required: false,
       default: "var(--oc-color-text-inverse)",
     },
+    /**
+     * Fill-type that should be used for the icon
+     */
+    iconFillType: {
+      type: String,
+      required: false,
+      default: "fill",
+    },
     /**
      * Background color that should be used for the avatar. If empty
      * a random color will be picked

diff --git a/src/components/atoms/OcButton/OcButton.vue b/src/components/atoms/OcButton/OcButton.vue
@@ -509,15 +509,15 @@ Every button has to have an accessible name. It cannot be provided by a text bet
   </h3>
   <div class="uk-flex">
     <oc-button class="oc-mr-s">
-      <oc-icon name="home" />
+      <oc-icon name="home-2" />
       Home
     </oc-button>
     <oc-button variation="primary" class="oc-mr-s">
       Select
-      <oc-icon name="expand_more" />
+      <oc-icon name="arrow-drop-down" fill-type="line" />
     </oc-button>
     <oc-button variation="primary" aria-label="Upload a file">
-      <oc-icon name="cloud_upload" />
+      <oc-icon name="upload-cloud-2" fill-type="line" />
     </oc-button>
   </div>
 
@@ -553,11 +553,11 @@ Every button has to have an accessible name. It cannot be provided by a text bet
         <oc-td v-for="appearance in appearances" :class="{ 'oc-background-brand': variation.title === 'inverse' }" class="oc-p-m">
           <oc-button :variation="variation.title" :appearance="appearance" class="oc-mb-s">
             {{ variation.title }}
-            <oc-icon name="home" />
+            <oc-icon name="home-2" />
           </oc-button>
           <oc-button :variation="variation.title" :appearance="appearance" disabled>
             {{ variation.title }}
-            <oc-icon name="home" />
+            <oc-icon name="home-2" />
           </oc-button>
         </oc-td>
       </oc-tr>

diff --git a/src/components/atoms/OcGrid/OcGrid.vue b/src/components/atoms/OcGrid/OcGrid.vue
@@ -120,7 +120,7 @@ export default {
     <div class="uk-width-auto">
       <div class="uk-button-group">
         <oc-button text="Nothing">Nothing</oc-button>
-        <oc-button id="my_drop_1"><oc-icon name="filter_list" /></oc-button>
+        <oc-button id="my_drop_1"><oc-icon name="list-settings" fill-type="line" /></oc-button>
       </div>
     </div>
   </oc-grid>

diff --git a/src/components/atoms/OcTag/OcTag.vue b/src/components/atoms/OcTag/OcTag.vue
@@ -65,7 +65,7 @@ export default {
   border-radius: 7px;
   box-sizing: border-box;
   color: var(--oc-color-text-muted);
-  display: flex;
+  display: inline-flex;
   font-size: 0.875rem;
   gap: var(--oc-space-xsmall);
   min-height: $oc-size-icon-default + (2 * $oc-space-xsmall) + 2px;
@@ -103,7 +103,7 @@ Component to display various information.
 ```js
 <oc-grid>
   <oc-tag>
-    <oc-icon name="link" />
+    <oc-icon name="links" />
     Shared via link
   </oc-tag>
 </oc-grid>
@@ -121,7 +121,7 @@ The tag component can be rendered as a different element if desired. You can spe
   </div>
   <div>
     <oc-tag type="a">
-      <oc-icon name="link" />
+      <oc-icon name="links" />
       Shared via link
     </oc-tag>
   </div>

diff --git a/src/components/molecules/OcAccordionItem/OcAccordionItem.vue b/src/components/molecules/OcAccordionItem/OcAccordionItem.vue
@@ -17,7 +17,8 @@
             <span class="uk-width-expand oc-accordion-title-text" v-text="title" />
             <span class="oc-ml-xs oc-icon-l">
               <oc-icon
-                name="expand_more"
+                name="arrow-drop-down"
+                fill-type="line"
                 class="oc-accordion-title-arrow-icon"
                 :class="{ rotate: expanded }"
                 size="large"

diff --git a/src/components/molecules/OcAlert/OcAlert.vue b/src/components/molecules/OcAlert/OcAlert.vue
@@ -117,7 +117,7 @@ export default {
     This is a plain alert-box.
   </oc-alert>
   <oc-alert variation="primary">
-    <oc-icon name="info" variation="inverse" class="uk-float-left oc-mr-s" />
+    <oc-icon name="information" variation="inverse" class="uk-float-left oc-mr-s" />
     I am nice and blue and have an icon
   </oc-alert>
   <oc-alert variation="success">

diff --git a/src/components/molecules/OcAvatarFederated/OcAvatarFederated.vue b/src/components/molecules/OcAvatarFederated/OcAvatarFederated.vue
@@ -2,7 +2,8 @@
   <oc-avatar-item
     :width="width"
     :icon-size="iconSize"
-    icon="filter_drama"
+    icon="cloud"
+    icon-fill-type="line"
     icon-color="#5AAB9F"
     :name="name"
     :accessible-label="accessibleLabel"

diff --git a/src/components/molecules/OcAvatarGuest/OcAvatarGuest.vue b/src/components/molecules/OcAvatarGuest/OcAvatarGuest.vue
@@ -2,7 +2,8 @@
   <oc-avatar-item
     :width="width"
     :icon-size="iconSize"
-    icon="user_remote"
+    icon="global"
+    icon-fill-type="line"
     icon-color="#D78841"
     :name="name"
     :accessible-label="accessibleLabel"

diff --git a/src/components/molecules/OcAvatarLink/OcAvatarLink.vue b/src/components/molecules/OcAvatarLink/OcAvatarLink.vue
@@ -2,7 +2,7 @@
   <oc-avatar-item
     :width="width"
     :icon-size="iconSize"
-    icon="link"
+    icon="links"
     :name="name"
     :accessible-label="accessibleLabel"
   />

diff --git a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
@@ -21,7 +21,7 @@
             :aria-label="contextMenuLabel"
             appearance="raw"
           >
-            <oc-icon name="more_vert" />
+            <oc-icon name="arrow-drop-down" fill-type="line" />
           </oc-button>
           <oc-drop
             drop-id="oc-breadcrumb-contextmenu"

diff --git a/src/components/molecules/OcNotificationMessage/OcNotificationMessage.vue b/src/components/molecules/OcNotificationMessage/OcNotificationMessage.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-alert oc-notification-message" :class="classes">
-    <oc-icon :variation="iconVariation" size="large" name="info" class="oc-mr-s" />
+    <oc-icon :variation="iconVariation" size="large" name="information" class="oc-mr-s" />
     <div
       class="uk-flex uk-flex-wrap uk-flex-middle uk-flex-1 oc-mr"
       :role="role"

diff --git a/src/components/molecules/OcPagination/OcPagination.vue b/src/components/molecules/OcPagination/OcPagination.vue
@@ -7,7 +7,7 @@
           :aria-label="$gettext('Go to the previous page')"
           :to="previousPageLink"
         >
-          <oc-icon name="chevron_left" />
+          <oc-icon name="arrow-drop-left" fill-type="line" />
         </router-link>
       </li>
       <li v-for="(page, index) in displayedPages" :key="index" class="oc-pagination-list-item">
@@ -24,7 +24,7 @@
           :aria-label="$gettext('Go to the next page')"
           :to="nextPageLink"
         >
-          <oc-icon name="chevron_right" />
+          <oc-icon name="arrow-drop-right" fill-type="line" />
         </router-link>
       </li>
     </ol>

diff --git a/src/components/molecules/OcStatusIndicators/OcStatusIndicators.vue b/src/components/molecules/OcStatusIndicators/OcStatusIndicators.vue
@@ -141,7 +141,7 @@ export default {
         {
           id: 'file-link',
           label: "Shared via link",
-          icon: 'link',
+          icon: 'links',
         }
       ]
     }),

diff --git a/src/components/molecules/OcTable/OcTable.vue b/src/components/molecules/OcTable/OcTable.vue
@@ -691,7 +691,7 @@ export default {
         return [{
           id: "4b136c0a-5057-11eb-ac70-eba264112003",
           resource: "hello-world.txt",
-          icon: "text",
+          icon: "file-list",
           last_modified: 1609962211
         }, {
           id: "8468c9f0-5057-11eb-924b-934c6fd827a2",