playbook_ui 15.4.0.pre.rc.1 → 15.4.0.pre.rc.3

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownQuickpickDefaultDates = (props) => {
+
+  return (
+    <div>
+      <Dropdown
+          defaultValue="This Year"
+          label="Date Range"
+          variant="quickpick"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DropdownQuickpickDefaultDates

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.md

@@ -0,0 +1 @@
+To set a default value for the Dropdown, you can use the label of the range you want set as default, for example "This Year", "Today", etc. 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+
+const DropdownQuickpickRangeEnd = (props) => {
+
+  return (
+    <div>
+      <Dropdown
+          label="Date Range"
+          onSelect={(selectedItem) => console.log(selectedItem)}
+          rangeEndsToday
+          variant="quickpick"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DropdownQuickpickRangeEnd

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end.md

@@ -0,0 +1 @@
+The optional `rangeEndsToday` prop can be used with the quickpick variant to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if `rangeEndsToday` prop is used, end date on that range will be today's date.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import Dropdown from "../../pb_dropdown/_dropdown";
+import DatePicker from "../../pb_date_picker/_date_picker";
+
+const DropdownQuickpickWithDatePickers = (props) => {
+  return (
+    <>
+      <Dropdown
+          controlsEndId="end-date-picker"
+          controlsStartId="start-date-picker"
+          id="dropdown-quickpick"
+          label="Range"
+          marginBottom="sm"
+          placeholder="Select a Date Range"
+          variant="quickpick"
+          {...props}
+      /> 
+
+      <DatePicker
+          label="Start Date"
+          pickerId="start-date-picker"
+          placeholder="Select a Start Date"
+          syncStartWith="dropdown-quickpick"
+          {...props}
+      />
+
+      <DatePicker
+          label="End Date"
+          pickerId="end-date-picker"
+          placeholder="Select an End Date"
+          syncEndWith="dropdown-quickpick"
+          {...props}
+      />
+    </>
+  );
+};
+
+export default DropdownQuickpickWithDatePickers;

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers.md

@@ -0,0 +1,14 @@
+You can link a Dropdown (`quickpick` variant) to standard DatePickers using the following props:
+
+**For the Dropdown**:
+`controlsStartId`: ID of the DatePicker that should receive the start date.
+
+`controlsEndId`: ID of the DatePicker that should receive the end date.
+
+When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
+
+**For the Start/End DatePickers**:
+`syncStartWith`: ID of the quickpick this start date is synced to.
+`syncEndWith`: ID of the quickpick this end date is synced to.
+
+When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md

@@ -1,4 +1,4 @@
 The `activeStyle` prop can be used to customize the appearance of the dropdown selection indicator. It accepts an object with the following keys: `backgroundColor` sets the background color of the selected item (and its hover state); `fontColor` sets the font color of the selected item.
 
 `backgroundColor` **Type**: String | **Values**: bg_light | white | **Default**: (no selection) is primary
-`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/visual_guidelines/colors) | **Default**: (no selection) is white
+`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/global_props/colors) | **Default**: (no selection) is white

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

@@ -49,4 +49,9 @@ examples:
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
+  - dropdown_quickpick: Quick Pick Variant
+  - dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
+  - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
+  - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
+
 

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

@@ -22,4 +22,8 @@ export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_sel
 export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
 export {default as DropdownWithCustomIconOptions} from './_dropdown_with_custom_icon_options.jsx'
 export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
-export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'
+export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'
+export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
+export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
+export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
+export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import { render, screen, fireEvent } from "../utilities/test-utils"
 
 import { Dropdown, Icon, IconCircle } from 'playbook-ui'
@@ -393,4 +393,150 @@ test("applies activeStyle backgroundColor and fontColor when selected", () => {
     expect(selected).toBeInTheDocument()
     expect(selected).toHaveClass("bg-bg_light")
     expect(selected).toHaveClass("font-primary")
-  })
+  })
+
+test("renders quickpick variant with auto-generated options", () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_dropdown_quickpick')
+  
+  // Check that quickpick options are generated
+  const options = kit.querySelectorAll('.pb_dropdown_option_list')
+  expect(options.length).toBe(10)
+  expect(options[0]).toHaveTextContent("Today")
+})
+
+test("quickpick variant accepts string defaultValue", () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        defaultValue="This Month"
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  
+  expect(trigger).toHaveTextContent("This Month")
+})
+
+test("quickpick attaches _dropdownRef to DOM element when id is provided", () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        id="test-quickpick"
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  
+  // Check that the element has the _dropdownRef attached
+  expect(kit._dropdownRef).toBeDefined()
+  expect(kit._dropdownRef.current).toBeDefined()
+  expect(kit._dropdownRef.current.clearSelected).toBeDefined()
+})
+
+test("quickpick clears selection when clicking X icon", () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        defaultValue="This Week"
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  
+  expect(trigger).toHaveTextContent("This Week")
+  
+  const clearIcon = kit.querySelector('[aria-label="times icon"]')
+  expect(clearIcon).toBeInTheDocument()
+  
+  fireEvent.click(clearIcon.parentElement)
+  
+  expect(trigger).toHaveTextContent("Select...")
+})
+
+test("quickpick returns date array values when option selected", () => {
+  const TestComponent = () => {
+    const [selected, setSelected] = useState(null)
+    return (
+      <>
+        <Dropdown
+            data={{ testid: testId }}
+            onSelect={(item) => setSelected(item)}
+            variant="quickpick"
+        />
+        {selected && (
+          <div data-testid="selected-value">
+            {JSON.stringify({
+              label: selected.label,
+              hasValue: !!selected.value,
+              isArray: Array.isArray(selected.value),
+              valueLength: selected.value?.length
+            })}
+          </div>
+        )}
+      </>
+    )
+  }
+
+  render(<TestComponent />)
+  
+  const kit = screen.getByTestId(testId)
+  const options = kit.querySelectorAll('.pb_dropdown_option_list')
+  
+  fireEvent.click(options[0])
+  
+  const selectedValue = screen.getByTestId('selected-value')
+  const data = JSON.parse(selectedValue.textContent)
+  
+  expect(data.label).toBe("Today")
+  expect(data.hasValue).toBe(true)
+  expect(data.isArray).toBe(true)
+  expect(data.valueLength).toBe(2)
+})
+
+test("quickpick option values are Date objects", () => {
+  const onSelectMock = jest.fn()
+  
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        onSelect={onSelectMock}
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  const options = kit.querySelectorAll('.pb_dropdown_option_list')
+  
+  const thisMonthOption = Array.from(options).find(opt => opt.textContent === 'This Month')
+  fireEvent.click(thisMonthOption)
+  
+  const selectedItem = onSelectMock.mock.calls[0][0]
+  
+  expect(selectedItem.label).toBe("This Month")
+  expect(selectedItem.value).toBeDefined()
+  expect(Array.isArray(selectedItem.value)).toBe(true)
+  expect(selectedItem.value.length).toBe(2)
+  
+  const [startDate, endDate] = selectedItem.value
+  
+  expect(startDate instanceof Date).toBe(true)
+  expect(endDate instanceof Date).toBe(true)
+  
+  expect(startDate.getTime()).not.toBeNaN()
+  expect(endDate.getTime()).not.toBeNaN()
+  
+  expect(endDate.getTime()).toBeGreaterThanOrEqual(startDate.getTime())
+})

data/app/pb_kits/playbook/pb_dropdown/quickpick/index.ts

@@ -0,0 +1,60 @@
+// QuickPick default options for Dropdown
+// This provides date range options similar to the DatePicker QuickPick functionality
+
+import DateTime from '../../pb_kit/dateTime';
+
+type QuickPickOption = {
+  label: string;
+  value: Date[];
+  formattedStartDate?: string;
+  formattedEndDate?: string;
+  id?: string;
+};
+
+// Helper to get QuickPick options with date ranges
+const getQuickPickOptions = (rangeEndsToday = false): QuickPickOption[] => {
+  const today = new Date();
+  const yesterday = DateTime.getYesterdayDate(new Date());
+
+  const thisWeekStartDate = DateTime.getFirstDayOfWeek(new Date());
+  const thisWeekEndDate = rangeEndsToday ? new Date() : DateTime.getLastDayOfWeek(new Date());
+  const lastWeekStartDate = DateTime.getPreviousWeekStartDate(new Date());
+  const lastWeekEndDate = DateTime.getPreviousWeekEndDate(new Date());
+
+  const thisMonthStartDate = DateTime.getMonthStartDate(new Date());
+  const thisMonthEndDate = rangeEndsToday ? new Date() : DateTime.getMonthEndDate(new Date());
+  const lastMonthStartDate = DateTime.getPreviousMonthStartDate(new Date());
+  const lastMonthEndDate = DateTime.getPreviousMonthEndDate(new Date());
+
+  const thisQuarterStartDate = DateTime.getQuarterStartDate(new Date());
+  const thisQuarterEndDate = rangeEndsToday ? new Date() : DateTime.getQuarterEndDate(new Date());
+  const lastQuarterStartDate = DateTime.getPreviousQuarterStartDate(new Date());
+  const lastQuarterEndDate = DateTime.getPreviousQuarterEndDate(new Date());
+
+  const thisYearStartDate = DateTime.getYearStartDate(new Date());
+  const thisYearEndDate = rangeEndsToday ? new Date() : DateTime.getYearEndDate(new Date());
+  const lastYearStartDate = DateTime.getPreviousYearStartDate(new Date());
+  const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date());
+
+  const formatDate = (date: Date) => {
+  const day = String(date.getDate()).padStart(2, "0")
+  const month = String(date.getMonth() + 1).padStart(2, "0")
+  const year = date.getFullYear()
+
+  return `${month}/${day}/${year}`
+}
+  return [
+    { label: 'Today', value: [today, today], id: 'quickpick-today' },
+    { label: 'Yesterday', value: [yesterday, yesterday], formattedStartDate: `${formatDate(yesterday)}`, formattedEndDate: `${formatDate(yesterday)}`, id: 'quickpick-yesterday' },
+    { label: 'This Week', value: [thisWeekStartDate, thisWeekEndDate], formattedStartDate: `${formatDate(thisWeekStartDate)}`, formattedEndDate: `${formatDate(thisWeekEndDate)}`, id: 'quickpick-this-week' },
+    { label: 'This Month', value: [thisMonthStartDate, thisMonthEndDate], formattedStartDate: `${formatDate(thisMonthStartDate)}`, formattedEndDate: `${formatDate(thisMonthEndDate)}`, id: 'quickpick-this-month' },
+    { label: 'This Quarter', value: [thisQuarterStartDate, thisQuarterEndDate], formattedStartDate: `${formatDate(thisQuarterStartDate)}`, formattedEndDate: `${formatDate(thisQuarterEndDate)}`, id: 'quickpick-this-quarter' },
+    { label: 'This Year', value: [thisYearStartDate, thisYearEndDate], formattedStartDate: `${formatDate(thisYearStartDate)}`, formattedEndDate: `${formatDate(thisYearEndDate)}`, id: 'quickpick-this-year' },
+    { label: 'Last Week', value: [lastWeekStartDate, lastWeekEndDate], formattedStartDate: `${formatDate(lastWeekStartDate)}`, formattedEndDate: `${formatDate(lastWeekEndDate)}`, id: 'quickpick-last-week' },
+    { label: 'Last Month', value: [lastMonthStartDate, lastMonthEndDate], formattedStartDate: `${formatDate(lastMonthStartDate)}`, formattedEndDate: `${formatDate(lastMonthEndDate)}`, id: 'quickpick-last-month' },
+    { label: 'Last Quarter', value: [lastQuarterStartDate, lastQuarterEndDate], formattedStartDate: `${formatDate(lastQuarterStartDate)}`, formattedEndDate: `${formatDate(lastQuarterEndDate)}`, id: 'quickpick-last-quarter' },
+    { label: 'Last Year', value: [lastYearStartDate, lastYearEndDate], formattedStartDate: `${formatDate(lastYearStartDate)}`, formattedEndDate: `${formatDate(lastYearEndDate)}`, id: 'quickpick-last-year' },
+  ];
+};
+
+export default getQuickPickOptions

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.md

@@ -1 +1 @@
-Filter can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
+Filter can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">visual guidelines.</a>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb

@@ -22,13 +22,27 @@
 }) %>
 
 <script>
+// Hide toasts immediately
+const hideAutoToasts = () => {
+  const toastAuto = document.getElementById('toast-auto-close');
+  const toastAutoCloseable = document.getElementById('toast-auto-close-closeable');
+  if (toastAuto) toastAuto.style.display = 'none';
+  if (toastAutoCloseable) toastAutoCloseable.style.display = 'none';
+}
+hideAutoToasts();
+
+// Handle various page load/restore events
+window.addEventListener('pageshow', hideAutoToasts)
+document.addEventListener('turbolinks:load', hideAutoToasts)
+document.addEventListener('turbo:load', hideAutoToasts)
+
 document.addEventListener('DOMContentLoaded', () => {
   // Initialize toast elements and buttons
   const toasts = {
     '#toast-auto-close': document.querySelector("#toast-auto-close"),
     '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
   }
-  
+
   const buttons = {
     '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
     '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb

@@ -24,7 +24,6 @@
   horizontal: "center"
 }) %>
 
-
 <script type="text/javascript">
   const multitoasts = document.querySelectorAll(".multitoast-to-hide")
   const multibuttons = document.querySelectorAll("button[data-multitoast]")
@@ -35,6 +34,15 @@
     })
   }
 
+  // Hide toasts immediately
+  hideMultiToasts()
+
+  // Handle various page load/restore events
+  window.addEventListener('pageshow', hideMultiToasts)
+  document.addEventListener('DOMContentLoaded', hideMultiToasts)
+  document.addEventListener('turbolinks:load', hideMultiToasts)
+  document.addEventListener('turbo:load', hideMultiToasts)
+
   multibuttons.forEach((button) => {
     button.onclick = () => {
       hideMultiToasts()
@@ -46,10 +54,3 @@
     }
   })
 </script>
-
-<!-- hiding toast on page load -->
-<style>
-  #toast-long, #toast-short {
-    display: none;
-  }
-</style>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb

@@ -69,27 +69,28 @@
   const toasts = document.querySelectorAll(".toast-to-hide")
   const buttons = document.querySelectorAll("button[data-toast]")
 
-  const hideToasts = () => {
+  const hidePositionToasts = () => {
     toasts.forEach((toast) => {
       toast.style.display = "none"
     })
   }
 
+  // Hide toasts immediately
+  hidePositionToasts()
+
+  // Handle various page load/restore events
+  window.addEventListener('pageshow', hidePositionToasts)
+  document.addEventListener('DOMContentLoaded', hidePositionToasts)
+  document.addEventListener('turbolinks:load', hidePositionToasts)
+  document.addEventListener('turbo:load', hidePositionToasts)
+
   buttons.forEach((button) => {
     button.onclick = () => {
-      hideToasts()
+      hidePositionToasts()
       let toast = document.querySelector(button.getAttribute("data-toast"))
-
       if (toast) {
         toast.style.display = "flex"
       }
     }
   })
 </script>
-
-<!-- hiding toast on page load -->
-<style>
-  #toast-top-center, #toast-top-right, #toast-top-left, #toast-bottom-center, #toast-bottom-right, #toast-bottom-left {
-    display: none;
-  }
-</style>

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -9,7 +9,7 @@ import { buildDataProps, buildHtmlProps } from '../utilities/props'
 
 type FormPillProps = {
   className?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((event: any) => void) | any},
   id?: string,
   text: string,
   name?: string,

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md

@@ -1,3 +1,3 @@
-For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
+For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/global_props/truncate) for more information on the truncate global prop.
 
 __NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md

@@ -1 +1 @@
-For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
+For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/global_props/truncate) for more information on the truncate global prop.

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md

@@ -1 +1 @@
-Pass any text, status, data, product, or category Playbook <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 
+Pass any text, status, data, product, or category Playbook <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md

@@ -1 +1 @@
-Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `blue` `orange` `purple` `teal` `red` `yellow` `green`
+Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `orange` `purple` `teal` `red` `yellow` `green`

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb

@@ -3,48 +3,41 @@
                                           text: "Mercury",
                                           unit: "AU",
                                           value: 0.39,
-                                          variant:"blue"
+                                          variant:"royal"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "planet-ringed",
                                           text: "Venus",
                                           unit: "AU",
                                           value: 0.723,
-                                          variant:"royal"
+                                          variant:"purple"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "planet-moon",
                                           text: "Earth",
                                           unit: "AU",
                                           value: 1.0,
-                                          variant:"purple"
+                                          variant:"teal"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "solar-system",
                                           text: "Mars",
                                           unit: "AU",
                                           value: 1.524,
-                                          variant:"teal"
+                                          variant:"red"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "globe-americas",
-                                          text: "Jupitar",
+                                          text: "Jupiter",
                                           unit: "AU",
                                           value: 5.203,
-                                          variant:"red"
+                                          variant:"yellow"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "globe-africa",
                                           text: "Saturn",
                                           unit: "AU",
                                           value: 9.539,
-                                          variant:"yellow"
- }) %>
- <br>
- <%= pb_rails("icon_stat_value", props: { icon: "globe",
-                                          text: "Uranus",
-                                          unit: "AU",
-                                          value: 19.18,
                                           variant:"green"
  }) %>
  <br>
@@ -53,4 +46,4 @@
                                           unit: "AU",
                                           value: 19.18,
                                           variant:"orange"
- }) %>
+ }) %>

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx

@@ -9,7 +9,7 @@ const IconStatValueColor = (props) => {
           text="Mercury"
           unit="AU"
           value={0.39}
-          variant="blue"
+          variant="royal"
           {...props}
       />
       <br />
@@ -18,7 +18,7 @@ const IconStatValueColor = (props) => {
           text="Venus"
           unit="AU"
           value={0.723}
-          variant="royal"
+          variant="purple"
           {...props}
       />
       <br />
@@ -27,7 +27,7 @@ const IconStatValueColor = (props) => {
           text="Earth"
           unit="AU"
           value={1.0}
-          variant="purple"
+          variant="teal"
           {...props}
       />
       <br />
@@ -36,16 +36,16 @@ const IconStatValueColor = (props) => {
           text="Mars"
           unit="AU"
           value={1.524}
-          variant="teal"
+          variant="red"
           {...props}
       />
       <br />
       <IconStatValue
           icon="globe-americas"
-          text="Jupitar"
+          text="Jupiter"
           unit="AU"
           value={5.203}
-          variant="red"
+          variant="yellow"
           {...props}
       />
       <br />
@@ -54,15 +54,6 @@ const IconStatValueColor = (props) => {
           text="Saturn"
           unit="AU"
           value={9.539}
-          variant="yellow"
-          {...props}
-      />
-      <br />
-      <IconStatValue
-          icon="globe"
-          text="Uranus"
-          unit="AU"
-          value={19.18}
           variant="green"
           {...props}
       />

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.md

@@ -1 +1 @@
-Layout can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
+Layout can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">visual guidelines.</a>

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.md

@@ -1 +1 @@
-The `itemSpacing` prop can optionally be applied to the `Nav` parent element and accepts an object through which any of our [Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) global prop values can be passed as an object. All spacing values passed to `itemSpacing` will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with `itenSpacing` on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing `itemSpacing` value.
+The `itemSpacing` prop can optionally be applied to the `Nav` parent element and accepts an object through which any of our Spacing ([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) global prop values can be passed as an object. All spacing values passed to `itemSpacing` will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with `itenSpacing` on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing `itemSpacing` value.

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.md

@@ -1 +1 @@
-All Nav variants' navItems accept our [global Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!
+All Nav variants' navItems accept our global Spacing ([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!

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_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_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.