playbook_ui 14.9.0.pre.alpha.play1742globalheightfixes4766 → 14.9.0.pre.rc.0

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
-import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 
 type LayoutPropTypes = {
   aria?: {[key: string]: string},
@@ -19,42 +19,39 @@ type LayoutPropTypes = {
   variant?: "light" | "dark" | "gradient",
   transparent?: boolean,
   layout?: "sidebar" | "collection" | "kanban" | "content" | "masonry",
-} & GlobalProps
+}
 
 type LayoutSideProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-} & GlobalProps
+}
 
 type LayoutBodyProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-} & GlobalProps
+}
 
 type LayoutItemProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   size?: "sm" | "md" | "lg"
-} & GlobalProps
+}
 
 type LayoutHeaderProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-} & GlobalProps
+}
 
 type LayoutFooterProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-} & GlobalProps
+}
 
+// Side component
 const Side = (props: LayoutSideProps) => {
   const { children, className } = props
-  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div
-        className={classnames('layout_sidebar', globalProps(props), className)}
-        style={dynamicInlineProps}
-    >
+    <div className={classnames('layout_sidebar', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -63,12 +60,8 @@ const Side = (props: LayoutSideProps) => {
 // Body component
 const Body = (props: LayoutBodyProps) => {
   const { children, className } = props
-  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div
-        className={classnames('layout_body', globalProps(props), className)}
-        style={dynamicInlineProps}
-    >
+    <div className={classnames('layout_body', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -78,12 +71,8 @@ const Body = (props: LayoutBodyProps) => {
 const Item = (props: LayoutItemProps) => {
   const { children, className, size = 'sm' } = props
   const sizeClass = `size_${size}`
-  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div
-        className={classnames('layout_item', sizeClass, globalProps(props), className)}
-        style={dynamicInlineProps}
-    >
+    <div className={classnames('layout_item', sizeClass, globalProps(props), className)}>
       {children}
     </div>
   )
@@ -92,12 +81,8 @@ const Item = (props: LayoutItemProps) => {
 // Header component
 const Header = (props: LayoutHeaderProps) => {
   const { children, className } = props
-  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div
-        className={classnames('layout_header', globalProps(props), className)}
-        style={dynamicInlineProps}
-    >
+    <div className={classnames('layout_header', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -106,12 +91,8 @@ const Header = (props: LayoutHeaderProps) => {
 // Footer component
 const Footer = (props: LayoutFooterProps) => {
   const { children, className } = props
-  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div
-        className={classnames('layout_footer', globalProps(props), className)}
-        style={dynamicInlineProps}
-    >
+    <div className={classnames('layout_footer', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -178,8 +159,6 @@ const Layout = (props: LayoutPropTypes) => {
   const filteredProps = {...props}
   delete filteredProps?.position
 
-  const dynamicInlineProps = globalInlineProps(props)
-
   return (
     <div
         {...ariaProps}
@@ -192,8 +171,7 @@ const Layout = (props: LayoutPropTypes) => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore
         globalProps(filteredProps)
-        )}
-        style={dynamicInlineProps}
+      )}
     >
       {subComponentTags('Side')}
       {nonSideChildren}

data/app/pb_kits/playbook/pb_overlay/_overlay.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 import OverlayPercentage from './subcomponents/_overlay_percentage'
 import OverlayToken from './subcomponents/_overlay_token'
 
@@ -39,7 +39,6 @@ const Overlay = (props: OverlayProps) => {
     const dataProps = buildDataProps(data)
     const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
     const htmlProps = buildHtmlProps(htmlOptions)
-    const dynamicInlineProps = globalInlineProps(props)
 
     const getPosition = () => {
         return Object.keys(layout)[0]
@@ -58,7 +57,6 @@ const Overlay = (props: OverlayProps) => {
             {...htmlProps}
             className={classes}
             id={id}
-            style={dynamicInlineProps}
         >
             {isSizePercentage ?
                 OverlayPercentage({

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import classnames from 'classnames'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import Icon from '../pb_icon/_icon';
 
@@ -14,7 +14,7 @@ type PaginationProps = {
   onChange?: (pageNumber: number) => void;
   range?: number;
   total?: number;
-} & GlobalProps;
+};
 
 const Pagination = ( props: PaginationProps) => {
   const {

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
-
-type ModifiedGlobalProps = Omit<GlobalProps, 'width'>
+import { globalProps } from '../utilities/globalProps'
 
 type ProgressSimpleProps = {
   align?: "left" | "center" | "right",
@@ -18,7 +16,7 @@ type ProgressSimpleProps = {
   value: number,
   variant?: "default" | "positive" | "negative" | "warning",
   width: string,
-} & ModifiedGlobalProps
+}
 
 const ProgressSimple = (props: ProgressSimpleProps): React.ReactElement => {
   const {
@@ -58,7 +56,7 @@ const ProgressSimple = (props: ProgressSimpleProps): React.ReactElement => {
   )
 
   return (
-    <div
+    <div 
         {...dataProps}
         {...htmlProps}
         className={wrapperClass}

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb

@@ -1,10 +1,9 @@
-<%= content_tag(:div,
-class: object.wrapper_classname,
-style: object.style) do %>
+<%= content_tag(:div, class: object.wrapper_classname) do %>
   <%= content_tag(:div,
   id: object.id,
   data: object.data_values,
   class: object.classname,
+  style: object.style,
   **combined_html_options) do %>
     <%= content_tag(:div, "",
       class: "progress_simple_value",

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb

@@ -21,11 +21,6 @@ module Playbook
                      values: %w[default positive negative warning],
                      default: "default"
 
-      # Explicitly defining the width prop here so the local prop takes precedence over global width prop
-      def width
-        prop(:width)
-      end
-
       def number_value
         validate_required_progress_props
 

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 
 import Caption from '../pb_caption/_caption'
 
@@ -38,7 +38,6 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : ""), globalProps(props), className)
-  const dynamicInlineProps = globalInlineProps(props)
 
   return (
 
@@ -48,7 +47,6 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
         {...htmlProps}
         className={classes}
         id={id}
-        style={dynamicInlineProps}
     >
       {
         children && children ||

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb

@@ -6,7 +6,6 @@
     value: "selected_with_icon",
     checked: true,
     icon: true,
-
   }) do %>
     Selected, with icon
   <% end %>
@@ -37,4 +36,4 @@
     Disabled
   <% end %>
 
-</div>
+</div>

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 import PbTable from '.'
 import {
-    TableHead,
-    TableHeader,
-    TableBody,
-    TableRow,
-    TableCell,
+  TableHead,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
 } from "./subcomponents";
 
 type TableProps = {
@@ -28,7 +28,6 @@ type TableProps = {
     singleLine?: boolean,
     size?: "sm" | "md" | "lg",
     sticky?: boolean,
-    stickyLeftcolumn?: string[],
     striped?: boolean,
     tag?: "table" | "div",
     verticalBorder?: boolean,
@@ -52,7 +51,6 @@ const Table = (props: TableProps): React.ReactElement => {
         singleLine = false,
         size = 'sm',
         sticky = false,
-        stickyLeftcolumn = [],
         striped = false,
         tag = 'table',
         verticalBorder = false,
@@ -66,7 +64,6 @@ const Table = (props: TableProps): React.ReactElement => {
     const spaceCssName = outerPadding !== 'none' ? 'space_' : ''
     const outerPaddingCss = outerPadding ? `outer_padding_${spaceCssName}${outerPadding}` : ''
     const isTableTag = tag === 'table'
-    const dynamicInlineProps = globalInlineProps(props)
 
     const classNames = classnames(
         'pb_table',
@@ -79,7 +76,6 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
-            'sticky-left-column': stickyLeftcolumn,
             'striped': striped,
             [outerPaddingCss]: outerPadding !== '',
         },
@@ -89,56 +85,6 @@ const Table = (props: TableProps): React.ReactElement => {
         className
     )
 
-    useEffect(() => {
-        const handleStickyColumns = () => {
-            let accumulatedWidth = 0;
-    
-            stickyLeftcolumn.forEach((colId, index) => {
-                const isLastColumn = index === stickyLeftcolumn.length - 1;
-                const header = document.querySelector(`th[id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[id="${colId}"]`);
-    
-                if (header) {
-                    header.classList.add('sticky');
-                    (header as HTMLElement).style.left = `${accumulatedWidth}px`;
-    
-                    if (!isLastColumn) {
-                        header.classList.add('with-border');
-                        header.classList.remove('sticky-shadow');
-                    } else {
-                        header.classList.remove('with-border');
-                        header.classList.add('sticky-shadow');
-                    }
-    
-                    accumulatedWidth += (header as HTMLElement).offsetWidth;
-                }
-    
-                cells.forEach((cell) => {
-                    cell.classList.add('sticky');
-                    (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
-                    
-                    if (!isLastColumn) {
-                        cell.classList.add('with-border');
-                        cell.classList.remove('sticky-shadow');
-                    } else {
-                        cell.classList.remove('with-border');
-                        cell.classList.add('sticky-shadow');
-                    }
-                });
-            });
-        };
-
-        setTimeout(() => {
-            handleStickyColumns();
-        }, 10);
-
-        window.addEventListener('resize', handleStickyColumns);
-
-        return () => {
-            window.removeEventListener('resize', handleStickyColumns);
-        };
-    }, [stickyLeftcolumn]);
-
     useEffect(() => {
         const instance = new PbTable()
         instance.connect()
@@ -146,56 +92,26 @@ const Table = (props: TableProps): React.ReactElement => {
 
     return (
         <>
-            {responsive === 'scroll' ? (
-                <div className='table-responsive-scroll'>
-                    {isTableTag ? (
-                        <table
-                            {...ariaProps}
-                            {...dataProps}
-                            {...htmlProps}
-                            className={classNames}
-                            id={id}
-                            style={dynamicInlineProps}
-                        >
-                            {children}
-                        </table>
-                    ) : (
-                        <div
-                            {...ariaProps}
-                            {...dataProps}
-                            {...htmlProps}
-                            className={classNames}
-                            id={id}
-                            style={dynamicInlineProps}
-                        >
-                            {children}
-                        </div>
-                    )}
-                </div>
+            {isTableTag ? (
+                <table
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                >
+                    {children}
+                </table>
             ) : (
-                isTableTag ? (
-                    <table
-                        {...ariaProps}
-                        {...dataProps}
-                        {...htmlProps}
-                        className={classNames}
-                        id={id}
-                        style={dynamicInlineProps}
-                    >
-                        {children}
-                    </table>
-                ) : (
-                    <div
-                        {...ariaProps}
-                        {...dataProps}
-                        {...htmlProps}
-                        className={classNames}
-                        id={id}
-                        style={dynamicInlineProps}
-                    >
-                        {children}
-                    </div>
-                )
+                <div
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                >
+                    {children}
+                </div>
             )}
         </>
     )

data/app/pb_kits/playbook/pb_table/docs/index.js

@@ -25,4 +25,3 @@ export { default as TableDiv } from './_table_div.jsx'
 export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
 export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
 export { default as TableOuterPadding } from './_table_outer_padding.jsx'
-export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'

data/app/pb_kits/playbook/pb_table/styles/_all.scss

@@ -20,5 +20,3 @@
 @import "table_header";
 @import "striped";
 @import "outer_padding";
-@import "sticky_columns";
-@import "scroll";

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb

@@ -41,50 +41,3 @@
       }) %>
     <% end %>
 <% end %>
-
-<br /><br /><br />
-
-<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
-  <%= pb_rails("timeline/item") do |item| %>
-
-    <% item.label do %>
-      <%= pb_rails("timeline/label") do %>
-        <%= pb_rails("title", props: { text: "Any Kit", size: 4 }) %>
-      <% end %>
-    <% end %>
-  
-    <% item.step do %>
-      <%= pb_rails("timeline/step", props: { icon: 'user', icon_color: 'royal' }) %>
-    <% end %>
-  
-    <% item.detail do %>
-      <%= pb_rails("title_detail", props: {
-        title: "Jackson Heights",
-        detail: "37-27 74th Street"
-      }) %>
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1, line_style: "dotted" }) do |item| %>
-    <%= pb_rails("title_detail", props: {
-        title: "Society Hill",
-        detail: "72 E St Astoria"
-    }) %>
-  <% end %>
-
-  <%= pb_rails("timeline/item") do |item| %>
-
-    <% item.step do %>
-      <%= pb_rails("timeline/step") do %>
-        <%= pb_rails("pill", props: { text: "3" , variant: "success" }) %>
-      <% end %>
-    <% end %>
-  
-    <% item.detail do %>
-      <%= pb_rails("title_detail", props: {
-        title: "Greenpoint",
-        detail: "81 Gate St Brooklyn"
-      }) %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx

@@ -62,65 +62,6 @@ const TimelineWithChildren = (props) => (
         </Timeline.Detail>
       </Timeline.Item>
     </Timeline>
-
-    <br />
-    <br />
-    <br />
-
-    <Timeline orientation="vertical"
-        showDate
-        {...props}
-    >
-      <Timeline.Item lineStyle="solid"
-          {...props}
-      >
-        <Timeline.Label>
-          <Title size={4}
-              text='Any Kit'
-          />
-        </Timeline.Label>
-        <Timeline.Step icon="user"
-            iconColor="royal"
-        />
-        <Timeline.Detail>
-          <TitleDetail detail="37-27 74th Street"
-              title="Jackson Heights"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-
-      <Timeline.Item lineStyle="dotted"
-          {...props}
-      >
-        <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
-        <Timeline.Step icon="map-marker-alt"
-            iconColor="purple"
-        />
-        <Timeline.Detail>
-          <TitleDetail detail="72 E St Astoria"
-              title="Society Hill"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-
-      <Timeline.Item lineStyle="solid"
-          {...props}
-      >
-        <Timeline.Step>
-          <Pill text="3"
-              variant="success"
-          />
-        </Timeline.Step>
-        <Timeline.Detail>
-          <TitleDetail detail="81 Gate St Brooklyn"
-              title="Greenpoint"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-    </Timeline>
   </div>
 )
 

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -2,7 +2,6 @@
 @import "../tokens/border_radius";
 @import "../tokens/spacing";
 @import "../tokens/shadows";
-@import "../tokens/positioning";
 
 [class^=pb_typeahead_kit] {
   .typeahead-kit-select__option {
@@ -100,7 +99,6 @@
     .typeahead-kit-select__menu {
       background-color: $bg_dark;
       color: $white;
-      z-index: $z_1;
     }
     .typeahead-kit-select__option:hover {
       background-color: $active_dark;
@@ -184,7 +182,6 @@
   }
  
   .typeahead-kit-select__menu {
-    z-index: $z_1;
     .typeahead-kit-select__menu-list {
       padding: 0;
     }

data/app/pb_kits/playbook/pb_typeahead/index.ts

@@ -4,12 +4,11 @@ import { debounce } from 'lodash'
 export default class PbTypeahead extends PbEnhancedElement {
   _searchInput: HTMLInputElement
   _resultsElement: HTMLElement
-  _debouncedSearch: () => void
+  _debouncedSearch: Function
   _resultsLoadingIndicator: HTMLElement
   _resultOptionTemplate: HTMLElement
   _resultsOptionCache: Map<string, Array<DocumentFragment>>
   _searchContext: string
-  _validSelection: boolean
 
   static get selector() {
     return '[data-pb-typeahead-kit]'
@@ -87,9 +86,6 @@ export default class PbTypeahead extends PbEnhancedElement {
     const resultOption = (event.target as Element).closest('[data-result-option-item]')
     if (!resultOption) return
 
-    this._validSelection = true
-    this.removeValidationError()
-
     this.resultsCacheClear()
     this.searchInputClear()
     this.clearResults()
@@ -97,28 +93,6 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-result-option-selected', { bubbles: true, detail: { selected: resultOption, typeahead: this } }))
   }
 
-  removeValidationError() {
-    const inputWrapper = this.searchInput.closest('.text_input_wrapper')
-    if (inputWrapper) {
-      const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement
-      if (errorMessage) {
-        errorMessage.style.display = 'none'
-      }
-      this.searchInput.classList.remove('error')
-    }
-  }
-
-  showValidationError() {
-    const inputWrapper = this.searchInput.closest('.text_input_wrapper')
-    if (inputWrapper) {
-      const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement
-      if (errorMessage) {
-        errorMessage.style.display = 'block'
-      }
-      this.searchInput.classList.add('error')
-    }
-  }
-
   clearResults() {
     this.resultsElement.innerHTML = ''
   }
@@ -227,8 +201,8 @@ export default class PbTypeahead extends PbEnhancedElement {
   }
 
   toggleResultsLoadingIndicator(visible: boolean) {
-    let visibilityProperty = '0'
+    var visibilityProperty = '0'
     if (visible) visibilityProperty = '1'
     this.resultsLoadingIndicator.style.opacity = visibilityProperty
   }
-}
+}