[full-ci] Show local loading spinner in sharing button

changelog/unreleased/enhancement-show-spinner-sharing-button

@@ -0,0 +1,7 @@
+Enhancement: Show local loading spinner in sharing button
+
+We've added a loading spinner to the share button in the sharing panel
+to indicate that its still processing if action takes longer.
+
+https://github.com/owncloud/web/pull/9423
+https://github.com/owncloud/web/issues/9425

packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap

@@ -19,7 +19,7 @@ exports[`OcBreadcrumb displays all items 1`] = `
     </li>
     <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="2">
       <!--v-if-->
-      <oc-button-stub appearance="raw" class="oc-flex" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
+      <oc-button-stub appearance="raw" class="oc-flex" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
         <span class="oc-breadcrumb-item-text">Subfolder</span>
       </oc-button-stub>
       <!--v-if-->
@@ -37,7 +37,7 @@ exports[`OcBreadcrumb displays all items 1`] = `
       <!--v-if-->
     </li>
   </ol>
-  <oc-button-stub appearance="raw" arialabel="Navigate one level up" class="oc-breadcrumb-mobile-navigation" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" to="[object Object]" type="router-link" variation="passive">
+  <oc-button-stub appearance="raw" arialabel="Navigate one level up" class="oc-breadcrumb-mobile-navigation" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" to="[object Object]" type="router-link" variation="passive">
     <oc-icon-stub accessiblelabel="" class="oc-mr-m" color="" filltype="line" name="arrow-left-s" size="large" type="span" variation="passive"></oc-icon-stub>
   </oc-button-stub>
 </nav>
@@ -66,7 +66,7 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
     </li>
     <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="2">
       <!--v-if-->
-      <oc-button-stub appearance="raw" class="oc-flex" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
+      <oc-button-stub appearance="raw" class="oc-flex" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
         <span class="oc-breadcrumb-item-text">Subfolder</span>
       </oc-button-stub>
       <!--v-if-->
@@ -84,7 +84,7 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
       <!--v-if-->
     </li>
   </ol>
-  <oc-button-stub appearance="raw" arialabel="Navigate one level up" class="oc-breadcrumb-mobile-navigation" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" to="[object Object]" type="router-link" variation="passive">
+  <oc-button-stub appearance="raw" arialabel="Navigate one level up" class="oc-breadcrumb-mobile-navigation" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" to="[object Object]" type="router-link" variation="passive">
     <oc-icon-stub accessiblelabel="" class="oc-mr-m" color="" filltype="line" name="arrow-left-s" size="large" type="span" variation="passive"></oc-icon-stub>
   </oc-button-stub>
 </nav>

packages/design-system/src/components/OcButton/OcButton.vue

@@ -6,6 +6,7 @@
     :class="$_ocButton_buttonClass"
     v-on="handlers"
   >
+    <oc-spinner v-if="showSpinner" size="small" class="spinner" />
     <!-- @slot Content of the button -->
     <slot />
   </component>
@@ -149,6 +150,14 @@ export default defineComponent({
       validator: (value: string) => {
         return ['none', 'xsmall', 'small', 'medium', 'large', 'xlarge'].includes(value)
       }
+    },
+
+    /**
+     * Show loading spinner
+     */
+    showSpinner: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['click'],
@@ -307,6 +316,10 @@ export default defineComponent({
   text-align: left;
   text-decoration: none;
 
+  .spinner {
+    margin-left: -0.5rem;
+  }
+
   &-justify-content {
     &-left {
       justify-content: left;

packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap

@@ -15,9 +15,9 @@ exports[`OcModal displays input 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
         <!--v-if-->
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
   </focus-trap-stub>
@@ -39,9 +39,9 @@ exports[`OcModal hides icon if not specified 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
         <!--v-if-->
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
   </focus-trap-stub>
@@ -63,9 +63,9 @@ exports[`OcModal matches snapshot 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
         <!--v-if-->
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
   </focus-trap-stub>
@@ -87,9 +87,9 @@ exports[`OcModal overrides props message with slot 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
         <!--v-if-->
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
   </focus-trap-stub>

packages/design-system/src/components/OcResource/__snapshots__/OcResource.spec.ts.snap

@@ -3,13 +3,15 @@
 exports[`OcResource displays parent folder name default if calculated name is empty 1`] = `
 <div class="oc-resource oc-text-overflow">
   <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-passive oc-button-passive-raw" draggable="false" type="button">
+    <!--v-if-->
     <!-- @slot Content of the button -->
     <span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file">
       <!---->
     </span>
   </button>
   <div class="oc-resource-details oc-text-overflow oc-pl-s">
     <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-passive oc-button-passive-raw oc-text-overflow" draggable="false" type="button">
+      <!--v-if-->
       <!-- @slot Content of the button -->
       <!--v-if-->
       <span class="oc-resource-name" data-test-resource-name="example.pdf" data-test-resource-path="example.pdf" data-test-resource-type="file">

packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap

@@ -27,6 +27,7 @@ exports[`SpacesList should render all spaces in a table 1`] = `
         <th aria-sort="ascending" class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;">
           <span class="oc-table-thead-content header-text">Name</span>
           <button aria-label="Sort by name" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-button-sort" type="button">
+            <!--v-if-->
             <!-- @slot Content of the button -->
             <span class="oc-icon oc-icon-s oc-icon-passive">
               <!---->
@@ -40,6 +41,7 @@ exports[`SpacesList should render all spaces in a table 1`] = `
         <th aria-sort="none" class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-members" style="top: 0px;">
           <span class="oc-table-thead-content header-text">Members</span>
           <button aria-label="Sort by members" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible-sr oc-button-sort" type="button">
+            <!--v-if-->
             <!-- @slot Content of the button -->
             <span class="oc-icon oc-icon-s oc-icon-passive">
               <!---->
@@ -49,6 +51,7 @@ exports[`SpacesList should render all spaces in a table 1`] = `
         <th aria-sort="none" class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-totalQuota" style="top: 0px;">
           <span class="oc-table-thead-content header-text">Total quota</span>
           <button aria-label="Sort by totalQuota" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible-sr oc-button-sort" type="button">
+            <!--v-if-->
             <!-- @slot Content of the button -->
             <span class="oc-icon oc-icon-s oc-icon-passive">
               <!---->
@@ -58,6 +61,7 @@ exports[`SpacesList should render all spaces in a table 1`] = `
         <th aria-sort="none" class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-usedQuota" style="top: 0px;">
           <span class="oc-table-thead-content header-text">Used quota</span>
           <button aria-label="Sort by usedQuota" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible-sr oc-button-sort" type="button">
+            <!--v-if-->
             <!-- @slot Content of the button -->
             <span class="oc-icon oc-icon-s oc-icon-passive">
               <!---->
@@ -67,6 +71,7 @@ exports[`SpacesList should render all spaces in a table 1`] = `
         <th aria-sort="none" class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-remainingQuota" style="top: 0px;">
           <span class="oc-table-thead-content header-text">Remaining quota</span>
           <button aria-label="Sort by remainingQuota" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible-sr oc-button-sort" type="button">
+            <!--v-if-->
             <!-- @slot Content of the button -->
             <span class="oc-icon oc-icon-s oc-icon-passive">
               <!---->
@@ -76,6 +81,7 @@ exports[`SpacesList should render all spaces in a table 1`] = `
         <th aria-sort="none" class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-mdate" style="top: 0px;">
           <span class="oc-table-thead-content header-text">Modified</span>
           <button aria-label="Sort by mdate" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible-sr oc-button-sort" type="button">
+            <!--v-if-->
             <!-- @slot Content of the button -->
             <span class="oc-icon oc-icon-s oc-icon-passive">
               <!---->
@@ -85,6 +91,7 @@ exports[`SpacesList should render all spaces in a table 1`] = `
         <th aria-sort="none" class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-status" style="top: 0px;">
           <span class="oc-table-thead-content header-text">Status</span>
           <button aria-label="Sort by status" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible-sr oc-button-sort" type="button">
+            <!--v-if-->
             <!-- @slot Content of the button -->
             <span class="oc-icon oc-icon-s oc-icon-passive">
               <!---->
@@ -129,12 +136,14 @@ exports[`SpacesList should render all spaces in a table 1`] = `
         <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-actions oc-pr-s">
           <div class="spaces-list-actions">
             <button aria-label="Show details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw spaces-table-btn-details" type="button">
+              <!--v-if-->
               <!-- @slot Content of the button -->
               <span class="oc-icon oc-icon-m oc-icon-passive">
                 <!---->
               </span>
             </button>
             <button aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw spaces-table-btn-action-dropdown" id="context-menu-trigger-1" type="button">
+              <!--v-if-->
               <!-- @slot Content of the button -->
               <span class="oc-icon oc-icon-m oc-icon-passive">
                 <!---->

packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/LoginModal.spec.ts.snap

@@ -17,9 +17,9 @@ exports[`LoginModal renders the input including two options 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
         <!--v-if-->
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="true" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="true" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
       </div>
     </div>
   </focus-trap-stub>

packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap

@@ -12,6 +12,7 @@ exports[`Spaces view loading states should render spaces list after loading has
             <div class="oc-flex oc-flex-middle">
               <!--v-if-->
               <button aria-label="Display customization options of the files list" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-my-s oc-p-xs" id="files-view-options-btn" type="button">
+                <!--v-if-->
                 <!-- @slot Content of the button -->
                 <span class="oc-icon oc-icon-m oc-icon-passive">
                   <!---->
@@ -58,6 +59,7 @@ exports[`Spaces view loading states should render spaces list after loading has
               </div>
             </div>
             <button aria-label="Open sidebar to view details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-my-s oc-p-xs" id="files-toggle-sidebar" type="button">
+              <!--v-if-->
               <!-- @slot Content of the button -->
               <span class="oc-icon oc-icon-m oc-icon-passive">
                 <!---->