Merge branch 'v2-preview' into renbran/fix-search-styling

Author: Brene

client/src/amplify-ui/toc/toc-content/toc-content.tsx

@@ -11,7 +11,7 @@ export class AmplifyTOCContent {
    */
   @Prop() readonly setContent?: SetContent;
 
-  componentDidLoad() {
+  componentDidRender() {
     this.setContent && this.content && this.setContent(this.content);
   }
 

client/src/amplify-ui/toc/toc-provider/toc-provider.tsx

@@ -14,11 +14,13 @@ export class AmplifyTOCProvider {
 
   setContent: SetContent = (content: HTMLElement) => (this.content = content);
 
-  setElements = () =>
-    this.content &&
-    (this.elements = Array.from(
-      this.content.querySelectorAll("h2, h3"),
-    ).filter((e) => headingIsVisible(e)) as HTMLElement[]);
+  setElements = () => {
+    if (this.content) {
+      this.elements = Array.from(
+        this.content.querySelectorAll("h2, h3"),
+      ).filter((e) => headingIsVisible(e)) as HTMLElement[];
+    }
+  };
 
   // @ts-ignore
   @Watch("content")

client/src/amplify-ui/toc/toc/toc.tsx

@@ -64,24 +64,23 @@ export class AmplifyTOC {
     return (
       <Host class={tocStyle}>
         <div>
-          {this.elements && this.elements.length > 0 && (
+          {this.elements && (
             <h4 class={headerStyle}>{this.pageTitle || "Contents"}</h4>
           )}
-          {this.elements &&
-            this.elements.map((e, i) => {
-              const headingAnchorClass = headingStyleByTagName[e.tagName];
-              return (
-                <docs-in-page-link
-                  targetId={e.id}
-                  class={{
-                    active: i === this.activeLinkI,
-                    [headingAnchorClass]: true,
-                  }}
-                >
-                  <div innerHTML={e.innerHTML} />
-                </docs-in-page-link>
-              );
-            })}
+          {this.elements?.map((e, i) => {
+            const headingAnchorClass = headingStyleByTagName[e.tagName];
+            return (
+              <docs-in-page-link
+                targetId={e.id}
+                class={{
+                  active: i === this.activeLinkI,
+                  [headingAnchorClass]: true,
+                }}
+              >
+                <div innerHTML={e.innerHTML} />
+              </docs-in-page-link>
+            );
+          })}
         </div>
       </Host>
     );

client/src/components.d.ts

@@ -376,6 +376,10 @@ export namespace Components {
           * * component tag for documented component page
          */
         "tag": string;
+        /**
+          * * whether or not the table contains header tags
+         */
+        "useTableHeaders": boolean;
     }
 }
 declare global {
@@ -1068,6 +1072,10 @@ declare namespace LocalJSX {
           * * component tag for documented component page
          */
         "tag"?: string;
+        /**
+          * * whether or not the table contains header tags
+         */
+        "useTableHeaders"?: boolean;
     }
     interface IntrinsicElements {
         "amplify-callout": AmplifyCallout;

client/src/docs-ui/menu/menu.tsx

@@ -51,12 +51,10 @@ export class DocsMenu {
         <docs-version-switch
           leftOption={{
             title: "Latest",
-            subTitle: "(v2)",
             href: "/ui",
           }}
           rightOption={{
             title: "Legacy",
-            subTitle: "(v1)",
             href: "/ui-legacy",
           }}
         />

client/src/docs-ui/page/__snapshots__/page.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`docs-page Render logic should render 1`] = `
 <docs-page class="css-mg8ajq">
   <docs-universal-nav blend="" brand-icon="/assets/logo-light.svg" brand-icon-blend="/assets/logo-dark.svg" heading="Amplify Docs"></docs-universal-nav>
   <docs-secondary-nav></docs-secondary-nav>
-  <div class="css-1dm9jwm">
+  <div class="css-1o5ehio">
     <amplify-toc-provider>
       <amplify-sidebar-layout>
         <amplify-sidebar-layout-main class="css-1j9n6qe" slot="main">

client/src/docs-ui/page/page.style.ts

@@ -21,6 +21,10 @@ export const sidebarLayoutStyle = css`
     }
   }
 
+  amplify-toc-contents h4 {
+    margin-bottom: 1rem;
+  }
+
   amplify-sidebar-layout-toggle {
     position: fixed;
     right: 1rem;

client/src/docs-ui/ui-component-props/__snapshots__/ui-component-props.spec.ts.snap

@@ -2,10 +2,8 @@
 
 exports[`ui-component-props Render logic should render 1`] = `
 <ui-component-props>
-  <docs-in-page-link targetid="props-undefined">
-    <h2 id="props-undefined">
-      Properties
-    </h2>
-  </docs-in-page-link>
+  <h4>
+    Properties
+  </h4>
 </ui-component-props>
 `;

client/src/docs-ui/ui-component-props/ui-component-props.spec.ts

@@ -8,7 +8,6 @@ describe("ui-component-props", () => {
 
     it("should init `tag` as `undefined`", () =>
       expect(uiComponentProps.tag).toBeUndefined());
-
   });
 
   describe("Render logic", () => {

client/src/docs-ui/ui-component-props/ui-component-props.style.ts

@@ -3,14 +3,24 @@ import {css} from "emotion";
 export const tableStyle = css`
   text-align: left;
   width: 100%;
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+
   thead tr {
     background-color: var(--bg-color-tertiary);
   }
   tbody tr th {
     width: 5rem;
   }
-  h3 {
-    font-size: 1.25rem;
-    margin-top: 0.75rem;
-  }
+`;
+
+export const sectionHeaderStyle = css`
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+`;
+
+export const tableHeaderStyle = css`
+  font-size: 1rem;
+  margin: 0.75rem 0;
 `;