playbook_ui 16.3.0 → 16.4.0.pre.alpha.PLAY2718containerfalseborderradiusresponsiveonly15164

data/app/pb_kits/playbook/pb_rich_text_editor/_trix_editor.tsx

@@ -0,0 +1,206 @@
+import React, { useEffect, useState } from 'react'
+
+import inlineFocus from './inlineFocus'
+import applyFocusState from './useFocus'
+import './_dedupe_trix_toolbar'
+
+type Editor = {
+	element?: HTMLElement,
+	insertHTML?: (html: string) => void,
+	loadHTML?: (html: string) => void,
+	setSelectedRange?: (range: Array<number>) => void,
+}
+
+type TrixConfig = {
+	textAttributes?: {
+		inlineCode?: {
+			tagName: string,
+			inheritable: boolean,
+		}
+	}
+}
+
+type TrixInstance = {
+	config: TrixConfig,
+}
+
+type TrixEditorComponentProps = {
+	className: string,
+	fileParamName?: string,
+	mergeTags: unknown[],
+	onChange: (html: string, text: string) => void,
+	onEditorReady: (editorInstance: Editor) => void,
+	placeholder?: string,
+	value?: string,
+}
+
+type TrixTextEditorProps = {
+	TrixEditor?: React.ComponentType<TrixEditorComponentProps>,
+	focus?: boolean,
+	id?: string,
+	inputOptions?: { [key: string]: string | number | boolean | (() => void) },
+	label?: string,
+	name?: string,
+	onChange: (html: string, text: string) => void,
+	placeholder?: string,
+	template: string,
+	toolbarBottom?: boolean,
+	trixInstance?: TrixInstance,
+	value?: string,
+}
+
+const TrixTextEditor = ({
+	TrixEditor,
+	focus = false,
+	id,
+	inputOptions = {},
+	label,
+	name,
+	onChange,
+	placeholder,
+	template,
+	toolbarBottom = false,
+	trixInstance = undefined,
+	value = '',
+}: TrixTextEditorProps): React.ReactElement => {
+	const [editor, setEditor] = useState<Editor>()
+
+	useEffect(() => {
+		const textAttributes = trixInstance?.config?.textAttributes
+		if (!textAttributes) return
+
+		textAttributes.inlineCode = {
+			tagName: 'code',
+			inheritable: true,
+		}
+	}, [trixInstance])
+
+	const handleOnEditorReady = (editorInstance: Editor) => {
+		setEditor(editorInstance)
+
+		setTimeout(() => {
+			const oldId = editorInstance.element?.getAttribute('input')
+			if (!oldId) return
+
+			const hiddenInput = document.getElementById(oldId) as HTMLElement | null
+			if (!hiddenInput) return
+
+			const hiddenInputId = (inputOptions.id as string) || oldId
+
+			if (hiddenInputId !== oldId) {
+				hiddenInput.id = hiddenInputId
+				editorInstance.element?.setAttribute('input', hiddenInputId)
+			}
+
+			if (inputOptions.name) {
+				hiddenInput.setAttribute('name', inputOptions.name as string)
+			}
+
+			const editorDomId = (id as string) || `${hiddenInputId}_trix`
+			const trixLabelId = ((id as string) || hiddenInputId) + '-label'
+
+			if (label) {
+				editorInstance.element?.setAttribute('aria-labelledby', trixLabelId)
+			}
+			if (editorInstance.element) {
+				editorInstance.element.id = editorDomId
+			}
+		})
+	}
+
+	useEffect(() => {
+		if (!editor || !editor.element) return
+
+		const toolbarElement = editor.element.parentElement?.querySelector('trix-toolbar') as HTMLElement | null
+		if (!toolbarElement) return
+
+		const blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement | null
+		if (!blockCodeButton) return
+
+		let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]') as HTMLElement | null
+		if (!inlineCodeButton) {
+			inlineCodeButton = blockCodeButton.cloneNode(true) as HTMLElement
+			blockCodeButton.hidden = true
+			inlineCodeButton.dataset.trixAttribute = 'inlineCode'
+			blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
+		}
+
+		if (toolbarBottom) {
+			editor.element.after(toolbarElement)
+		}
+	}, [editor, toolbarBottom])
+
+	useEffect(() => {
+		if (!focus) return
+
+		document.addEventListener('trix-focus', applyFocusState)
+		document.addEventListener('trix-blur', applyFocusState)
+		applyFocusState()
+
+		return () => {
+			document.removeEventListener('trix-focus', applyFocusState)
+			document.removeEventListener('trix-blur', applyFocusState)
+		}
+	}, [focus])
+
+	useEffect(() => {
+		document.addEventListener('trix-focus', inlineFocus)
+		document.addEventListener('trix-blur', inlineFocus)
+
+		return () => {
+			document.removeEventListener('trix-focus', inlineFocus)
+			document.removeEventListener('trix-blur', inlineFocus)
+		}
+	}, [])
+
+	useEffect(() => {
+		if (!editor || !template) return
+		editor.loadHTML && editor.loadHTML('')
+		editor.setSelectedRange && editor.setSelectedRange([0, 0])
+		editor.insertHTML && editor.insertHTML(template)
+	}, [editor, template])
+
+	useEffect(() => {
+		if (!editor?.element) return
+
+		const clickHandler = ({ target }: Event) => {
+			const trixEditorContainer = (target as Element).closest('.pb_rich_text_editor_kit')
+			if (!trixEditorContainer) return
+
+			const anchorElement = (target as Element).closest('a') as HTMLAnchorElement | null
+			if (!anchorElement) return
+
+			if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
+		}
+
+		editor.element.addEventListener('click', clickHandler)
+
+		return () => {
+			editor.element?.removeEventListener('click', clickHandler)
+		}
+	}, [editor])
+
+	if (!TrixEditor) {
+		return (
+			<div style={{ color: 'red', padding: '1em', border: '1px solid #f00', background: '#fff0f0' }}>
+				<strong>Trix Editor is not available.</strong>
+				<br />
+				Please import <code>TrixEditor</code> from <code>react-trix</code> and pass it as a prop to <code>RichTextEditor</code>.
+				<br />
+				<pre>{`import { TrixEditor } from 'react-trix';\n<RichTextEditor TrixEditor={TrixEditor} ... />`}</pre>
+			</div>
+		)
+	}
+
+	return React.createElement(TrixEditor, {
+		className: '',
+		fileParamName: name,
+		mergeTags: [],
+		onChange,
+		onEditorReady: handleOnEditorReady,
+		placeholder,
+		value,
+	})
+}
+
+export default TrixTextEditor

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx

@@ -1,5 +1,10 @@
 import React, { useState } from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Caption from '../../pb_caption/_caption'
+// The TrixEditor and Trix imports are required for the Legacy RichTextEditor to work 
+// They are passed as props to the RichTextEditor kit
+import { TrixEditor } from 'react-trix' 
+import Trix from 'trix'
 
 const RichTextEditorDefault = (props) => {
   const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
@@ -7,11 +12,62 @@ const RichTextEditorDefault = (props) => {
 
   return (
     <div>
+      <Caption marginBottom="xs" 
+          text="Default"
+      />
       <RichTextEditor
+          TrixEditor={TrixEditor}
           onChange={handleOnChange}
+          trixInstance={Trix}
           value={value}
           {...props}
       />
+      <br/>
+      <Caption marginBottom="xs" 
+          text="Simple"
+      />
+      <RichTextEditor
+          TrixEditor={TrixEditor}
+          simple
+          trixInstance={Trix}
+          {...props}
+      />
+      <br/>
+      <Caption marginBottom="xs" 
+          text="Focus"
+      />
+      <RichTextEditor
+          TrixEditor={TrixEditor}
+          focus
+          trixInstance={Trix}
+          {...props}
+      />
+      <br/>
+      <Caption marginBottom="xs" 
+          text="Inline"
+      />
+      <RichTextEditor
+          TrixEditor={TrixEditor}
+          id="inline"
+          inline
+          toolbarBottom
+          trixInstance={Trix}
+          value="Try hovering over this text. Then try modifying it or adding more of your own text."
+          {...props}
+      />
+      <br/>
+      <Caption marginBottom="xs" 
+          text="Sticky"
+      />
+      <RichTextEditor
+          TrixEditor={TrixEditor}
+          id="sticky"
+          sticky
+          trixInstance={Trix}
+          value="In this example, when you scroll down, the rich text editor's toolbar will scroll along with the page and it will no longer be visible at the top of the page. Dummy text to enable scroll.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis."
+          {...props}
+    />
+
     </div>
   )
 }

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.md

@@ -0,0 +1 @@
+**IMPORTANT**: The Trix version of the RichTextEditor is a Legacy kit and no longer being actively maintained. Please use the advanced Editor above. 

data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml

@@ -1,40 +1,32 @@
 examples:
 
   rails:
-  - rich_text_editor_default: Default
-  - rich_text_editor_simple: Simple
-  - rich_text_editor_attributes: Attributes
-  - rich_text_editor_focus: Focus
-  - rich_text_editor_sticky: Sticky
-  - rich_text_editor_templates: Templates
-  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
-  - rich_text_editor_inline: Inline
-  - rich_text_editor_required_indicator: Required Indicator
-  - rich_text_editor_preview: Preview
 
   react:
-  - rich_text_editor_default: Default
   - rich_text_editor_advanced_default: Advanced Default
   - rich_text_editor_more_extensions: Advanced (Extra Extensions)
   - rich_text_editor_toolbar_disabled: Advanced (Toolbar disabled)
-  - rich_text_editor_simple: Simple
   - rich_text_editor_advanced_simple: Advanced (Simple)
-  - rich_text_editor_attributes: Attributes
   - rich_text_editor_advanced_attributes: Advanced (Attributes)
-  - rich_text_editor_focus: Focus
   - rich_text_editor_advanced_focus: Advanced (Focus)
-  - rich_text_editor_sticky: Sticky
   - rich_text_editor_advanced_sticky: Advanced (Sticky)
-  - rich_text_editor_templates: Templates
   - rich_text_editor_advanced_templates: Advanced (Templates)
-  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
-  - rich_text_editor_inline: Inline
   - rich_text_editor_advanced_inline: Advanced (Inline)
   - rich_text_editor_advanced_height: Advanced Height
   - rich_text_editor_advanced_min_height: Advanced Min Height
-  - rich_text_editor_label: Label
   - rich_text_editor_advanced_label: Advanced (Label)
-  - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
-  - rich_text_editor_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview
+  - rich_text_editor_default: Legacy Default (Trix)
+
+
+
+
+
+
+
+
+
+
+
+

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

@@ -1,12 +1,4 @@
 export { default as RichTextEditorDefault } from './_rich_text_editor_default.jsx'
-export { default as RichTextEditorSimple } from './_rich_text_editor_simple.jsx'
-export { default as RichTextEditorAttributes } from './_rich_text_editor_attributes.jsx'
-export { default as RichTextEditorFocus } from './_rich_text_editor_focus.jsx'
-export { default as RichTextEditorSticky } from './_rich_text_editor_sticky.jsx'
-export { default as RichTextEditorTemplates } from './_rich_text_editor_templates.jsx'
-export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
-export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
-export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
 export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
 export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
 export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
@@ -19,7 +11,5 @@ export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_adv
 export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
 export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_advanced_height.jsx'
 export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
-export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
 export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'
-export { default as RichTextEditorLabel } from './_rich_text_editor_label.jsx'
 export { default as RichTextEditorAdvancedLabel } from './_rich_text_editor_advanced_label.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/inlineFocus.ts

@@ -1,8 +1,9 @@
-const inlineFocus = () => {
-  const trixEditorElement = event.target as Element
-  const trixEditorContainer = trixEditorElement.closest('.pb_rich_text_editor_kit')
+const inlineFocus = (event: Event) => {
+  const trixEditorElement = event.target
+  if (!(trixEditorElement instanceof Element)) return
 
-  if (!trixEditorContainer.classList.contains('inline')) return
+  const trixEditorContainer = trixEditorElement.closest('.pb_rich_text_editor_kit')
+  if (!trixEditorContainer?.classList.contains('inline')) return
 
   trixEditorContainer.classList.toggle('focused')
 }

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss

@@ -3,7 +3,15 @@
 
 .pb_selectable_list_kit {
   margin-bottom: 0px;
-  
+
+  li {
+    border-bottom-color: $input_border_default;
+
+    &:before {
+      color: $text_lighter;
+    }
+  }
+
   .pb_item_kit,
   .pb_item_kit_checked_item {
     &:hover {
@@ -14,4 +22,14 @@
   .checked_item {
     background-color: $active_light;
   }
+
+ .dark {
+    li {
+      border-bottom-color: $input_border_default_dark;
+
+      &:before {
+        color: $text_lighter_dark;
+      }
+    }
+  }
 }

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

@@ -20,6 +20,7 @@ type TableProps = {
     aria?: { [key: string]: string },
     children: React.ReactNode[] | React.ReactNode,
     className: string,
+    cardProps?: { [key: string]: any },
     collapse?: "sm" | "md" | "lg",
     container?: boolean,
     dark?: boolean,
@@ -42,6 +43,7 @@ type TableProps = {
     striped?: boolean,
     tag?: "table" | "div",
     title?: string,
+    titleProps?: { [key: string]: any },
     variant?: "default" | "withFilter",
     verticalBorder?: boolean,
 } & GlobalProps
@@ -52,6 +54,8 @@ const Table = (props: TableProps): React.ReactElement => {
     const {
         aria = {},
         variant = 'default',
+        cardProps = {},
+        titleProps = {},
         children,
         className,
         collapse = variant === 'withFilter' ? 'md' : 'sm',
@@ -348,34 +352,33 @@ const Table = (props: TableProps): React.ReactElement => {
 
         // Merge default props with user-provided props (user props override defaults)
         const mergedFilterProps = { ...defaultFilterProps, ...filterProps }
+        
+        // Default card props that CAN be overridden (All props from Card kit CAN be used, but these are the ones we set as defaults)
+        const defaultCardProps: { [key: string]: any } = {
+            padding: "none",
+        }
+
+        // Merge default props with user-provided props (user props override defaults)
+        const mergedCardProps = { ...defaultCardProps, ...cardProps }
+
+        // Default title props that CAN be overridden (All props from Title kit CAN be used, but these are the ones we set as defaults)
+        const defaultTitleProps: { [key: string]: any } = {
+            size: 3,
+            paddingY: "md",
+        }
+
+        // Merge default props with user-provided props (user props override defaults)
+        const mergedTitleProps = { ...defaultTitleProps, ...titleProps }
 
         return (
             <>
                 {title && (
-                    <Title         
-                        paddingLeft={{
-                            xs: "sm",
-                            sm: "sm",
-                            md: "xl",
-                            lg: "xl",
-                            xl: "xl",
-                            default: "xl",
-                        } as any}
-                        paddingY="md"
-                        size={3}
+                    <Title {...mergedTitleProps} 
                         text={title} 
-                    />
+                    />      
                 )}
                 <Card
-                    marginX={{
-                        xs: "sm",
-                        sm: "sm",
-                        md: "xl",
-                        lg: "xl",
-                        xl: "xl",
-                        default: "xl",
-                    } as any}
-                    padding="none"
+                    {...mergedCardProps}
                 >
                     <Flex
                         align="stretch"

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.jsx

@@ -0,0 +1,152 @@
+import React, { useState } from "react"
+import { Button, Date as DateKit, DatePicker, Dropdown, Select, Table, TextInput, Typeahead, Flex } from "playbook-ui"
+
+ // Mock Data for Table  
+  const users = [
+    { id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-01" },
+    { id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-02" },
+    { id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-03" },
+    { id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-04" },
+    { id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-05" },
+    { id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-06" },
+    { id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-07" },
+    { id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-08" },
+    { id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-09" },
+  ]
+
+const TableWithFilterWithCardTitleProps = () => {
+  const [territory, setTerritory] = useState("")
+
+  // --------Filter content example ------
+  const filterContent = ({ closePopover }) => (
+          <>
+            <TextInput
+                label="Territory ID"
+                onChange={event => setTerritory(event.target.value)}
+                value={territory}
+            />
+
+            <Typeahead
+                label="Title"
+                options={[
+                  { key: "senior-ux-engineer", label: "Senior UX Engineer", value: "senior-ux-engineer" },
+                  { key: "ux-engineer", label: "UX Engineer", value: "ux-engineer" },
+                  { key: "ux-designer", label: "UX Designer", value: "ux-designer" }
+                ]}
+            />
+
+            <Select
+                blankSelection="All Departments"
+                label="Department"
+                options={[
+                  { value: "Business Technology", label: "Business Technology", key: "business-technology" },
+                  { value: "Customer Development", label: "Customer Development", key: "customer-development" },
+                  { value: "Talent Acquisition", label: "Talent Acquisition", key: "talent-acquisition" }
+                ]}
+            />
+
+            <Dropdown
+                label="Branch"
+                options={[
+                  { key: "Philadelphia", label: "Philadelphia", value: "philadelphia" },
+                  { key: "New York", label: "New York", value: "new-york" },
+                  { key: "Austin", label: "Austin", value: "austin" }
+                ]}
+            />
+
+            <DatePicker
+                label="Start Date"
+                paddingY="sm"
+                pickerId="startedOn"
+            />
+            <Flex spacing="between">
+            <Button
+                onClick={() => {
+                  alert("No filtering functionality - just a pattern demo!")
+                  closePopover()
+                }}
+                text="Filter"
+            />
+            <Button
+                text="Defaults"
+                variant="secondary"
+            />
+            </Flex>
+          </>
+        )
+  // -------End Filter content example ------
+  
+  return (
+    <Table 
+        cardProps={{marginX: {
+                        xs: "sm",
+                        sm: "sm",
+                        md: "xl",
+                        lg: "xl",
+                        xl: "xl",
+                        default: "xl",
+                    }}}
+        filterContent={filterContent}
+        filterProps={{
+          results: 50,
+          sortOptions: {
+            territory_id: "Territory ID",
+            first_name: "Name",
+            started_on: "Start Date",
+            department_name: "Department",
+            title_name: "Title",
+            branch_branch_name: "Branch",
+          },
+          sortValue: [{ name: 'started_on', dir: 'asc' }],
+        }}
+        title="Table Title Here"
+        titleProps={{
+          paddingLeft:{
+            xs: "sm",
+            sm: "sm",
+            md: "xl",
+            lg: "xl",
+            xl: "xl",
+            default: "xl",
+          }
+        }}
+        variant="withFilter"
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{'Territory ID'}</Table.Header>
+          <Table.Header>{'Name'}</Table.Header>
+          <Table.Header>{'Title'}</Table.Header>
+          <Table.Header>{'Department'}</Table.Header>
+          <Table.Header>{'Branch'}</Table.Header>
+          <Table.Header textAlign="right">{'Start Date'}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {users.map((user) => (
+          <Table.Row key={user.id}>
+            <Table.Cell 
+                marginX={{ xs: "sm" }}
+                numberSpacing="tabular"
+            >
+                {user.id}
+            </Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.name}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.title}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.department}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.branch}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>
+              <DateKit 
+                  alignment="right"
+                  showCurrentYear
+                  value={user.startDate}
+              />
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default TableWithFilterWithCardTitleProps

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.md

@@ -0,0 +1,17 @@
+The `withFilter` variant also offers 2 additional optional props:
+
+`cardProps`: An object containing Card-specific props.
+`titleProps`: An object containing Title-specific props.
+
+#### Default Card Props
+
+The Table kit automatically sets these Card defaults (which you can override via `cardProps`):
+
+- `padding="none"`
+
+#### Default Title Props
+
+The Table kit automatically sets these Title defaults (which you can override via `titleProps`):
+
+- `size={3}`
+- `paddingY="md"`