Merge conflicts

powerhome · Feb 7, 2025 · 5360d48 · 5360d48
2 parents 888c438 + 3923e0b
commit 5360d48
Show file tree

Hide file tree

Showing 34 changed files with 717 additions and 205 deletions.
diff --git a/playbook-website/app/javascript/components/KitSearch.tsx b/playbook-website/app/javascript/components/KitSearch.tsx
@@ -1,19 +1,35 @@
-import React, { useEffect, useState } from 'react'
-import { Typeahead } from 'playbook-ui'
+import { useEffect, useState } from 'react'
+import { Typeahead, Badge, Flex } from 'playbook-ui'
 import { matchSorter } from 'match-sorter'
+import { VisualGuidelinesItems } from './MainSidebar/MenuData/GuidelinesNavItems'
 
 type Kit = {
   label: string,
   value: string,
 }
 
 type KitSearchProps = {
-  classname: String,
+  classname: string,
   kits: Kit[],
-  id: String,
+  id: string,
 }
+
+interface VisualGuidelineItem {
+  label: string,
+  value: string,
+}
+
+const combineKitsandVisualGuidelines = (
+  kits: Kit[],
+  VisualGuidelineItems: VisualGuidelineItem[]):
+  (Kit | VisualGuidelineItem)[] => {
+  return [...kits, ...VisualGuidelineItems].sort((a, b) => a.label.localeCompare(b.label))
+}
+
 const KitSearch = ({ classname, id, kits }: KitSearchProps) => {
-  const [filteredKits, setFilteredKits] = useState(kits)
+  const kitsAndGuidelines = combineKitsandVisualGuidelines(kits, VisualGuidelinesItems)
+
+  const [filteredKits, setFilteredKits] = useState(kitsAndGuidelines)
 
   useEffect(() => {
     if (id === 'desktop-kit-search') {
@@ -34,23 +50,39 @@ const KitSearch = ({ classname, id, kits }: KitSearchProps) => {
 
   const handleFilteredKits = (query: string) => {
     if (query) {
-      const results = matchSorter(kits, query, { keys: ['label'] })
+      const results = matchSorter(kitsAndGuidelines, query, { keys: ['label'] })
       setFilteredKits(results)
     } else {
-      setFilteredKits(kits)
+      setFilteredKits(kitsAndGuidelines)
     }
   }
 
+  const Item = ({ labelLeft }: { labelLeft: string }) => (
+    <Flex alignItems="center" justify="between">
+        {labelLeft}
+        <Badge
+          className="global-prop"
+          dark
+          margin="xs"
+          text="Global Prop"
+          variant="primary"
+        />
+    </Flex>
+  )
+
   return (
     <div>
       <Typeahead
-          className={classname}
-          dark={document.cookie.split('; ').includes('dark_mode=true')}
-          id={id}
-          onChange={handleChange}
-          onInputChange={handleFilteredKits}
-          options={filteredKits}
-          placeholder="Search..."
+        className={classname}
+        dark={document.cookie.split("; ").includes("dark_mode=true")}
+        id={id}
+        onChange={handleChange}
+        onInputChange={handleFilteredKits}
+        options={filteredKits}
+        placeholder="Search..."
+        valueComponent={({ label, value }: { label: string, value: string }) => (
+          value.includes("guidelines") ? <Item labelLeft={label} /> : <>{label}</>
+        )}
       />
     </div>
   )

diff --git a/playbook-website/app/javascript/components/MainSidebar/MenuData/GuidelinesNavItems.ts b/playbook-website/app/javascript/components/MainSidebar/MenuData/GuidelinesNavItems.ts
@@ -1,98 +1,98 @@
 export const VisualGuidelinesItems = [
     {
-        name: "Colors",
-        link: "/visual_guidelines/colors"
+        label: "Colors",
+        value: "/visual_guidelines/colors"
     },
     {
-        name: "Width",
-        link: "/visual_guidelines/width"
+        label: "Width",
+        value: "/visual_guidelines/width"
     },
     {
-        name: "Min Width",
-        link: "/visual_guidelines/min_width"
+        label: "Min Width",
+        value: "/visual_guidelines/min_width"
     },
     {
-        name: "Max Width",
-        link: "/visual_guidelines/max_width"
+        label: "Max Width",
+        value: "/visual_guidelines/max_width"
     },
     {
-        name: "Height",
-        link: "/visual_guidelines/height"
+        label: "Height",
+        value: "/visual_guidelines/height"
     },
     {
-        name: "Min Height",
-        link: "/visual_guidelines/min_height"
+        label: "Min Height",
+        value: "/visual_guidelines/min_height"
     },
     {
-        name : "Max Height",
-        link: "/visual_guidelines/max_height"
+        label : "Max Height",
+        value: "/visual_guidelines/max_height"
     },
     {
-        name: "Position",
-        link: "/visual_guidelines/position"
+        label: "Position",
+        value: "/visual_guidelines/position"
     },
     {
-        name: "Vertical Align",
-        link: "/visual_guidelines/vertical_align"
+        label: "Vertical Align",
+        value: "/visual_guidelines/vertical_align"
     },
     {
-        name: "Z-Index",
-        link: "/visual_guidelines/z_index"
+        label: "Z-Index",
+        value: "/visual_guidelines/z_index"
     },
     {
-        name: "Line Height",
-        link: "/visual_guidelines/line_height"
+        label: "Line Height",
+        value: "/visual_guidelines/line_height"
     },
     {
-        name: "Number Spacing",
-        link: "/visual_guidelines/number_spacing"
+        label: "Number Spacing",
+        value: "/visual_guidelines/number_spacing"
     },
     {
-        name: "Shadows",
-        link: "/visual_guidelines/shadows"
+        label: "Shadows",
+        value: "/visual_guidelines/shadows"
     },
     {
-        name: "Spacing",
-        link: "/visual_guidelines/spacing"
+        label: "Spacing",
+        value: "/visual_guidelines/spacing"
     },
     {
-        name: "Border Radius",
-        link: "/visual_guidelines/border_radius"
+        label: "Border Radius",
+        value: "/visual_guidelines/border_radius"
     },
     {
-        name: "Typography",
-        link: "/visual_guidelines/typography"
+        label: "Typography",
+        value: "/visual_guidelines/typography"
     },
     {
-        name: "Display",
-        link: "/visual_guidelines/display"
+        label: "Display",
+        value: "/visual_guidelines/display"
     },
     {
-        name: "Cursor",
-        link: "/visual_guidelines/cursor"
+        label: "Cursor",
+        value: "/visual_guidelines/cursor"
     },
     {
-        name: "Flex Box",
-        link: "/visual_guidelines/flex_box"
+        label: "Flex Box",
+        value: "/visual_guidelines/flex_box"
     },
     {
-        name: "Hover",
-        link: "/visual_guidelines/hover"
+        label: "Hover",
+        value: "/visual_guidelines/hover"
     },
     {
-        name: "Group Hover",
-        link: "/visual_guidelines/group_hover"
+        label: "Group Hover",
+        value: "/visual_guidelines/group_hover"
     },
     {
-        name: "Text Align",
-        link: "/visual_guidelines/text_align"
+        label: "Text Align",
+        value: "/visual_guidelines/text_align"
     },
     {
-        name: "Overflow",
-        link: "/visual_guidelines/overflow"
+        label: "Overflow",
+        value: "/visual_guidelines/overflow"
     },
     {
-        name: "Truncate",
-        link: "/visual_guidelines/truncate"
+        label: "Truncate",
+        value: "/visual_guidelines/truncate"
     },
   ];
diff --git a/playbook-website/app/javascript/components/MainSidebar/NavComponents/OtherNavComponent.tsx b/playbook-website/app/javascript/components/MainSidebar/NavComponents/OtherNavComponent.tsx
@@ -36,7 +36,7 @@ export const OtherNavItems = ({
     }
   }
   let menuItems: { [key: string]: string }[] | string[] = []
-  
+
   const guidesNavItems = getting_started["pages"].map(guide => ({
     name: guide.title,
     link: `/${guide.url}`
@@ -52,9 +52,14 @@ export const OtherNavItems = ({
     link: `/${guide.url}`
   }))
 
+  const tokensAndGuidelinesMenu = VisualGuidelinesItems.map(guide => ({
+    name: guide.label,
+    link: guide.value
+  }))
+
   //conditionally render navitems depending on name
   if (name === "Tokens & Guidelines") {
-    menuItems = VisualGuidelinesItems
+    menuItems = tokensAndGuidelinesMenu
   } else if (name === "UI Samples" && samples) {
     menuItems = samplesMenu
   } else if (name === "Getting Started") {

diff --git a/playbook/CHANGELOG.md b/playbook/CHANGELOG.md
@@ -1,5 +1,9 @@
-# 14.12.0
-#### January 24, 2025
+# Table It Like It’s Hot: Row Selection Has Arrived!
+##### January 24, 2025
+
+![selectable-table-release](https://github.com/user-attachments/assets/ce8dbed8-10c2-4535-bb7a-c0d72250ad99)
+
+Selecting rows just got way easier! Our Advanced Table now lets you pick one or many with simple checkboxes. Batch actions? Handled. Less hassle? Guaranteed. Get clicking!
 
 [14.12.0](https://github.com/powerhome/playbook/tree/14.12.0) full list of changes:
 

diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss
@@ -93,6 +93,43 @@
     color: $primary !important;
   }
 
+  // Sticky Header
+  .sticky-header {
+    thead {
+      z-index: 3 !important;
+    }
+  }
+
+  // Max height overflow - the below prevents expansion from overflowing container at full screen for responsive and nonresponsive tables
+  &.advanced-table-max-height-xs {
+    max-height: 320px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-sm {
+    max-height: 480px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-md {
+    max-height: 768px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-lg {
+    max-height: 1024px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-xl {
+    max-height: 1280px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-xxl {
+    max-height: 1440px;
+    overflow-y: auto;
+  }
+  &.advanced-table-max-height-xxxl {
+    max-height: 1920px;
+    overflow-y: auto;
+  }
+
   // Icons
   .button-icon {
     display: flex;
@@ -214,7 +251,6 @@
       .bg-white td:first-child {
           background-color: $white;
       }
-
       .row-selection-actions-card {
         border-right-width: 0px;
         border-left-width: 0px;
@@ -226,6 +262,18 @@
       .checkbox-cell {
         display: table-cell !important;
       }
+      .sticky-header {
+        thead {
+          th:first-child {
+            box-shadow: 1px 0 10px -2px $border_light !important;
+          }
+        }
+      }
+    }
+  }
+  @media only screen and (min-width: $screen-xl-min) {
+    &[class*="advanced-table-responsive-scroll"] {
+      overflow-x: visible;
     }
   }
 
@@ -308,6 +356,14 @@
         .bg-white td:first-child {
           background-color: $bg_dark_card;
         }
+        .sticky-header {
+          thead {
+            th:first-child {
+              background: $bg_dark;
+              box-shadow: 1px 0 10px -2px $border_dark !important;
+            }
+          }
+        }
       }
     }
   }

diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx
@@ -49,6 +49,7 @@ type AdvancedTableProps = {
   initialLoadingRowsCount?: number
   inlineRowLoading?: boolean
   loading?: boolean | string
+  maxHeight?: "auto" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl"
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void
   pagination?: boolean,
@@ -80,6 +81,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     initialLoadingRowsCount = 10,
     inlineRowLoading = false,
     loading,
+    maxHeight,
     onRowToggleClick,
     onToggleExpansionClick,
     pagination = false,
@@ -289,6 +291,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const classes = classnames(
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
+    maxHeight ? `advanced-table-max-height-${maxHeight}` : '', // max height as kit prop not global prop to control overflow-y
     globalProps(props),
     className
   )

diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx
@@ -44,6 +44,7 @@ const AdvancedTableTableProps = (props) => {
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
+          responsive="none"
           tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}

diff --git a/...pp/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md b/...pp/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md
@@ -1 +1,3 @@
-This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with it's own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).
+This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with it's own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).
+
+This doc example showcases how to set a sticky header for a nonresponsive table. To achieve sticky header AND responsive functionality, see the ["Table Props Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#table-props-sticky-header) doc example below.