feat: improve shares navigation, checkbox contrast, search drop

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

@@ -12,7 +12,7 @@
         'align-middle',
         'm-0.5',
         'border-2',
-        'border-role-outline',
+        'border-role-outline/80',
         'outline-0',
         'outline-role-secondary',
         'focus-visible:outline',

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

@@ -203,6 +203,7 @@ const inputClass = computed(() => {
   const classes = [
     'oc-search-input',
     'oc-input',
+    'placeholder:text-role-outline',
     'disabled:cursor-not-allowed',
     'focus:bg-none',
     'focus:outline focus:outline-offset-2 focus:outline-white'

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

@@ -524,7 +524,7 @@ export default { components: { VueSelect } }
 }
 
 .oc-select .vs__search::placeholder {
-  color: var(--oc-role-on-surface-variant);
+  color: var(--oc-role-outline);
 }
 
 .oc-select :is(.vs__dropdown-toggle, .vs__dropdown-menu) {

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

@@ -16,7 +16,7 @@ exports[`Spaces view > loading states > should render spaces list after loading
             <div class="peer flex [&amp;:not(:empty)]:w-full">
               <div class="flex justify-end w-full my-2 items-center">
                 <div data-v-8440503a="" role="search" class="oc-search flex items-center w-3xs">
-                  <div data-v-8440503a="" class="flex-1 relative"><input data-v-8440503a="" id="search-input-v-0" class="oc-search-input oc-input disabled:cursor-not-allowed focus:bg-none focus:outline focus:outline-offset-2 focus:outline-white h-9" aria-label="Search" placeholder="Search for spaces" type="search"> <button data-v-8440503a="" type="button" aria-label="Search" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default absolute top-[50%] transform-[translateY(-50%)] right-0 mx-4 mb-4 mt-0">
+                  <div data-v-8440503a="" class="flex-1 relative"><input data-v-8440503a="" id="search-input-v-0" class="oc-search-input oc-input placeholder:text-role-outline disabled:cursor-not-allowed focus:bg-none focus:outline focus:outline-offset-2 focus:outline-white h-9" aria-label="Search" placeholder="Search for spaces" type="search"> <button data-v-8440503a="" type="button" aria-label="Search" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default absolute top-[50%] transform-[translateY(-50%)] right-0 mx-4 mb-4 mt-0">
                       <!--v-if-->
                       <!-- @slot Content of the button --> <span data-v-8440503a="" class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4"><svg data-testid="inline-svg-stub" src="icons/search-line.svg" unique-ids="false" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {

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

@@ -20,7 +20,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
                   <item-filter-stub filterlabel="Roles" items="[object Object],[object Object],[object Object],[object Object]" filtername="roles" optionfilterlabel="Filter roles" showoptionfilter="true" allowmultiple="true" idattribute="id" displaynameattribute="displayName" filterableattributes="displayName" closeonclick="false"></item-filter-stub>
                 </div>
                 <div data-v-8440503a="" role="search" class="oc-search flex items-center w-3xs">
-                  <div data-v-8440503a="" class="flex-1 relative"><input data-v-8440503a="" id="search-input-v-0" class="oc-search-input oc-input disabled:cursor-not-allowed focus:bg-none focus:outline focus:outline-offset-2 focus:outline-white h-9" aria-label="Search" placeholder="Search for users" type="search">
+                  <div data-v-8440503a="" class="flex-1 relative"><input data-v-8440503a="" id="search-input-v-0" class="oc-search-input oc-input placeholder:text-role-outline disabled:cursor-not-allowed focus:bg-none focus:outline focus:outline-offset-2 focus:outline-white h-9" aria-label="Search" placeholder="Search for users" type="search">
                     <oc-button-stub data-v-8440503a="" arialabel="Search" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="absolute top-[50%] transform-[translateY(-50%)] right-0 mx-4 mb-4 mt-0"></oc-button-stub>
                   </div>
                   <div data-v-8440503a="" class="oc-search-button-wrapper sr-only">
@@ -61,7 +61,7 @@ exports[`Users view > list view > renders list initially 1`] = `
                   <item-filter-stub filterlabel="Roles" items="[object Object],[object Object],[object Object],[object Object]" filtername="roles" optionfilterlabel="Filter roles" showoptionfilter="true" allowmultiple="true" idattribute="id" displaynameattribute="displayName" filterableattributes="displayName" closeonclick="false"></item-filter-stub>
                 </div>
                 <div data-v-8440503a="" role="search" class="oc-search flex items-center w-3xs">
-                  <div data-v-8440503a="" class="flex-1 relative"><input data-v-8440503a="" id="search-input-v-0" class="oc-search-input oc-input disabled:cursor-not-allowed focus:bg-none focus:outline focus:outline-offset-2 focus:outline-white h-9" aria-label="Search" placeholder="Search for users" type="search">
+                  <div data-v-8440503a="" class="flex-1 relative"><input data-v-8440503a="" id="search-input-v-0" class="oc-search-input oc-input placeholder:text-role-outline disabled:cursor-not-allowed focus:bg-none focus:outline focus:outline-offset-2 focus:outline-white h-9" aria-label="Search" placeholder="Search for users" type="search">
                     <oc-button-stub data-v-8440503a="" arialabel="Search" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="absolute top-[50%] transform-[translateY(-50%)] right-0 mx-4 mb-4 mt-0"></oc-button-stub>
                   </div>
                   <div data-v-8440503a="" class="oc-search-button-wrapper sr-only">
@@ -78,7 +78,7 @@ exports[`Users view > list view > renders list initially 1`] = `
           <thead data-v-3c9ab66c="" class="oc-thead border-b">
             <tr data-v-98c4aba8="" data-v-3c9ab66c="" class="oc-table-header-row h-10.5">
               <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-select z-10 pl-4" style="top: 0px;">
-                <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle"><span class="sr-only">Select users</span> <span data-v-5c58355a="" class="inline-flex items-center"><input data-v-5c58355a="" id="oc-checkbox-1" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-primary checked:border-role-primary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select all users"> <!--v-if--></span></span></div>
+                <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle"><span class="sr-only">Select users</span> <span data-v-5c58355a="" class="inline-flex items-center"><input data-v-5c58355a="" id="oc-checkbox-1" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-primary checked:border-role-primary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select all users"> <!--v-if--></span></span></div>
               </th>
               <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-avatar z-10" style="top: 0px;">
                 <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle"><span class="sr-only">Avatar</span></span></div>
@@ -105,7 +105,7 @@ exports[`Users view > list view > renders list initially 1`] = `
           </thead>
           <tbody data-v-3c9ab66c="" class="has-item-context-menu">
             <tr data-v-98c4aba8="" data-v-3c9ab66c="" data-item-id="1" draggable="false" class="oc-tbody-tr border-t h-10.5 oc-tbody-tr-1">
-              <td data-v-27e13406="" class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-select pl-4"><span data-v-5c58355a="" class="inline-flex items-center"><input data-v-5c58355a="" id="oc-checkbox-2" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-primary checked:border-role-primary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select Admin" value="[object Object]"> <!--v-if--></span></td>
+              <td data-v-27e13406="" class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-select pl-4"><span data-v-5c58355a="" class="inline-flex items-center"><input data-v-5c58355a="" id="oc-checkbox-2" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-primary checked:border-role-primary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select Admin" value="[object Object]"> <!--v-if--></span></td>
               <td data-v-27e13406="" class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-avatar"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 32px; height: 32px; line-height: 32px; background-color: #106892; font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Admin"><span class="avatar-initials" style="color: white;">A</span></span></td>
               <td data-v-27e13406="" class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-onPremisesSamAccountName"></td>
               <td data-v-27e13406="" class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-displayName"><span class="oc-filter-highlight">Admin</span></td>

packages/web-app-files/src/components/AppBar/SharesNavigation.vue

@@ -1,15 +1,19 @@
 <template>
-  <nav id="shares-navigation" class="py-2" :aria-label="$gettext('Shares pages navigation')">
-    <oc-list class="hidden sm:flex">
+  <nav
+    id="shares-navigation"
+    class="mb-2 -mx-4 px-4 border-b"
+    :aria-label="$gettext('Shares pages navigation')"
+  >
+    <oc-list class="hidden sm:flex gap-4">
       <li v-for="navItem in navItems" :key="`shares-navigation-desktop-${navItem.to}`">
         <oc-button
           type="router-link"
-          class="mr-4 py-2 w-full"
-          :class="{ 'border-b border-role-secondary rounded-none': navItem.active }"
+          class="py-2 w-full m-0"
+          :class="{ 'border-b border-role-secondary rounded-none font-bold': navItem.active }"
           appearance="raw"
           :to="navItem.to"
+          no-hover
         >
-          <oc-icon size-class="size-4" :name="navItem.icon" />
           <span v-text="navItem.text" />
         </oc-button>
       </li>

packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap

@@ -1,22 +1,16 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SharesNavigation component > renders a shares navigation for both mobile and a desktop viewports 1`] = `
-"<nav id="shares-navigation" class="py-2" aria-label="Shares pages navigation">
-  <oc-list-stub raw="false" class="hidden sm:flex">
+"<nav id="shares-navigation" class="mb-2 -mx-4 px-4 border-b" aria-label="Shares pages navigation">
+  <oc-list-stub raw="false" class="hidden sm:flex gap-4">
     <li>
-      <oc-button-stub to="/files/shares/with-me/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="mr-4 py-2 w-full border-b border-role-secondary rounded-none">
-        <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="share-forward" sizeclass="size-4" type="span" uniqueids="false"></oc-icon-stub> <span>Shared with me</span>
-      </oc-button-stub>
+      <oc-button-stub to="/files/shares/with-me/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="true" class="py-2 w-full m-0 border-b border-role-secondary rounded-none font-bold"><span>Shared with me</span></oc-button-stub>
     </li>
     <li>
-      <oc-button-stub to="/files/shares/with-others/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="mr-4 py-2 w-full">
-        <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="reply" sizeclass="size-4" type="span" uniqueids="false"></oc-icon-stub> <span>Shared with others</span>
-      </oc-button-stub>
+      <oc-button-stub to="/files/shares/with-others/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="true" class="py-2 w-full m-0"><span>Shared with others</span></oc-button-stub>
     </li>
     <li>
-      <oc-button-stub to="/files/shares/via-link/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="mr-4 py-2 w-full">
-        <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="link" sizeclass="size-4" type="span" uniqueids="false"></oc-icon-stub> <span>Shared via link</span>
-      </oc-button-stub>
+      <oc-button-stub to="/files/shares/via-link/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="true" class="py-2 w-full m-0"><span>Shared via link</span></oc-button-stub>
     </li>
   </oc-list-stub>
   <div id="shares-navigation-mobile" class="block sm:hidden">

packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`Projects view > different files view states > lists all available proje
         <thead data-v-3c9ab66c="" class="oc-thead border-b">
           <tr data-v-98c4aba8="" data-v-3c9ab66c="" class="oc-table-header-row h-10.5">
             <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-select z-10 pl-4" style="top: 0px;">
-              <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle"><div class="resource-table-select-all flex justify-center items-center"><span data-v-5c58355a="" class="inline-flex items-center"><input data-v-5c58355a="" id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-primary checked:border-role-primary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select all"> <!--v-if--></span></div></span>
+              <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle"><div class="resource-table-select-all flex justify-center items-center"><span data-v-5c58355a="" class="inline-flex items-center"><input data-v-5c58355a="" id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-primary checked:border-role-primary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select all"> <!--v-if--></span></div></span>
     </div>
     </th>
     <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle min-w-38 oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10" style="top: 0px;" aria-sort="ascending"><button data-v-3c9ab66c="" type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">

packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap

@@ -7,7 +7,7 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
       <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="[object Object]" hasbulkactions="false" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="true" showactionsbar="false" showactionsonselection="false" batchactionsloading="false"></app-bar-stub>
       <div class="flex justify-end flex-wrap items-end mx-4 mb-4">
         <div data-v-8440503a="" role="search" class="oc-search flex items-center w-3xs">
-          <div data-v-8440503a="" class="flex-1 relative"><input data-v-8440503a="" id="search-input-v-0" class="oc-search-input oc-input disabled:cursor-not-allowed focus:bg-none focus:outline focus:outline-offset-2 focus:outline-white h-9" aria-label="Search" placeholder="Search for trash bins" type="search"> <button data-v-8440503a="" type="button" aria-label="Search" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default absolute top-[50%] transform-[translateY(-50%)] right-0 mx-4 mb-4 mt-0">
+          <div data-v-8440503a="" class="flex-1 relative"><input data-v-8440503a="" id="search-input-v-0" class="oc-search-input oc-input placeholder:text-role-outline disabled:cursor-not-allowed focus:bg-none focus:outline focus:outline-offset-2 focus:outline-white h-9" aria-label="Search" placeholder="Search for trash bins" type="search"> <button data-v-8440503a="" type="button" aria-label="Search" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default absolute top-[50%] transform-[translateY(-50%)] right-0 mx-4 mb-4 mt-0">
               <!--v-if-->
               <!-- @slot Content of the button --> <span data-v-8440503a="" class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4"><svg data-testid="inline-svg-stub" src="icons/search-line.svg" unique-ids="false" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {