Improve focus styles on Doc::TileMedium (#663)

* Improve focus styles on Doc::TileMedium * Empty-Commit
hashicorp-forge · Apr 1, 2024 · 8aaf601 · 8aaf601
1 parent b3384ef
commit 8aaf601
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 5 deletions.
diff --git a/web/app/components/dashboard/index.hbs b/web/app/components/dashboard/index.hbs
@@ -7,7 +7,7 @@
 
 <div class="flex w-full flex-col-reverse gap-5 lg:flex-row lg:gap-0">
   {{! Main }}
-  <div class="min-h-[500px] w-full overflow-hidden pb-20">
+  <div class="min-h-[500px] w-full pb-20">
     <div class="main pr-4">
       {{#if @docsAwaitingReview}}
         <Dashboard::DocsAwaitingReview @docs={{@docsAwaitingReview}} />

diff --git a/web/app/components/doc/tile-medium.hbs b/web/app/components/doc/tile-medium.hbs
@@ -35,11 +35,12 @@
             @route="authenticated.document"
             @query={{hash draft=this.docIsDraft}}
             @model={{this.docID}}
+            class="group/primary-link"
           >
             {{! Primary click area }}
             <div
               aria-hidden="true"
-              class="absolute -top-px left-0 -bottom-px w-full mix-blend-multiply group-focus-within:bg-color-page-faint group-focus-within:outline group-focus-within:outline-2 group-focus-within:outline-color-border-strong group-hover:bg-color-page-faint"
+              class="absolute -top-px left-0 -bottom-px w-full mix-blend-multiply group-hover:bg-color-page-faint group-focus/primary-link:outline group-focus/primary-link:outline-2 group-focus/primary-link:outline-color-border-strong"
             ></div>
 
             <h3 class="relative">

diff --git a/web/app/components/document/sidebar.hbs b/web/app/components/document/sidebar.hbs
@@ -351,6 +351,7 @@
                   </LinkTo>
 
                   <OverflowMenu
+                    @renderOut={{true}}
                     @items={{hash
                       remove=(hash
                         icon="trash"

diff --git a/web/app/components/document/sidebar/related-resources/list-item.hbs b/web/app/components/document/sidebar/related-resources/list-item.hbs
@@ -30,7 +30,7 @@
       </ExternalLink>
     {{/if}}
     {{#unless @editingIsDisabled}}
-      <OverflowMenu @items={{this.overflowMenuItems}} />
+      <OverflowMenu @items={{this.overflowMenuItems}} @renderOut={{true}} />
     {{/unless}}
   </div>
 </li>

diff --git a/web/app/components/overflow-menu.hbs b/web/app/components/overflow-menu.hbs
@@ -1,6 +1,6 @@
 <X::DropdownList
   @items={{@items}}
-  @renderOut={{true}}
+  @renderOut={{@renderOut}}
   @placement="bottom-end"
   data-test-overflow-menu
   ...attributes

diff --git a/web/app/components/overflow-menu.ts b/web/app/components/overflow-menu.ts
@@ -13,6 +13,7 @@ interface OverflowMenuComponentSignature {
     items: Record<string, OverflowItem>;
     offset?: OffsetOptions;
     isShown?: boolean;
+    renderOut?: boolean;
   };
 }
 

diff --git a/web/app/components/project/index.hbs b/web/app/components/project/index.hbs
@@ -189,7 +189,7 @@
         We add a page background color to overlay any
         removed documents that are still animating out.
        }}
-      <div class="relative z-10 bg-color-page-primary pt-8">
+      <div class="relative z-10 mt-1 bg-color-page-primary pt-7">
         {{! External links }}
         <Project::ResourceList
           data-test-external-link-list

diff --git a/web/app/components/project/jira-widget.hbs b/web/app/components/project/jira-widget.hbs
@@ -107,6 +107,7 @@
             }}
             @isShown={{true}}
             @offset={{hash mainAxis=1 crossAxis=-3}}
+            @renderOut={{true}}
           />
         {{/unless}}
       {{else if @isLoading}}