playbook_ui 15.3.0.pre.alpha.PLAY2568richtexteditortiptaprails11790 → 15.3.0.pre.alpha.PLAY2569advancedtablecolumnstylingfontcolor11977

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md

@@ -2,4 +2,4 @@ The optional `layout` prop accepts the `position` and `size` of the overlay as a
 
 The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
 
-The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).
+The `size` value is `full` (100%) by default, but accepts our spacing tokens([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).

data/app/pb_kits/playbook/pb_pill/docs/_description.md

@@ -1 +1 @@
-A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/global_props/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-multi-comp */
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import {
   Popper,
@@ -24,6 +24,7 @@ import { uniqueId } from '../utilities/object';
 type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
 
 type PbPopoverProps = {
+  appendTo?: string;
   aria?: { [key: string]: string };
   className?: string;
   closeOnClick?: "outside" | "inside" | "any";
@@ -62,6 +63,25 @@ const popoverModifiers = ({
   return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
 };
 
+const getAppendTarget = (
+  appendTo: string | undefined,
+  targetId: string
+): HTMLElement => {
+  if (!appendTo || appendTo === "body") return document.body;
+
+  if (appendTo === "parent") {
+    const referenceWrapper = document.querySelector(`#reference-${targetId}`);
+    if (referenceWrapper?.parentElement) {
+      return referenceWrapper.parentElement;
+    }
+  }
+
+  const selectorMatch = document.querySelector(appendTo);
+  if (selectorMatch instanceof HTMLElement) return selectorMatch;
+
+  return document.body;
+};
+
 const Popover = (props: PbPopoverProps) => {
   const {
     aria = {},
@@ -89,7 +109,7 @@ const Popover = (props: PbPopoverProps) => {
   const popoverSpacing =
     filteredGlobalProps.includes("dark") || !filteredGlobalProps
       ? "p_sm"
-      : filteredGlobalProps 
+      : filteredGlobalProps
   const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
   const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
   const widthHeightStyles = () => {
@@ -113,7 +133,7 @@ const Popover = (props: PbPopoverProps) => {
 
   return (
     <Popper
-        modifiers={popoverModifiers({ modifiers, offset })}
+        modifiers={popoverModifiers({ modifiers, offset: offset || false })}
         placement={placement}
         referenceElement={referenceElement}
     >
@@ -154,6 +174,7 @@ const Popover = (props: PbPopoverProps) => {
 const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
   const [targetId] = useState(uniqueId('id-'))
   const {
+    appendTo,
     className,
     children,
     modifiers = [],
@@ -170,42 +191,56 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
     minHeight,
     minWidth,
     width,
+    closeOnClick,
+    shouldClosePopover = noop,
   } = props;
 
+  // Store latest callback in a ref to avoid re-runs
+  const shouldClosePopoverRef = useRef(shouldClosePopover);
+
+  // Update ref on change
   useEffect(() => {
-    const { closeOnClick, shouldClosePopover = noop } = props;
+    shouldClosePopoverRef.current = shouldClosePopover;
+  }, [shouldClosePopover]);
 
+  useEffect(() => {
     if (!closeOnClick) return;
 
-    document.body.addEventListener(
-      "click",
-      (e: MouseEvent) => {
-        const target = e.target as HTMLElement
+    // Function to handle popover event listener and targetId.
+    // Ensure that whenever the component is conditionally rendered
+    // that the old listener is removed and the new listener is
+    // updated with the targetId.
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement
 
-        const targetIsPopover =
-          target.closest("#" + targetId) !== null;
-        const targetIsReference =
-          target.closest("#reference-" + targetId) !== null;
+      const targetIsPopover =
+        target.closest("#" + targetId) !== null;
+      const targetIsReference =
+        target.closest("#reference-" + targetId) !== null;
 
-        const shouldClose = () => {
-          setTimeout(() => shouldClosePopover(true), 0);
-        }
+      const shouldClose = () => {
+        setTimeout(() => shouldClosePopoverRef.current(true), 0);
+      }
 
-        switch (closeOnClick) {
-          case "outside":
-            if (!targetIsPopover && !targetIsReference) shouldClose();
-            break;
-          case "inside":
-            if (targetIsPopover) shouldClose();
-            break;
-          case "any":
-            if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
-            break;
-        }
-      },
-      { capture: true }
-    );
-  }, []);
+      switch (closeOnClick) {
+        case "outside":
+          if (!targetIsPopover && !targetIsReference) shouldClose();
+          break;
+        case "inside":
+          if (targetIsPopover) shouldClose();
+          break;
+        case "any":
+          if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
+          break;
+      }
+    };
+
+    document.body.addEventListener("click", handleClick, { capture: true });
+
+    return () => {
+      document.body.removeEventListener("click", handleClick, { capture: true });
+    };
+  }, [targetId, closeOnClick]);
 
   const popoverComponent = (
     <Popover
@@ -246,10 +281,10 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
         {show &&
           (usePortal ? (
             <>
-              {ReactDOM.createPortal(
-                popoverComponent,
-                document.querySelector(portal)
-              )}
+                {ReactDOM.createPortal(
+                  popoverComponent,
+                  getAppendTarget(appendTo, targetId)
+                )}
             </>
           ) : (
             { popoverComponent }

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { PbReactPopover, CircleIconButton, Body, Flex } from "playbook-ui";
+
+const PopoverAppendTo = (props) => {
+  const [showParentPopover, setShowParentPopover] = useState(false);
+  const [showSelectorPopover, setShowSelectorPopover] = useState(false);
+
+  const parentPopoverReference = (
+    <CircleIconButton
+        icon="info"
+        onClick={() => setShowParentPopover(!showParentPopover)}
+        variant="secondary"
+    />
+  );
+
+  const selectorPopoverReference = (
+    <CircleIconButton
+        icon="info"
+        onClick={() => setShowSelectorPopover(!showSelectorPopover)}
+        variant="secondary"
+    />
+  );
+
+  return (
+    <>
+      <Flex
+          marginBottom="md"
+          orientation="row"
+          vertical="center"
+          {...props}
+      >
+        <Body text="Click info for more details" />
+        &nbsp;
+        <PbReactPopover
+            appendTo="parent"
+            offset
+            placement="top"
+            reference={parentPopoverReference}
+            show={showParentPopover}
+            {...props}
+        >
+          {'I\'m a popover. I have been appended to my parent element.'}
+        </PbReactPopover>
+      </Flex>
+
+      <Flex
+          orientation="row"
+          vertical="center"
+          {...props}
+      >
+        <Body text="Click info for more details" />
+        &nbsp;
+        <PbReactPopover
+            appendTo=".kit-show-wrapper"
+            offset
+            placement="top"
+            reference={selectorPopoverReference}
+            show={showSelectorPopover}
+            {...props}
+        >
+          {'I\'m a popover. I have been appended to the .kit-show-wrapper.'}
+        </PbReactPopover>
+      </Flex>
+    </>
+  );
+};
+
+export default PopoverAppendTo;

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to_react.md

@@ -0,0 +1 @@
+By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `appendTo` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

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

@@ -15,3 +15,4 @@ examples:
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
     - popover_actionable_content: With Actionable Content
+    - popover_append_to: Append To

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

@@ -4,3 +4,4 @@ export { default as PopoverClose } from './_popover_close.jsx'
 export { default as PopoverZIndex } from './_popover_z_index.jsx'
 export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
 export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'
+export { default as PopoverAppendTo } from './_popover_append_to.jsx'

data/app/pb_kits/playbook/pb_popover/popover.test.js

@@ -159,6 +159,62 @@ const PopoverTestClicktoClose3 = () => {
   )
 };
 
+//Test Popover with appendTo="parent"
+const PopoverTestAppendToParent = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+
+  const popoverReference = (
+    <Button onClick={togglePopover}
+        text="Click Me"
+    />
+  );
+  return (
+    <div data-testid="parent-container"
+        id="parent-container"
+    >
+      <PbReactPopover
+          appendTo="parent"
+          offset
+          reference={popoverReference}
+          show={mockState}
+      >
+        {"Appended to parent"}
+      </PbReactPopover>
+    </div>
+  )
+};
+
+//Test Popover with appendTo CSS selector
+const PopoverTestAppendToSelector = () => {
+  const [mockState, setMockState] = React.useState(false)
+  const togglePopover = () => {
+    setMockState(!mockState)
+  }
+
+  const popoverReference = (
+    <Button onClick={togglePopover}
+        text="Click Me"
+    />
+  );
+  return (
+    <div data-testid="custom-container"
+        id="custom-container"
+    >
+      <PbReactPopover
+          appendTo="#custom-container"
+          offset
+          reference={popoverReference}
+          show={mockState}
+      >
+        {"Appended to custom container"}
+      </PbReactPopover>
+    </div>
+  )
+};
+
 
   test("renders Popover", () => {
     render(<PopoverTest data={{ testid: testId}}/>)
@@ -217,4 +273,28 @@ const PopoverTestClicktoClose3 = () => {
     fireEvent.click(btn);
 
     expect(kit).not.toBeInTheDocument;
+  });
+
+  test("renders Popover with appendTo parent", () => {
+    render(<PopoverTestAppendToParent data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Appended to parent");
+    expect(kit).toBeInTheDocument();
+    
+    // Check that the popover is rendered inside the parent container
+    const parentContainer = screen.getByTestId("parent-container");
+    expect(parentContainer).toContainElement(kit);
+  });
+
+  test("renders Popover with appendTo CSS selector", () => {
+    render(<PopoverTestAppendToSelector data={{ testid: testId}}/>)
+    const btn = screen.getByText(/click me/i)
+    fireEvent.click(btn);
+    const kit = screen.getByText("Appended to custom container");
+    expect(kit).toBeInTheDocument();
+    
+    // Check that the popover is rendered inside the custom container
+    const customContainer = screen.getByTestId("custom-container");
+    expect(customContainer).toContainElement(kit);
   });

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -96,7 +96,7 @@ const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.React
             <SectionSeparator orientation="vertical" />
             <ToolbarNodes editor={editor} />
             {
-              extensions && extensions.length > 0 && (
+              extensions && (
                 <>
                   <MoreExtensionsDropdown extensions={extensions}/>
                 </>

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

@@ -1,10 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react'
 import classnames from 'classnames'
 import { TrixEditor } from 'react-trix'
-// We have to import Tiptap here because it is not compatible with Rails
-import { useEditor, EditorContent, Extensions } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
-import Link from '@tiptap/extension-link'
 
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
@@ -34,7 +30,6 @@ type Editor = {
 type RichTextEditorProps = {
   aria?: { [key: string]: string },
   advancedEditor?: any,
-  railsAdvancedEditor?: boolean,
   advancedEditorToolbar?: boolean,
   toolbarBottom?: boolean,
   children?: React.ReactNode | React.ReactNode[],
@@ -53,17 +48,13 @@ type RichTextEditorProps = {
   sticky?: boolean,
   template: string,
   value?: string,
-  maxWidth?: string,
-  tipTapOptions?: {
-    extensions?: string[]
-  }
+  maxWidth?: string
 } & GlobalProps
 
 const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   const {
     aria = {},
     advancedEditor,
-    railsAdvancedEditor,
     advancedEditorToolbar = true,
     toolbarBottom = false,
     children,
@@ -81,8 +72,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     sticky = false,
     template = '',
     value = '',
-    maxWidth = "md",
-    tipTapOptions = {}
+    maxWidth = "md"
   } = props
 
   const ariaProps = buildAriaProps(aria),
@@ -91,40 +81,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     [showToolbarOnFocus, setShowToolbarOnFocus] = useState(false),
     containerRef = useRef<HTMLDivElement>(null)
 
-  // POC: hypothetical link for external projects, build extensions array from tipTapOptions for railsAdvancedEditor
-  const buildExtensions = (extensionNames?: string[]) => {
-    const defaultExtensions = [StarterKit, Link]
-    
-    if (!extensionNames || extensionNames.length === 0) {
-      return defaultExtensions
-    }
-
-    // POC: not sure if will work sort of "out of the box/everything goes" like this or will need to permit each of whichever TipTap extensions we want.
-    return defaultExtensions
-  }
-
-  // Creates TipTap editor when railsAdvancedEditor is true (from Rails)
-  const internalDependencyTiptapEditor = useEditor({
-    extensions: buildExtensions(tipTapOptions?.extensions),
-    content: value || '',
-    onUpdate: ({ editor }) => {
-      const html = editor.getHTML()
-      const text = editor.getText()
-      onChange(html, text)
-      
-      // POC: Update hidden input for TipTap Rails Advanced Editor form submission
-      if (railsAdvancedEditor) {
-        const hiddenInput = document.getElementById(`hidden-input-${props.id || 'rich-text-editor'}`)
-        if (hiddenInput) {
-          (hiddenInput as HTMLInputElement).value = html ?? ''
-        }
-      }
-    },
-  }, [railsAdvancedEditor])
-
-  // Uses Internal Dependency TipTap editor if railsAdvancedEditor is true, otherwise uses passed editor instance
-  const currentEditor = railsAdvancedEditor ? internalDependencyTiptapEditor : advancedEditor
-
   const htmlProps = buildHtmlProps(htmlOptions)
   
   const handleOnEditorReady = (editorInstance: Editor) => {
@@ -184,8 +140,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   }
 
   useEffect(() => {
-    // POC: Updates advancedEditor to currentEditor in useEffect so focus works for Rails and React Advanced Editors
-    if (!currentEditor || !focus) return
+    if (!advancedEditor || !focus) return
 
     const handleFocus = () => setShowToolbarOnFocus(true)
     
@@ -194,7 +149,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       setShowToolbarOnFocus(false)
     }
 
-    const editorElement = currentEditor?.view?.dom
+    const editorElement = advancedEditor?.view?.dom
     if (editorElement) {
       editorElement.addEventListener('focus', handleFocus)
     }
@@ -207,7 +162,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       }
       document.removeEventListener('mousedown', handleClickOutside)
     }
-  }, [currentEditor, focus])
+  }, [advancedEditor, focus])
 
   //============= end focus prop with advanced editor=================
 
@@ -246,7 +201,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   )
 
   // Determine if toolbar should be shown
-  const shouldShowToolbar = focus && currentEditor ? showToolbarOnFocus : advancedEditorToolbar
+  const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
 
   return (
     <div
@@ -257,32 +212,20 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         ref={focus ? containerRef : undefined}
     >
       {
-        // POC: Uses currentEditor to render the editor content in return so works for Rails and React Advanced Editors
-        currentEditor ? (
+        advancedEditor ? (
           <div 
               className={classnames("pb_rich_text_editor_advanced_container", { 
               ["toolbar-active"]: shouldShowToolbar,
               })}
           >
             {shouldShowToolbar && (
-              <EditorToolbar editor={currentEditor}
+              <EditorToolbar editor={advancedEditor}
                   extensions={extensions}
                   simple={simple}
                   sticky={sticky}
               />
             )}
-            {/* POC: EditorContent ternary needed for TipTap editor in Rails Advanced Editors*/}
-            {railsAdvancedEditor ? <EditorContent editor={currentEditor} /> : <>{children}</>}
-            
-            {/* POC: Set up hidden input for TipTap Rails Advanced Editor form submission */}
-            {railsAdvancedEditor && (
-              <input 
-                  id={`hidden-input-${props.id || 'rich-text-editor'}`}
-                  name={name || 'content'}
-                  type="hidden" 
-                  value={currentEditor?.getHTML() ?? ''}
-              />
-            )}
+          { children }
           </div>
         ) : (
           <TrixEditor

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

@@ -1 +1 @@
-NOTE: All editors have a default max-width of "md". Use our [Max Width global prop](https://playbook.powerapp.cloud/visual_guidelines/max_width) to override this default, as necessary.
+NOTE: All editors have a default max-width of "md". Use our [Max Width global prop](https://playbook.powerapp.cloud/global_props/max_width) to override this default, as necessary.

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

@@ -1,7 +1,6 @@
 examples:
 
   rails:
-  - rich_text_editor_advanced_default: Advanced Default
   - rich_text_editor_default: Default
   - rich_text_editor_simple: Simple
   - rich_text_editor_attributes: Attributes

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb

@@ -1,13 +1,5 @@
-<% if object.is_rails_advanced? %>
-  <%= react_component('RichTextEditor',
-                      object.rich_text_advanced_options,
-                      aria: object.aria,
-                      data: object.data
-                     ) %>
-<% else %>
-  <%= react_component('RichTextEditor',
-                      object.rich_text_options,
-                      aria: object.aria,
-                      data: object.data
-                     ) %>
-<% end %>
+<%= react_component('RichTextEditor',
+                    object.rich_text_options,
+                    aria: object.aria,
+                    data: object.data
+                   ) %>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -22,18 +22,6 @@ module Playbook
       prop :placeholder
       prop :input_options
 
-      prop :rails_advanced_editor, type: Playbook::Props::Boolean,
-                                   default: false
-      prop :advanced_editor_toolbar, type: Playbook::Props::Boolean,
-                                     default: true
-      prop :extensions, type: Playbook::Props::HashArray,
-                        default: []
-      prop :max_width, type: Playbook::Props::Enum,
-                       values: %w[xs sm md lg xl],
-                       default: "md"
-      prop :tip_tap_options, type: Playbook::Props::HashProp,
-                             default: {}
-
       def classname
         generate_classname("pb_rich_text_editor_kit", simple_class, focus_class, sticky_class, separator: " ")
       end
@@ -65,31 +53,6 @@ module Playbook
           inputOptions: input_options,
         }
       end
-
-      def is_rails_advanced?
-        rails_advanced_editor
-      end
-
-      def rich_text_advanced_options
-        {
-          id: id,
-          inline: inline,
-          className: classname,
-          focus: focus,
-          simple: simple,
-          sticky: sticky,
-          toolbarBottom: toolbar_bottom,
-          value: value || "",
-          template: template,
-          placeholder: placeholder,
-          inputOptions: input_options,
-          railsAdvancedEditor: rails_advanced_editor,
-          advancedEditorToolbar: advanced_editor_toolbar,
-          extensions: extensions,
-          maxWidth: max_width,
-          tipTapOptions: tip_tap_options,
-        }
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_section_separator/docs/_description.md

@@ -1,3 +1,3 @@
 Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds.
 
-To ensure that the section separator is properly rendered, please be sure to use our global  `width` prop to set width to 100%. [See here](https://playbook.powerapp.cloud/visual_guidelines/width) for more information on the global width prop.
+To ensure that the section separator is properly rendered, please be sure to use our global  `width` prop to set width to 100%. [See here](https://playbook.powerapp.cloud/global_props/width) for more information on the global width prop.

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -216,4 +216,33 @@ $pb_selectable_paddings: (
       background: $error;
     }
   }
+}
+
+.pb_selectable_card_kit_disabled,
+.pb_selectable_card_kit_checked_disabled {
+  >label {
+    cursor: not-allowed;
+
+    @media (hover:hover) {
+      &:hover {
+        box-shadow: none !important;
+      }
+    }
+  }
+}
+
+.pb_selectable_card_kit_disabled>label {
+  border-color: $border_light !important;
+
+  .dark & {
+    border-color: $border_dark !important;
+  }
+}
+
+.pb_selectable_card_kit_checked_disabled>label {
+  border-color: $primary !important;
+
+  .dark & {
+    border-color: $primary_action_dark !important;
+  }
 }

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md

@@ -1 +1 @@
-The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.
+The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/global_props/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_react.md

@@ -1 +1 @@
-The `borderRadius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.
+The `borderRadius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/global_props/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md

@@ -1,3 +1,3 @@
 Use the `stack` and `gap` props in conjunction to layer multiple Skeleton loading bars on top of each other.
 
-`stack` accepts a number that correlates to the number of rows (1 is default), and `gap` accepts a portion of our [spacing props](https://playbook.powerapp.cloud/visual_guidelines/spacing) (`xxs` as default, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`) to set the pixel distance between each row. `gap` will not do anything if there is no corresponding `stack` prop set.
+`stack` accepts a number that correlates to the number of rows (1 is default), and `gap` accepts a portion of our [spacing props](https://playbook.powerapp.cloud/global_props/spacing) (`xxs` as default, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`) to set the pixel distance between each row. `gap` will not do anything if there is no corresponding `stack` prop set.

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

@@ -1,3 +1,3 @@
-Side highlight can take product, status, and category colors. To view full list of colors, visit <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">token colors</a>.
+Side highlight can take product, status, and category colors. To view full list of colors, visit <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">token colors</a>.
 
 Note: Only use category colors for categories. Do not mix it with product or status colors.