playbook_ui_docs 15.3.0.pre.alpha.play262912095 → 15.3.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f9432bc7cbca6ae741e44ba62f4f1c6c1c1277a151d40711f07b42b4a71f7b3f
-  data.tar.gz: fad525a8051c31f18dd889cb6dd0cb3bceda341e7750683acd3b890ed4dc7459
+  metadata.gz: 57a1b60739a536d77f8f73f230f88e8fdd534a769663c175b2d54bc69e900ff1
+  data.tar.gz: 41040c075335f186d7596c550c335cee3839b3827f919ea48603bd25fb39aad8
 SHA512:
-  metadata.gz: 8bcc80c952cff3f29fd267375cf9a975248077f82f12c716c1f6f641bdb9435a0011845642eac3087c950e1d9cd5bd1bd41102c17f36572211352b24f5162d46
-  data.tar.gz: e7d7354a645bba244122fad1c690a0e1a568ae247e39c6d59ac2da195942bd8cfb9fd9cd83c64c59d98933499638e9ca9c397eacc6ac9a1e443514fe4ee5e00e
+  metadata.gz: b157fd6e9707d742a3193ee437de5c2948d20f5cba9615dac6450d621deda4cdefc5f64d1b15e692f625d7afb952aa6453379aa72755f802caea68d1dde23aff
+  data.tar.gz: 324ab938d64e4d07a5a99c439b3a566dfc35a4a8509571c7498fc90e3da0dfb01cb00e1f269e47d26039336c9fb909fcd3d7c1f13092be96b8d1e440f1d24d54

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md

@@ -2,9 +2,7 @@ The AdvancedTable kit accepts tree data and automatically renders expansion cont
 
 ### id
 
-A unique `id` is required to allow the table functionality to work properly. Without it, certain functions like the action bar, expand/collapse caching, or selectable rows will not be able to properly reference the correct table.
-
-You must also set `table_id` when using subcomponents like `table_header` or `table_body`.
+A unique `id` is required to allow the table functionality to work properly. Without it, certain functions like the action bar will not be able to properly reference the correct table.
 
 ### table_data
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb

@@ -51,7 +51,7 @@
   ]
 %>
 
-<%= pb_rails("advanced_table", props: { id: "sort", table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "sort", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb

@@ -34,7 +34,7 @@
   subrow_headers = ["Quarter", "Month", "Day"]
 %>
 
-<%= pb_rails("advanced_table", props: { id: "subrow-headers", table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "subrow-headers", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "subrow-headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "test_table", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb

@@ -31,6 +31,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "collapsible_trail", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "collapsible_trail", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "collapsible_trail", table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md

@@ -1,3 +1,3 @@
 The borders of column groups can be set to a different color using the `columnGroupBorderColor` prop.  In order for these borders to be visible, this prop must be used with `tableProps` and `verticalBorder` set to true.
 
-The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/tokens/colors).
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md

@@ -1,3 +1,3 @@
 The borders of column groups can be set to a different color using the `column_group_border_color` prop. In order for these borders to be visible, this prop must be used with `table_props` and `vertical_border` set to true.
 
-The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/tokens/colors).
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx

@@ -1,8 +1,7 @@
 import React from "react"
-import { AdvancedTable, colors } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
-
 const AdvancedTableColumnStyling = (props) => {
   const columnDefinitions = [
     {
@@ -35,7 +34,6 @@ const AdvancedTableColumnStyling = (props) => {
     {
       accessor: "graduatedStudents",
       label: "Graduated Students",
-      columnStyling:{fontColor: colors.data_8},
     },
   ]
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md

@@ -1,9 +1,7 @@
-The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has several optional key/value pairs, this doc example highlights the following:
+The `columnStyling` prop is an optional item that can be used within `columnDefinitions` as shown in the code snippet below. It is an object that has 2 optional key/value pairs:
 
 1) `headerAlignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
 
 2) `cellAlignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
 
-3) `fontColor`: This will allow you to control the font color for a given column.
-
 `columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AdvancedTable } from "playbook-ui";
+import AdvancedTable from '../../pb_advanced_table/_advanced_table';
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnStylingColumnHeaders = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb

@@ -58,6 +58,6 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "column-styling-multi", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "column-styling-multi", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "column-styling-multi", table_data: @table_data, column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb

@@ -29,11 +29,10 @@
     {
       accessor: "graduatedStudents",
       label: "Graduated Students",
-      column_styling: { font_color: "red" }
     }
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "column-styling", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "column-styling", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "column-styling", table_data: @table_data, column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md

@@ -1,9 +1,7 @@
-The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below.  It is an object that has several optional key/value pairs, this doc example highlights the following:
+The `column_styling` prop is an optional item that can be used within `column_definitions` as shown in the code snippet below. It is an object that has 2 optional key/value pairs:
 
 1) `header_alignment`: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to `left`, `right` or `center`.
 
 2) `cell_alignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
 
-3) `font_color`: This will allow you to control the font color for a given column.
-
 `column_styling` can be used within the column_definition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx

@@ -1,8 +1,6 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import Caption from '../../pb_caption/_caption'
 import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
-import { MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN } from "./_mock_data_inline_loading_empty_children"
 
 const AdvancedTableInlineRowLoading = (props) => {
   const columnDefinitions = [
@@ -43,42 +41,16 @@ const AdvancedTableInlineRowLoading = (props) => {
 
   return (
     <div>
-      <Caption text="Inline Row Loading - Demonstrated in Row 1 (Rows 2 and 3 have data)" />
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           enableToggleExpansion="all"
           inlineRowLoading
-          marginBottom="md"
           tableData={MOCK_DATA_INLINE_LOADING}
           {...props}
       >
         <AdvancedTable.Header />
         <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
       </AdvancedTable>
-      <Caption text="Inline Row Loading with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is not rendered" />
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          enableToggleExpansion="all"
-          inlineRowLoading
-          marginBottom="md"
-          tableData={MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN}
-          {...props}
-      >
-        <AdvancedTable.Header />
-        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
-      </AdvancedTable>
-      <Caption text="Inline Row Loading and Persist Toggle Expansion Button with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is rendered" />
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          enableToggleExpansion="all"
-          inlineRowLoading
-          persistToggleExpansionButton
-          tableData={MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN}
-          {...props}
-      >
-        <AdvancedTable.Header />
-        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
-      </AdvancedTable>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md

@@ -1,14 +1,5 @@
-### inlineRowLoading
 As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the `inlineRowLoading` prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty `children` array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty `children` arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic].
 
-In the first Advanced Table in this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows. 
+In this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows. 
 
-This prop is set to `false` by default. 
-
-
-### persistToggleExpansion
-The `persistToggleExpansionButton` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceeding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
-
-In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without `persistToggleExpansionButton` in place. The third Advanced Table shows the toggle all button due to `persistToggleExpansionButton`. 
-
-This prop is set to false by default and should only be used in conjunction with `inlineRowLoading`.
+This prop is set to `false` by default. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx

@@ -22,6 +22,7 @@ const AdvancedTablePaddingControl = (props) => {
          {value}
         </Background>
       ), 
+
     },
     {
       accessor: "scheduledMeetings",
@@ -38,15 +39,6 @@ const AdvancedTablePaddingControl = (props) => {
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
-      columnStyling:{cellPadding: "none", fontColor: "white"},
-      customRenderer: (row, value) => (
-        <Background 
-            backgroundColor={"category_1"}
-            padding="xs" 
-        >
-         {value}
-        </Background>
-      ), 
     },
     {
       accessor: "graduatedStudents",

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md

@@ -1,3 +1,3 @@
 `columnStyling` can also be used to control padding on all cells in a given column via the use of the `cellPadding` key/value pair. `cellPadding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.  
 
-This control can be used in conjunction with the `customRenderer` item within each columnDefinition to achieve custom background colors for individual cells as seen here. Use `fontColor` to achieve better contrast between cell content and background for darker backgrounds.
+This control can be used in conjunction with the `customRenderer` item within each columnDefinition to achieve custom background colors for individual cells as seen here. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx

@@ -38,10 +38,7 @@ const AdvancedTablePaginationWithProps = (props) => {
   const paginationProps = {
     pageIndex: 1,
     pageSize: 10,
-    range: 2,
-    onPageChange: (pageIndex) => {
-      console.log('Current page index:', pageIndex);
-    }
+    range: 2
   }
   
   return (

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md

@@ -1,6 +1,5 @@
-`paginationProps` is an optional prop that can be used to further customize pagination for the AdvancedTable. This prop is an object with the following optional items:
+`paginationProps` is an optional prop that can be used to further customize pagination for the AdvancedTable. This prop is an object with 2 optional items:
 
 - `pageIndex`: An optional prop to set which page is set to open on initial load. Default is '0'
 - `pageSize`: An optional prop to set total number of rows for each page before the Table paginates. Default is '20'
-- `range`: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See [here for more details](https://playbook.powerapp.cloud/kits/pagination/react#default). Default is set to '5'
-- `onPageChange`: A callback function that gives to access to the current page index.
+- `range`: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See [here for more details](https://playbook.powerapp.cloud/kits/pagination/react#default). Default is set to '5'

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md

@@ -1,4 +1,4 @@
-The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows. It is an object that has several optional key/value pairs, this doc example highlights the following:
+The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `row_styling` gives you 3 optional controls:
 
 - `background_color` : use this to control the background color of the row
 - `font_color`: use this to control font color for each row if needed, for example if using a darker background color.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_react.md

@@ -1,4 +1,4 @@
-The `rowStyling` prop can be used in conjunction with row ids to control certain styling options on individual rows. It is an object that has several optional key/value pairs, this doc example highlights the following:
+The `rowStyling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `rowStyling` gives you 3 optional controls:
 
 - `backgroundColor` : use this to control the background color of the row
 - `fontColor`: use this to control font color for each row if needed, for example if using a darker background color.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.html.erb

@@ -34,6 +34,6 @@
 %>
 
 <%= pb_rails("advanced_table", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_header", props: { id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md

@@ -1,7 +1,7 @@
 To achieve a sticky header AND sticky columns together, in addition to the `stickyLeftColumn` logic outlined above, you can:
 
 - Set `sticky: true` via `tableProps`
-- Give the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud//global_props/max_height) global prop. 
+- Give the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
 
 **NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the column stickiness.
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md

@@ -1,4 +1,4 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `table_props` and giving the AdvancedTable a `max_height` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
 
 **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md

@@ -1,4 +1,4 @@
-Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop. 
+Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop. 
 
 **NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
 

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

@@ -21,11 +21,8 @@ examples:
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling
-  - advanced_table_padding_control_per_row_rails: Padding Control using Row Styling
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
-  - advanced_table_padding_control_rails: Padding Control using Column Styling
-  - advanced_table_background_control_rails: Background Control using Column Styling
   - advanced_table_column_border_color_rails: Column Group Border Color
 
 

data/app/pb_kits/playbook/pb_background/docs/_background_category.md

@@ -1 +1 @@
-Category colors can be passed into the background kit. Values `category_1` to `category_21` are accepted. List of all category and status colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.
+Category colors can be passed into the background kit. Values `category_1` to `category_21` are accepted. List of all category and status colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.html.erb

@@ -1,13 +1,13 @@
 
 <div>
   <%= pb_rails("bread_crumbs", props: { aria: { label: "Breadcrumb Navigation" } }) do%>
-    <%= pb_rails("icon", props: { icon: "home", color: "link"}) %>
+    <%= pb_rails("icon", props: { icon: "home"}) %>
     <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/" }) do %> 
-      <%= pb_rails("title", props: { size: 4, text: "Home", tag: "span", color: "link" }) %>
+      <%= pb_rails("title", props: { size: 4, text: "Home", tag: "span" }) %>
      <%end%>
-     <%= pb_rails("icon", props: { icon: 'users', color: "link"}) %>
+     <%= pb_rails("icon", props: { icon: 'users'}) %>
     <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/users" }) do %> 
-      <%= pb_rails("title", props: { size: 4, text: "Users", tag: "span", color: "link" }) %>
+      <%= pb_rails("title", props: { size: 4, text: "Users", tag: "span" }) %>
      <%end%>
      <%= pb_rails("icon", props: { icon: "user"}) %>
     <%= pb_rails("bread_crumbs/bread_crumb_item") do %> 

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -12,7 +12,6 @@ const BreadCrumbsDefault = (props) => {
         {...props}
     >
       <Icon
-          color="link"
           icon="home"
           size="1x"
           {...props}
@@ -22,7 +21,6 @@ const BreadCrumbsDefault = (props) => {
           href="/home"
       >
         <Title
-            color="link"
             size="4"
             tag="span"
             text="Home"
@@ -30,7 +28,6 @@ const BreadCrumbsDefault = (props) => {
         />
       </BreadCrumbItem>
       <Icon
-          color="link"
           icon="users"
           size="1x"
           {...props}
@@ -40,7 +37,6 @@ const BreadCrumbsDefault = (props) => {
           href="/users"
       >
         <Title
-            color="link"
             size="4"
             tag="span"
             text="Users"

data/app/pb_kits/playbook/pb_card/docs/_card_background.md

@@ -1 +1 @@
-Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a> under Product Colors and Status: Subtle Variations.
+Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors and Status: Subtle Variations.

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.
+Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md

@@ -1 +1 @@
-Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.
+Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_light.md

@@ -1 +1 @@
-Card 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>  
+Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>  

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -7,7 +7,7 @@
 }) %>
 
 <%= pb_rails("currency", props: {
-  amount: 342,
+  amount: "342",
   label: "Light",
   margin_bottom: "md",
   size: "sm",

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -14,7 +14,7 @@ const CurrencyVariants = (props) => {
           {...props}
       />
       <Currency
-          amount={342}
+          amount="342"
           label="Light"
           marginBottom="md"
           size="sm"

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx

@@ -23,7 +23,7 @@ const DatePickerRangePattern = (props) => {
 
       <DatePicker
           pickerId="end-date-picker"
-          placeholder="Select an End Date"
+          placeholder="Select a End Date"
           syncEndWith="quickpick-for-range"
           {...props}
       />

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md

@@ -1 +1 @@
-You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/token/colors) for reference.
+You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.

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/global_props/colors) | **Default**: (no selection) is white
+`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/visual_guidelines/colors) | **Default**: (no selection) is white

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

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

@@ -1,4 +1,2 @@
 
 Fixed Confirmation Toast is used as an alert. Success is used when a user successfully completes an action. Error is used when there is an error and the user cannot proceed. Neutral is used to display information to a user to complete a task.
-
-**NOTE**: z index for Fixed Confirmation Toast is set to 'max' by default which has the value of `999999`. the z Index global prop can be used to override this if you want to set it to a different value.

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb

@@ -18,7 +18,7 @@
 
             if (submitButton) {
                 let currentClass = submitButton.className;
-                let newClass = currentClass.replace("pb_button_disabled pb_button_loading", "pb_button_enabled");
+                let newClass = currentClass.replace("_disabled_loading", "_enabled");
 
                 let cancelClass = cancelButton ? cancelButton.className : "";
                 let newCancelClass = cancelClass.replace("_disabled", "_enabled");

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/global_props/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/visual_guidelines/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/global_props/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/visual_guidelines/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/tokens/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/visual_guidelines/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` `orange` `purple` `teal` `red` `yellow` `green`
+Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `blue` `orange` `purple` `teal` `red` `yellow` `green`

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

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