Merge pull request #390 from thejackshelton/docs-improvements

fix(docs & popover): popover overflow fix, banner animation fix, API banner styling

Author: thejackshelton

apps/website/src/routes/(main)/about/[email protected]

@@ -9,7 +9,7 @@ export default component$(() => {
         <p class="text-lg mb-16">
           Qwik UI is the first ever component library for the revolutionary Qwik web
           framework. Developed by leading members of the Qwik community,{' '}
-          <mark class="text-purple-300 bg-transparent">
+          <mark class="text-purple-500 dark:text-purple-300 bg-transparent">
             including members from the Qwik team
           </mark>
           , Qwik UI offers an open-source solution for building instant loading and
@@ -20,7 +20,9 @@ export default component$(() => {
         <p class="text-lg mb-16">
           Qwik UI is built for developers who want to harness the power of Qwik's
           innovative{' '}
-          <mark class="text-purple-300 bg-transparent">JavaScript Streaming</mark>{' '}
+          <mark class="text-purple-500 dark:text-purple-300 bg-transparent">
+            JavaScript Streaming
+          </mark>{' '}
           technology to create highly performant web applications with minimal effort.
           Whether you're working on an e-commerce platform, a dashboard or any scale
           application, Qwik UI provides the components and tools you need to deliver a
@@ -34,11 +36,11 @@ export default component$(() => {
           Qwik's instant loading capabilities offer a significant advantage for e-commerce
           and other search engine-facing applications. By ensuring the highest Core Web
           Vitals scores, Qwik UI not only{' '}
-          <mark class="text-purple-300 bg-transparent">
+          <mark class="text-purple-500 dark:text-purple-300 bg-transparent">
             delivers an amazing user experience
           </mark>{' '}
           but also helps{' '}
-          <mark class="text-purple-300 bg-transparent">
+          <mark class="text-purple-500 dark:text-purple-300 bg-transparent">
             improve your site's search engine rankings
           </mark>
           . Stand out from the competition with a web application that loads instantly,
@@ -49,7 +51,7 @@ export default component$(() => {
         <p class="text-lg mb-16">
           In addition to performance and SEO advantages, Qwik UI components are designed
           with accessibility in mind.{' '}
-          <mark class="text-purple-300 bg-transparent">
+          <mark class="text-purple-500 dark:text-purple-300 bg-transparent">
             We believe in creating inclusive web experiences
           </mark>{' '}
           that cater to users of all abilities, and our components are built to adhere to
@@ -59,9 +61,11 @@ export default component$(() => {
         <p class="text-lg mb-16">
           Qwik UI is an open-source project, which means that it's freely available for
           developers to use and contribute to. By fostering a{' '}
-          <mark class="text-purple-300 bg-transparent">community-driven approach</mark>,
-          we aim to continuously improve and expand the capabilities of Qwik UI, making it
-          the go-to component library for developers working the Qwik framework.
+          <mark class="text-purple-500 dark:text-purple-300 bg-transparent">
+            community-driven approach
+          </mark>
+          , we aim to continuously improve and expand the capabilities of Qwik UI, making
+          it the go-to component library for developers working the Qwik framework.
         </p>
         <p class="text-lg mb-16">
           Join us in our mission to revolutionize web development and create instant

apps/website/src/routes/docs/_components/api-table/api-table.tsx

@@ -19,7 +19,7 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
               Prop
             </td>
             <td class="w-1/6 whitespace-nowrap py-2 text-sm font-medium ">Type</td>
-            <td class="w-2/3 whitespace-nowrap py-2 text-sm font-medium ">Description</td>
+            <td class="w-2/3 whitespace-nowrap p-2 text-sm font-medium ">Description</td>
           </tr>
           {propDescriptors?.map((propDescriptor) => {
             return (
@@ -37,12 +37,12 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
                     {propDescriptor.info && (
                       <Popover placement="top">
                         <PopoverContent>
-                          <div class="bg-[#202425] text-[#7881fa] max-w-xs mb-2 text-md px-4 py-2  rounded-md">
+                          <div class="bg-[#202425] text-[#7881fa] max-w-xs mb-2 text-md px-4 py-2  rounded-md sm:w-max">
                             {propDescriptor?.info}
                           </div>
                         </PopoverContent>
                         <PopoverTrigger>
-                          <div class="hover:bg-slate-500 hover:bg-opacity-50 h-[31px] mt-2 p-2 rounded-md">
+                          <div class="hover:bg-slate-500 hover:bg-opacity-50 mt-2 p-1 rounded-md mx-2 rounded-xl">
                             <svg
                               width="15"
                               height="15"
@@ -66,7 +66,7 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
                   </span>
                 </td>
                 <td class="py-3 align-baseline">
-                  <div class="prose prose-sm prose-docs-table">
+                  <div class="prose prose-sm prose-docs-table px-2">
                     <p>{propDescriptor.description}</p>
                   </div>
                 </td>

apps/website/src/routes/docs/_components/status-banner/status-banner.css

@@ -2,11 +2,11 @@ import {
   QwikIntrinsicElements,
   component$,
   useSignal,
-  useStylesScoped$
+  useStylesScoped$,
+  $
 } from '@builder.io/qwik';
 import { ComponentStatus } from 'apps/website/src/_state/component-status.type';
 import { getClassByStatus } from '../component-status-badge/component-status-badge';
-import styles from './status-banner.css?inline';
 
 export interface StatusBannerProps {
   status?: ComponentStatus;
@@ -73,23 +73,52 @@ function getBackgroundByStatus(status?: ComponentStatus) {
 
 export const StatusBanner = component$((props: StatusBannerProps) => {
   const ref = useSignal<HTMLElement | undefined>();
-  const isClosed = useSignal(false);
+  const isBannerClosedSig = useSignal(false);
+  const marginBottom = 32;
 
-  useStylesScoped$(styles);
+  useStylesScoped$(`
+
+  .normal-state {
+    transition: margin-top 0.5s ease;
+  }
+
+  .fade {
+    animation: fadeOut 0.5s ease forwards;
+    margin-top: var(--dynamic-banner-height);
+  }
+  
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+  `);
 
   return (
     <>
       <div
         ref={ref}
-        hidden={isClosed.value}
-        onAnimationEnd$={() => (isClosed.value = true)}
-        class={`${getBackgroundByStatus(props.status)} mb-8 px-6 py-4 
+        hidden={isBannerClosedSig.value}
+        onAnimationEnd$={() => (isBannerClosedSig.value = true)}
+        class={`${getBackgroundByStatus(props.status)} px-6 py-4 
         rounded-xl md:items-center relative md:flex-row normal-state
         shadow-depth dark:shadow-depth-dark`}
+        style={{ marginBottom: `${marginBottom}px` }}
       >
         <span class="pr-2">{getMessageByStatus(props.status)}</span>
         <button
-          onClick$={() => ref.value?.classList.toggle('fade')}
+          onClick$={() => {
+            // we need the margin as a variable rather than a static class.
+            ref.value?.style.setProperty(
+              '--dynamic-banner-height',
+              `-${ref.value?.offsetHeight + marginBottom}px`
+            );
+
+            ref.value?.classList.toggle('fade');
+          }}
           class="scale-150 absolute top-2 right-2"
         >
           <EpCircleCloseFilled />

apps/website/src/routes/docs/_components/status-banner/status-banner.tsx

@@ -10,6 +10,7 @@ import {
   useSignal,
   useStore,
   useTask$,
+  useStylesScoped$
 } from '@builder.io/qwik';
 import { isBrowser } from '@builder.io/qwik/build';
 import {
@@ -19,7 +20,7 @@ import {
   flip,
   offset,
   shift,
-  Side,
+  Side
 } from '@floating-ui/dom';
 import { PopoverContext } from './popover-context';
 
@@ -72,11 +73,18 @@ export const Popover = component$((props: PopoverProps) => {
     }
   });
 
+  //relative here because absolute needs a containing block - Jack
+  useStylesScoped$(`
+     [data-type="popover-root"] {
+      position: relative;
+     }
+  `);
+
   const contextService = useStore({
     isOpen: false,
     triggerEvent,
     setTriggerRef$,
-    setOverlayRef$,
+    setOverlayRef$
   });
   useContextProvider(PopoverContext, contextService);
 
@@ -134,11 +142,11 @@ export const Popover = component$((props: PopoverProps) => {
       autoUpdate(trigger, content, () => {
         computePosition(trigger, content, {
           middleware: [flip(), shift(), offset(props.offset || 0)],
-          placement: props.placement,
+          placement: props.placement
         }).then(({ x, y }) => {
           Object.assign(content.style, {
             left: `${x}px`,
-            top: `${y}px`,
+            top: `${y}px`
           });
         });
       });
@@ -179,17 +187,13 @@ export const Popover = component$((props: PopoverProps) => {
    */
   const clickHandler = $((e: QwikMouseEvent) => {
     // if the popover content is clicked: do nothing
-    const isContentClicked = contentRef.value?.contains(
-      e.target as HTMLElement
-    );
+    const isContentClicked = contentRef.value?.contains(e.target as HTMLElement);
     if (isContentClicked) {
       return;
     }
 
     // if the trigger is Clicked
-    const isTriggerClicked = triggerRef.value?.contains(
-      e.target as HTMLElement
-    );
+    const isTriggerClicked = triggerRef.value?.contains(e.target as HTMLElement);
     if (isTriggerClicked && triggerEvent === 'click') {
       // toggle if triggered by 'click'
       togglePopover();
@@ -201,7 +205,7 @@ export const Popover = component$((props: PopoverProps) => {
   });
 
   return (
-    <span ref={wrapperRef} document:onClick$={clickHandler}>
+    <span data-type="popover-root" ref={wrapperRef} document:onClick$={clickHandler}>
       <Slot />
     </span>
   );