docs: fix z-index across projects (#5234)

* docs: fix z-index across projects * remove usage of z-index in UI docs
2023-09-27 16:38:59 +03:00
parent c68ba63c1b
commit 6942a907a5
17 changed files with 36 additions and 24 deletions
--- a/www/apps/api-reference/app/api/[area]/layout.tsx
+++ b/www/apps/api-reference/app/api/[area]/layout.tsx
@@ -33,13 +33,17 @@ export default function RootLayout({
        className={clsx(
          inter.variable,
          robotoMono.variable,
-          "bg-docs-bg font-base text-medium h-full w-full",
-          "text-medusa-fg-subtle"
+          "bg-docs-bg font-base text-medium w-full",
+          "text-medusa-fg-subtle",
+          "h-screen overflow-hidden"
        )}
      >
        <Providers>
-          <div className="w-full">
-            <Navbar />
+          <Navbar />
+          <div
+            className="w-full h-[calc(100%-57px)] overflow-y-scroll"
+            id="main"
+          >
            <div className="max-w-xxl mx-auto flex w-full px-1.5">
              <Sidebar />
              <main className="lg:w-ref-main relative mt-4 w-full flex-1 lg:mt-7">
--- a/www/apps/api-reference/components/Tags/Operation/index.tsx
+++ b/www/apps/api-reference/components/Tags/Operation/index.tsx
@@ -43,6 +43,7 @@ const TagOperation = ({
  const { ref } = useInView({
    threshold: 0.3,
    rootMargin: `112px 0px 112px 0px`,
+    root: document.getElementById("main") || document.body,
    onChange: (changedInView) => {
      if (changedInView) {
        if (!show) {
--- a/www/apps/api-reference/components/Tags/Section/index.tsx
+++ b/www/apps/api-reference/components/Tags/Section/index.tsx
@@ -43,6 +43,7 @@ const TagSection = ({ tag }: TagSectionProps) => {
  const { ref } = useInView({
    threshold: 0.5,
    rootMargin: `112px 0px 112px 0px`,
+    root: document.getElementById("main") || document.body,
    onChange: (inView) => {
      if (inView && !loadPaths) {
        setLoadPaths(true)
--- a/www/apps/docs/src/providers/Search/index.tsx
+++ b/www/apps/docs/src/providers/Search/index.tsx
@@ -60,6 +60,7 @@ const SearchProvider = ({ children }: SearchProviderProps) => {
            ],
          },
        ],
+        className: "z-[500]",
      }}
      initialDefaultFilters={defaultFilters}
    >
--- a/www/apps/ui/src/app/layout.tsx
+++ b/www/apps/ui/src/app/layout.tsx
@@ -31,11 +31,11 @@ export default function RootLayout({
    <html lang="en" className="h-full w-full">
      <head />
      <body
-        className={`bg-docs-bg h-screen w-full ${inter.variable} ${robotoMono.variable}`}
+        className={`bg-docs-bg h-screen overflow-hidden w-full ${inter.variable} ${robotoMono.variable}`}
      >
        <Providers>
-          <div className="w-full">
-            <Navbar />
+          <Navbar />
+          <div className="w-full h-[calc(100%-57px)] overflow-y-scroll">
            <div className="max-w-xxl grid w-full grid-cols-1 px-6 lg:mx-auto lg:grid-cols-[280px_1fr]">
              <Sidebar expandItems={true} />
              <div className="relative flex w-full flex-1 items-start justify-center px-4 pb-8 pt-16 md:px-8 lg:px-16 lg:py-[112px]">
--- a/www/apps/ui/src/components/navbar.tsx
+++ b/www/apps/ui/src/components/navbar.tsx
@@ -18,7 +18,6 @@ const Navbar = () => {
        setMobileSidebarOpen,
        mobileSidebarOpen,
      }}
-      className="!z-[49]"
    />
  )
 }
--- a/www/apps/ui/src/examples/focus-modal-demo.tsx
+++ b/www/apps/ui/src/examples/focus-modal-demo.tsx
@@ -6,7 +6,7 @@ export default function FocusModalDemo() {
      <FocusModal.Trigger asChild>
        <Button>Edit Variant</Button>
      </FocusModal.Trigger>
-      <FocusModal.Content className="z-[100]">
+      <FocusModal.Content>
        <FocusModal.Header>
          <Button>Save</Button>
        </FocusModal.Header>
--- a/www/ignore-build-script.sh
+++ b/www/ignore-build-script.sh
@@ -3,7 +3,10 @@
 echo "VERCEL_ENV: $VERCEL_ENV"
 echo "VERCEL_GIT_COMMIT_REF: $VERCEL_GIT_COMMIT_REF"

-$(git diff HEAD^ HEAD --quiet .)
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+echo "SCRIPT_DIR: $SCRIPT_DIR"
+
+$(git diff HEAD^ HEAD --quiet ${SCRIPT_DIR})
 diffResult=$?

 echo "DIFF RESULT: $diffResult"
--- a/www/packages/docs-ui/src/components/CodeBlock/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeBlock/index.tsx
@@ -97,7 +97,7 @@ export const CodeBlock = ({
            </pre>
            <div
              className={clsx(
-                "absolute z-50 hidden gap-docs_1 md:flex",
+                "absolute z-[1] hidden gap-docs_1 md:flex",
                tokens.length === 1 && "right-docs_0.75 top-[10px]",
                tokens.length > 1 && "right-docs_1 top-docs_1"
              )}
--- a/www/packages/docs-ui/src/components/Details/index.tsx
+++ b/www/packages/docs-ui/src/components/Details/index.tsx
@@ -49,7 +49,7 @@ export const Details = ({
      }}
      className={clsx(
        "border-medusa-border-base border-y border-solid border-x-0",
-        "overflow-hidden [&>summary]:relative [&>summary]:z-[398]",
+        "overflow-hidden [&>summary]:relative",
        props.className
      )}
    >
--- a/www/packages/docs-ui/src/components/Modal/index.tsx
+++ b/www/packages/docs-ui/src/components/Modal/index.tsx
@@ -87,7 +87,7 @@ export const Modal = ({
      {...props}
      className={clsx(
        "fixed top-0 left-0 flex h-screen w-screen items-center justify-center",
-        "bg-medusa-bg-overlay z-[500]",
+        "bg-medusa-bg-overlay",
        "hidden open:flex border-0 p-0",
        className
      )}
--- a/www/packages/docs-ui/src/components/Navbar/index.tsx
+++ b/www/packages/docs-ui/src/components/Navbar/index.tsx
@@ -31,14 +31,14 @@ export const Navbar = ({
  return (
    <nav
      className={clsx(
-        "h-navbar sticky top-0 w-full justify-between",
-        "bg-docs-bg dark:bg-docs-bg-dark border-medusa-border-base z-[400] border-b",
+        "h-navbar w-full justify-between",
+        "bg-docs-bg dark:bg-docs-bg-dark border-medusa-border-base border-b",
        className
      )}
    >
      <div
        className={clsx(
-          "h-navbar max-w-xxl py-docs_0.75 sticky top-0 mx-auto flex w-full justify-between px-docs_1 lg:px-docs_3"
+          "h-navbar max-w-xxl py-docs_0.75 mx-auto flex w-full justify-between px-docs_1 lg:px-docs_3"
        )}
      >
        <div className="hidden w-full items-center gap-docs_0.5 lg:flex lg:w-auto lg:gap-docs_1.5">
--- a/www/packages/docs-ui/src/components/Notification/Item/index.tsx
+++ b/www/packages/docs-ui/src/components/Notification/Item/index.tsx
@@ -38,7 +38,7 @@ export const NotificationItem = ({
      className={clsx(
        "md:max-w-[320px] md:w-[320px] w-full bg-medusa-bg-base rounded-docs_DEFAULT",
        "shadow-flyout dark:shadow-flyout-dark max-h-[calc(100vh-90px)]",
-        "fixed md:right-docs_1 left-0 z-[400] md:m-docs_1",
+        "fixed md:right-docs_1 left-0 md:m-docs_1",
        placement === "bottom" && "md:bottom-docs_1 bottom-0",
        placement === "top" && "md:top-docs_1 top-0",
        "opacity-100 transition-opacity duration-200 ease-ease",
--- a/www/packages/docs-ui/src/components/Notification/index.tsx
+++ b/www/packages/docs-ui/src/components/Notification/index.tsx
@@ -52,11 +52,11 @@ export const NotificationContainer = () => {
    <>
      {renderFilteredNotifications(
        (notification) => notification.placement === "top",
-        "flex fixed flex-col gap-docs_0.5 right-0 top-0 z-[400] md:w-auto w-full max-h-[calc(100vh-57px)] overflow-y-auto"
+        "flex fixed flex-col gap-docs_0.5 right-0 top-0 md:w-auto w-full max-h-[calc(100vh-57px)] overflow-y-auto"
      )}
      {renderFilteredNotifications(
        (notification) => notification.placement !== "top",
-        "flex flex-col gap-docs_0.5 fixed right-0 bottom-0 z-[400] md:w-auto w-full max-h-[calc(100vh-57px)] overflow-y-auto"
+        "flex flex-col gap-docs_0.5 fixed right-0 bottom-0 md:w-auto w-full max-h-[calc(100vh-57px)] overflow-y-auto"
      )}
    </>
  )
--- a/www/packages/docs-ui/src/components/Search/Modal/index.tsx
+++ b/www/packages/docs-ui/src/components/Search/Modal/index.tsx
@@ -19,6 +19,7 @@ export type SearchModalProps = {
  suggestions: SearchSuggestionType[]
  checkInternalPattern?: RegExp
  filterOptions?: OptionType[]
+  className?: string
 }

 export const SearchModal = ({
@@ -27,6 +28,7 @@ export const SearchModal = ({
  isLoading = false,
  checkInternalPattern,
  filterOptions = [],
+  className,
 }: SearchModalProps) => {
  const modalRef = useRef<HTMLDialogElement | null>(null)
  const { isOpen, setIsOpen, defaultFilters, searchClient } = useSearch()
@@ -194,6 +196,7 @@ export const SearchModal = ({
      open={isOpen}
      onClose={() => setIsOpen(false)}
      passedRef={modalRef}
+      className={className}
    >
      <InstantSearch
        indexName={algolia.mainIndexName}
--- a/www/packages/docs-ui/src/components/Select/Dropdown/index.tsx
+++ b/www/packages/docs-ui/src/components/Select/Dropdown/index.tsx
@@ -115,7 +115,7 @@ export const SelectDropdown = ({
    <div
      className={clsx(
        "absolute top-full left-0 w-full",
-        "z-10 h-0 translate-y-0 overflow-hidden transition-transform",
+        "h-0 translate-y-0 overflow-hidden transition-transform",
        open && "h-auto translate-y-docs_0.5 !overflow-visible",
        className
      )}
--- a/www/packages/docs-ui/src/components/Sidebar/index.tsx
+++ b/www/packages/docs-ui/src/components/Sidebar/index.tsx
@@ -22,9 +22,9 @@ export const Sidebar = ({
      className={clsx(
        "clip bg-docs-bg dark:bg-docs-bg-dark w-ref-sidebar block",
        "border-medusa-border-base border-0 border-r border-solid",
-        "fixed -left-full top-[57px] h-screen transition-[left] lg:relative lg:left-0 lg:top-auto lg:h-auto",
-        "lg:w-sidebar z-[100] w-full lg:z-0",
-        mobileSidebarOpen && "!left-0",
+        "fixed -left-full top-0 h-screen transition-[left] lg:relative lg:left-0 lg:top-auto lg:h-auto",
+        "lg:w-sidebar w-full",
+        mobileSidebarOpen && "!left-0 z-50 top-[57px]",
        !desktopSidebarOpen && "!absolute !-left-full",
        className
      )}
@@ -34,7 +34,7 @@ export const Sidebar = ({
    >
      <ul
        className={clsx(
-          "sticky top-[57px] h-screen max-h-screen w-full list-none overflow-auto p-0",
+          "sticky top-0 h-screen max-h-screen w-full list-none overflow-auto p-0",
          "px-docs_1.5 pb-[57px] pt-docs_1.5"
        )}
        id="sidebar"