playbook_ui 14.21.2.pre.alpha.PLAY2233removetreemapchart8408 → 14.21.2.pre.alpha.PLAY2241tablestickycolumnsdatanotids8357

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ca80f9aba62971e4c9bc99c22dc32c4b2f8f608b9ba89954e6bfad5be025a640
-  data.tar.gz: ad28bae091ba788af85a99d55aaaaa6ffe4a4321cc1ca0545c673682e299c1c8
+  metadata.gz: dcb903e9fac61dab1799f3b2480e1107fbe15b44cc240a7b47d203c96caecd13
+  data.tar.gz: d6114a181c65aa31d5c7f30bb729652ebb30b59ea8cf71946294c1d81c9206e2
 SHA512:
-  metadata.gz: 5caa647eeee027e2507921bf5b5f2d28773145256580fad1403cf50efe18359fbe33dacd1f7cae56e81184541861f814c833265ecf45ebd0ab21270b186c00de
-  data.tar.gz: 1aa83eef3b557a29e6897efd57e74f27636393118e511c700147d4dc6dfd0f56aee4da6e0a57f9f66660c01495afd5f809c49d990f7f43e5992359d9c4a1bd44
+  metadata.gz: f322fb4c59317a1f6d71ed145305656f34c3461b585904996b63c5f8b76fc175374dd9c82fc5ff2ab7f4d8830da244c1208ed44a3b29ae1fd334b12c7086dd5d
+  data.tar.gz: 60dbd83fd98aab746396b84410bc7c52125fcced4261870642be768fd6ce1db41dbc61f59ff845bcb76edcdbda826a4839397d3d39cc114b0c7a6a16c2e222f3

data/app/pb_kits/playbook/_playbook.scss

@@ -104,6 +104,7 @@
 @import 'pb_title_detail/title_detail';
 @import 'pb_toggle/toggle';
 @import 'pb_tooltip/tooltip';
+@import 'pb_treemap_chart/treemap_chart';
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -19,7 +19,6 @@ interface CustomCellProps {
   value?: string
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
   selectableRows?: boolean
-  customStyle?: GenericObject
 } 
 
 export const CustomCell = ({
@@ -29,7 +28,6 @@ export const CustomCell = ({
   value,
   customRenderer,
   selectableRows,
-  customStyle = {},
 }: CustomCellProps & GlobalProps) => {
   const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
 
@@ -45,7 +43,7 @@ export const CustomCell = ({
   const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
 
   return (
-    <div style={{ paddingLeft: `${row.depth * 1.25}em`}}>
+    <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
       <Flex 
           alignItems="center" 
           columnGap="xs"
@@ -67,7 +65,6 @@ export const CustomCell = ({
           <button
               className="gray-icon expand-toggle-icon"
               onClick={() => handleOnExpand(row)}
-              style={{ color: customStyle?.expandButtonColor }}
           >
             {row.getIsExpanded() ? (
               <Icon cursor="pointer"

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -27,7 +27,6 @@ const TableCellRenderer = ({
   loading = false,
   stickyLeftColumn,
   columnPinning,
-  customRowStyle,
   columnDefinitions,
 }: {
   row: Row<GenericObject>
@@ -35,7 +34,6 @@ const TableCellRenderer = ({
   loading?: boolean | string
   stickyLeftColumn?: string[]
   columnPinning: { left: string[] }
-  customRowStyle?: GenericObject
   columnDefinitions?: {[key:string]:any}[]
 }) => {
   return (
@@ -76,8 +74,6 @@ const TableCellRenderer = ({
                     ? '180px'
                     : `${column.getStart("left")}px`
                   : undefined,
-                  backgroundColor: i === 0 && customRowStyle?.backgroundColor,
-                  color: customRowStyle?.fontColor,
             }}
           >
             {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
@@ -111,7 +107,6 @@ export const RegularTableView = ({
     pinnedRows,
     headerHeight,
     rowHeight,
-    rowStyling = [],
     sampleRowRef,
   } = useContext(AdvancedTableContext)
 
@@ -176,7 +171,6 @@ export const RegularTableView = ({
         const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
         const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
         const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
-        const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
 
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -195,7 +189,6 @@ export const RegularTableView = ({
                 className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
                 ref={isFirstRegularRow ? sampleRowRef : null}
-                style={{backgroundColor: customRowStyle?.backgroundColor, color: customRowStyle?.fontColor}}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
               {selectableRows && !hasAnySubRows && (
@@ -213,7 +206,6 @@ export const RegularTableView = ({
                   collapsibleTrail={collapsibleTrail}
                   columnDefinitions={columnDefinitions}
                   columnPinning={columnPinning}
-                  customRowStyle={customRowStyle}
                   loading={loading}
                   row={row}
                   stickyLeftColumn={stickyLeftColumn}

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import {
   useReactTable,
   getCoreRowModel,
@@ -32,7 +32,6 @@ interface UseTableStateProps {
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
-  rowStyling?: GenericObject;
 }
 
 export function useTableState({
@@ -50,9 +49,7 @@ export function useTableState({
   tableOptions,
   columnVisibilityControl,
   pinnedRows,
-  rowStyling
 }: UseTableStateProps) {
-
   // Create a local state for expanded and setExpanded if expandedControl not used
   const [localExpanded, setLocalExpanded] = useState({});
   const [loadingStateRowCount, setLoadingStateRowCount] = useState(initialLoadingRowsCount);
@@ -66,8 +63,8 @@ export function useTableState({
   const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
   const columnVisibility = (columnVisibilityControl && columnVisibilityControl.value) ? columnVisibilityControl.value : localColumnVisibility;
   const setColumnVisibility = (columnVisibilityControl && columnVisibilityControl.onChange) ? columnVisibilityControl.onChange : setLocalColumnVisibility;
-  const rowPinning = pinnedRows?.value ?? localRowPinning
-  const onRowPinningChange = pinnedRows?.onChange ?? setLocalRowPinning
+  const rowPinning = pinnedRows && pinnedRows.value || localRowPinning;
+  const setRowPinning = (pinnedRows && pinnedRows.onChange) ? pinnedRows.onChange : setLocalRowPinning;
 
   // Virtualized data handling (chunked loading)
   const fetchSize = 20; // Number of rows per "page"
@@ -105,8 +102,7 @@ export function useTableState({
           column.customRenderer,
           isFirstColumn,
           onRowToggleClick,
-          selectableRows,
-          rowStyling
+          selectableRows
         );
       }
 
@@ -169,8 +165,7 @@ export function useTableState({
     enableSortingRemoval: false,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
-    onRowPinningChange,
-    getRowId: (selectableRows || pinnedRows || rowStyling) ? row => row.id : undefined,
+    getRowId: (selectableRows || pinnedRows) ? row => row.id : undefined,
     onColumnVisibilityChange: setColumnVisibility,
     meta: {
       columnDefinitions
@@ -180,26 +175,6 @@ export function useTableState({
     ...tableOptions,
   });
 
-  // Handle row pinning changes
-    useEffect(() => {
-    const topPins = pinnedRows?.value?.top ?? [];
-    if (topPins.length === 0) {
-      onRowPinningChange({ top: [] });
-      return;
-    }
-    const rows = table.getRowModel().rows;
-    const collectAllDescendantIds = (subs: Row<GenericObject>[]): string[] =>
-      subs.flatMap(r => [r.id, ...collectAllDescendantIds(r.subRows)]);
-    const allPinned: string[] = [];
-    topPins.forEach(id => {
-      const parent = rows.find(r => r.id === id && r.depth === 0);
-      if (parent) {
-        allPinned.push(parent.id, ...collectAllDescendantIds(parent.subRows));
-      }
-    });
-    onRowPinningChange({ top: allPinned });
-  }, [table, pinnedRows?.value?.top?.join(',')]);
-
   // Check if table has any sub-rows
   const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);
   const selectedRowsLength = Object.keys(table.getState().rowSelection).length;

data/app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx

@@ -17,8 +17,7 @@ export const createCellFunction = (
   customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element,
   isFirstColumn?: boolean,
   onRowToggleClick?: (row: Row<GenericObject>) => void,
-  selectableRows?: boolean,
-  rowStyling?: GenericObject
+  selectableRows?: boolean
 ) => {
   // Add display name to the returned function
   const cellRenderer = ({
@@ -29,7 +28,6 @@ export const createCellFunction = (
     getValue: Getter<string>
   }) => {
     const rowData = row.original;
-    const customStyle = rowStyling?.length > 0 && rowStyling?.find((s:GenericObject) => s?.rowId === row.id);
 
     if (isFirstColumn) {
       switch (row.depth) {
@@ -37,7 +35,6 @@ export const createCellFunction = (
           return (
             <CustomCell
                 customRenderer={customRenderer}
-                customStyle={customStyle}
                 getValue={getValue}
                 onRowToggleClick={onRowToggleClick}
                 row={row}

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -57,7 +57,6 @@ type AdvancedTableProps = {
     onChange?: (value: RowPinningState) => void;
   };
   responsive?: "scroll" | "none",
-  rowStyling?: GenericObject[],
   scrollBarNone?: boolean,
   selectableRows?: boolean,
   showActionsBar?: boolean,
@@ -99,7 +98,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     paginationProps,
     pinnedRows,
     responsive = "scroll",
-    rowStyling,
     scrollBarNone= false,
     showActionsBar = true,
     selectableRows,
@@ -146,7 +144,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     columnVisibilityControl,
     pinnedRows,
-    rowStyling
   });
 
   // Initialize table actions
@@ -339,7 +336,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             onExpandByDepthClick={onExpandByDepthClick}
             pinnedRows={pinnedRows}
             responsive={responsive}
-            rowStyling={rowStyling}
             selectableRows={selectableRows}
             setExpanded={setExpanded}
             showActionsBar={showActionsBar}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from "react"
 import { render, screen, waitFor } from "../utilities/test-utils"
 
-import { AdvancedTable, Pill, colors } from "playbook-ui"
+import { AdvancedTable, Pill } from "playbook-ui"
 
 global.ResizeObserver = class {
   observe() {}
@@ -652,27 +652,3 @@ test("renders virtualized table rows and header", () => {
   const virtualizedRows = kit.querySelectorAll('.virtualized-table-row')
   expect(virtualizedRows.length).toBeLessThan(MOCK_DATA_WITH_ID.length)
 })
-
-test("rowStyling prop works as expected", () => {
-  const rowStyling = [
-  {
-    rowId: "1",
-    backgroundColor: colors.white,
-    fontColor: colors.black
-  },
-];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        rowStyling={rowStyling}
-        tableData={MOCK_DATA_WITH_ID}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const tableBody = kit.querySelector('tbody')
-  const row1 = tableBody.querySelector('tr:nth-child(1)') 
-  expect(row1).toHaveStyle({backgroundColor: colors.white, color: colors.black})
-})

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

@@ -35,7 +35,7 @@ const AdvancedTableRowPinning = (props) => {
     },
   ]
 
-  const [pinnedRows, setPinnedRows] = useState({top: ["8"]})
+  const [pinnedRows, setPinnedRows] = useState({top: ["8", "9", "10", "11", "12", "13", "14"]})
 
   return (
     <div>

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

@@ -1,7 +1,5 @@
-Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
+Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and reorganizing via sorting.
 
-**NOTE:** 
+**NOTE:** This prop is in Beta. Current Requirements for V1:
 - Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
-- Row ids required: Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function. 
-- `pinnedRows` takes an array of row ids to the `top` property as shown in the code snippet below. 
-- For expandable rows, use the parent id in `pinnedRows`, all its children will automatically be pinned with it. If id for a child is passed in without parent being pinned, nothing will be pinned. 
+- Row ids required: Pass an array of row ids to the `top` property. For expandable rows, both parent and all its child row ids must be included individually

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

@@ -59,7 +59,6 @@ examples:
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
   - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
-  - advanced_table_row_styling: Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
   - advanced_table_infinite_scroll: Infinite Scroll

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

@@ -34,7 +34,6 @@ export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table
 export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
 export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
 export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
-export { default as AdvancedTableRowStyling } from './_advanced_table_row_styling.jsx'
 export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
 export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
 export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -3,6 +3,8 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
+import { PlotTreemapOptions } from "highcharts";
+
 const highchartsDarkTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -164,7 +166,43 @@ const highchartsDarkTheme: ThemeProps = {
       marker: {
         lineColor: colors.border_dark,
       },
-    }
+    },
+
+    //TREEMAP CHART STYLES
+    treemap: {
+      layoutAlgorithm: "squarified",
+      allowTraversingTree: false,
+      animationLimit: 1000,
+      colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+        colors.data_8,
+      ],
+      dataLabels: {
+        enabled: true,
+        style: {
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.bold,
+          fontSize: typography.heading_4,
+        },
+      },
+      levels: [
+        {
+          level: 1,
+          dataLabels: {
+            enabled: false,
+          },
+        },
+      ],
+      traverseUpButton: {
+        position: { y: -50 },
+      },
+    } as PlotTreemapOptions,
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -3,6 +3,8 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
+import { PlotTreemapOptions } from "highcharts";
+
 const highchartsTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -163,7 +165,43 @@ const highchartsTheme: ThemeProps = {
       marker: {
         lineColor: '#333',
       },
-    }
+    },
+
+    //TREEMAP CHART STYLES
+    treemap: {
+      layoutAlgorithm: "squarified",
+      allowTraversingTree: false,
+      animationLimit: 1000,
+      colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+        colors.data_8,
+      ],
+      dataLabels: {
+        enabled: true,
+        style: {
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.bold,
+          fontSize: typography.heading_4,
+        },
+      },
+      levels: [
+        {
+          level: 1,
+          dataLabels: {
+            enabled: false,
+          },
+        },
+      ],
+      traverseUpButton: {
+        position: { y: -50 },
+      },
+    } as PlotTreemapOptions,
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'unitedStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 
 %>

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

@@ -5,20 +5,17 @@ const DropdownBlankSelection = (props) => {
   const options = [
     {
       label: "United States",
-      value: "unitedStates",
-      id: "us"
+      value: "United States",
     },
     {
       label: "Canada",
-      value: "canada",
-      id: "ca"
+      value: "Canada",
     },
     {
       label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
+      value: "Pakistan",
     }
-  ];  
+  ];
 
   return (
   <>

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

@@ -6,18 +6,15 @@ import Dropdown from '../../pb_dropdown/_dropdown'
 const options = [
     {
         label: "United States",
-        value: "unitedStates",
-        id: "us"
+        value: "United States",
     },
     {
         label: "Canada",
-        value: "canada",
-        id: "ca"
+        value: "Canada",
     },
     {
         label: "Pakistan",
-        value: "pakistan",
-        id: "pk"
+        value: "Pakistan",
     }
 ]
 

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

@@ -6,18 +6,15 @@ const DropdownDefault = (props) => {
   const options = [
     {
       label: "United States",
-      value: "unitedStates",
-      id: "us"
+      value: "United States",
     },
     {
       label: "Canada",
-      value: "canada",
-      id: "ca"
+      value: "Canada",
     },
     {
       label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
+      value: "Pakistan",
     }
   ];  
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'unitedStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'unitedStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 
 %>

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

@@ -5,20 +5,17 @@ const DropdownDefaultValue = (props) => {
   const options = [
     {
       label: "United States",
-      value: "unitedStates",
-      id: "us"
+      value: "United States",
     },
     {
       label: "Canada",
-      value: "canada",
-      id: "ca"
+      value: "Canada",
     },
     {
       label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
+      value: "Pakistan",
     }
-  ];
+  ];  
 
   return (
   <>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb

@@ -1,8 +1,8 @@
 <%
   options = [
-    { label: 'United States', value: 'unitedStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 %>
 

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

@@ -10,20 +10,17 @@ const DropdownError = (props) => {
     const options = [
         {
             label: "United States",
-            value: "unitedStates",
-            id: "us"
+            value: "United States",
         },
         {
             label: "Canada",
-            value: "canada",
-            id: "ca"
+            value: "Canada",
         },
         {
             label: "Pakistan",
-            value: "pakistan",
-            id: "pk"
+            value: "Pakistan",
         }
-    ];  
+    ]
 
     return (
         <>

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

@@ -6,48 +6,39 @@ const DropdownMultiSelect = (props) => {
   const options = [
     {
       label: "United States",
-      value: "unitedStates",
-      id: "us"
+      value: "United States",
     },
     {
-      label: "United Kingdom",
-      value: "unitedKingdom",
-      id: "gb"
+        label: "United Kingdom",
+        value: "United Kingdom",
     },  
     {
       label: "Canada",
-      value: "canada",
-      id: "ca"
+      value: "Canada",
     },
     {
       label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
+      value: "Pakistan",
     },
     {
       label: "India",
-      value: "india",
-      id: "in"
+      value: "India",
     },
     {
       label: "Australia",
-      value: "australia",
-      id: "au"
+      value: "Australia",
     },
     {
       label: "New Zealand",
-      value: "new Zealand",
-      id: "nz"
+      value: "New Zealand",
     },
     {
       label: "Italy",
-      value: "italy",
-      id: "it"
+      value: "Italy",
     },
     {
       label: "Spain",
-      value: "spain",
-      id: "es"
+      value: "Spain",
     }
   ];