[pull] latest from ag-grid:latest

external/ag-website-shared/src/components/search/SearchBox.module.scss

@@ -26,7 +26,7 @@
 
 input[type='search'].searchInput {
     width: 100%;
-    height: var(--input-height);
+    height: 76px;
     padding: $spacing-size-6 $spacing-size-6 $spacing-size-6 $spacing-size-16;
     font-size: 20px;
     border: none;

external/ag-website-shared/src/components/search/SearchControls.module.scss

@@ -10,8 +10,8 @@
 .controlsOuter {
     justify-content: flex-end;
     gap: $spacing-size-4;
-    padding: $spacing-size-4 $spacing-size-6;
-    height: var(--controls-height);
+    padding: 0 $spacing-size-5;
+    height: 56px;
     border-top: 1px solid var(--color-border-secondary);
 
     #{$selector-darkmode} & {

external/ag-website-shared/src/components/search/SearchHits.jsx

@@ -99,11 +99,15 @@ export default ({ closeModal, structuredHits, selectedHit, setSelectedHit, query
                                         <Icon name={icon} />
                                     </span>
 
-                                    <p className={styles.titleSection}>
-                                        <span className={styles.title}>{hit.title}</span>
-                                        <span className={styles.heading}>{hit.heading && <> - {hit.heading}</>}</span>
-                                    </p>
-                                    <p className={styles.text}>{hit.text}</p>
+                                    <div className={styles.hitTextWrapper}>
+                                        <p className={styles.titleSection}>
+                                            <span className={styles.title}>{hit.title}</span>
+                                            <span className={styles.heading}>
+                                                {hit.heading && <> - {hit.heading}</>}
+                                            </span>
+                                        </p>
+                                        <p className={styles.text}>{hit.text}</p>
+                                    </div>
                                 </article>
                             </a>
                         );

external/ag-website-shared/src/components/search/SearchHits.module.scss

@@ -6,7 +6,7 @@
     padding-bottom: $spacing-size-4;
     font-size: 18px;
     border-top: 1px solid var(--color-border-secondary);
-    max-height: calc(var(--container-height) - var(--input-height));
+    max-height: min(643px, calc(100vh - 246px));
     overflow: auto;
     overscroll-behavior: contain;
 
@@ -19,64 +19,40 @@
         position: relative;
         z-index: 1;
     }
-
-    @media screen and (min-width: $breakpoint-docs-search-small) {
-        max-height: calc(100vh - 450px);
-
-        &::after {
-            content: '';
-            position: fixed;
-            width: 100%;
-            height: $spacing-size-24;
-            left: 0;
-            bottom: var(--controls-height);
-            background-image: linear-gradient(transparent, var(--color-bg-primary));
-            pointer-events: none;
-
-            #{$selector-darkmode} & {
-                background-image: linear-gradient(
-                    transparent,
-                    color-mix(in srgb, var(--color-bg-primary), var(--color-fg-primary) 6%)
-                );
-            }
-        }
-    }
 }
 
 .hit {
     position: relative;
-    display: grid;
-    grid-template:
-        'icon title' min-content
-        'icon text' min-content / max-content 1fr;
-    margin: 0 $spacing-size-4;
-    padding: $spacing-size-4;
+    gap: $spacing-size-4;
+    display: flex;
+    margin: 0 $spacing-size-6;
+    padding: $spacing-size-3;
     border-radius: var(--radius-md);
     cursor: pointer;
+    align-items: center;
 
     &[data-selected='true'] {
-        background: rgba(4, 75, 147, 1);
+        background-color: var(--color-brand-50);
+        box-shadow: inset 0px 0px 0px 1px var(--color-brand-300);
         z-index: 1;
         #{$selector-darkmode} & {
-            background-color: var(--color-brand-300);
-            span,
-            p {
-                color: var(--color-bg-primary);
-            }
+            background-color: var(--color-bg-secondary);
+        }
+        :global(.icon) {
+            --icon-color: var(--color-text-brand-primary);
         }
     }
 }
 
 .hitIcon {
-    grid-area: icon;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 52px;
-    height: 52px;
-    margin-right: $spacing-size-4;
+    flex: none;
+    width: 40px;
+    height: 40px;
     border-radius: var(--radius-md);
-    background-color: var(--color-bg-secondary);
+    background-color: var(--color-bg-primary);
     border: 1px solid var(--color-border-primary);
     box-shadow: var(--shadow-xs);
 
@@ -85,8 +61,9 @@
     }
 
     :global(.icon) {
-        --icon-size: #{$spacing-size-8};
-        --icon-color: var(--color-bg-brand-solid);
+        --icon-size: #{$spacing-size-6};
+        --icon-color: var(--color-fg-secondary);
+        transition: none; //There is a transition set to the global icon that makes this color change appear slow
 
         #{$selector-darkmode} & {
             --icon-color: var(--color-fg-primary);
@@ -95,6 +72,11 @@
     }
 }
 
+.hitTextWrapper {
+    max-width: 100%;
+    overflow: hidden;
+}
+
 .titleSection,
 .title,
 .text {
@@ -103,30 +85,24 @@
     text-decoration: none;
     overflow: hidden;
     font-size: var(--text-fs-base);
-
-    [data-selected='true'] & {
-        color: var(--color-bg-primary);
-
-        #{$selector-darkmode} & {
-            color: var(--color-white);
-        }
-    }
+    width: 100%;
 }
 
 .titleSection {
-    grid-area: title;
     margin-bottom: 0;
 }
 
 .title {
     color: var(--color-fg-primary);
     font-weight: var(--text-semibold);
+    [data-selected='true'] & {
+        color: var(--color-text-brand-primary);
+    }
 }
 
 .text {
-    grid-area: text;
     font-weight: var(--text-regular);
-    color: var(--text-color-secondary);
+    font-size: var(--text-fs-sm);
 
     // Disable Safari's automatic tooltip for truncated text
     &::after {
@@ -136,15 +112,14 @@
 }
 
 .crumbContainer {
-    padding: $spacing-size-3 0 $spacing-size-3 $spacing-size-8;
-    padding-bottom: $spacing-size-2;
+    padding: $spacing-size-3 0 $spacing-size-2 $spacing-size-6;
 }
 
 .crumb {
     font-weight: var(--text-semibold);
     text-decoration: none;
     color: var(--color-text-primary);
-    font-size: var(--text-fs-base);
+    font-size: var(--text-fs-sm);
 
     #{$selector-darkmode} & {
         color: var(--color-white);
@@ -170,7 +145,6 @@
         --icon-size: #{$spacing-size-10};
         --icon-color: var(--color-text-secondary);
         opacity: 0.7;
-
         margin-bottom: $spacing-size-2;
     }
 
@@ -181,4 +155,9 @@
 
 .hitLink {
     color: var(--color-text-tertiary);
+
+    // fixes hover inherited color styles on the text
+    &:hover {
+        color: inherit;
+    }
 }

external/ag-website-shared/src/components/search/SearchModal.module.scss

@@ -47,26 +47,17 @@
 }
 
 .container {
-    --input-height: 76px;
-    --controls-height: 66px;
-    --container-height: calc(100vh - 180px);
-
     position: fixed;
     top: 50px;
     left: 50%;
     transform: translateX(-50%);
     width: 850px;
     max-width: calc(100vw - #{$spacing-size-8});
-    max-height: var(--container-height);
     background: var(--color-bg-primary);
     border-radius: 12px;
     box-shadow: 0px 25px 50px -12px rgba(16, 24, 40, 0.25);
     overflow: hidden;
 
-    @media screen and (min-width: $breakpoint-docs-search-small) {
-        --container-height: calc(100vh - 100px);
-    }
-
     #{$selector-darkmode} & {
         background: color-mix(in srgb, var(--color-bg-primary), var(--color-fg-primary) 6%);
     }