playbook_ui 11.9.0.pre.alpha.fileupload1 → 11.10.0.pre.alpha.pagination1

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx

@@ -7,7 +7,7 @@ const FilterNoBackground = (props) => {
     { value: 'Canada' },
     { value: 'Brazil' },
     { value: 'Philippines' },
-    { value: 'A galaxy far far away, like really far away...' },
+    { value: 'A galaxy far far away...' },
   ]
   return (
     <>
@@ -17,7 +17,7 @@ const FilterNoBackground = (props) => {
           'Full Name': 'John Wick',
           'City': 'Las Vegas',
         }}
-          minWidth="375px"
+          minWidth="360px"
           results={3}
           sortOptions={{
           popularity: 'Popularity',
@@ -29,33 +29,40 @@ const FilterNoBackground = (props) => {
           sortValue={[{ name: 'popularity', dir: 'desc' }]}
           {...props}
       >
-        <TextInput
-            label="Full Name"
-            placeholder="Enter name"
-            {...props}
-        />
+      {({ closePopover }) => (
+        <form>
 
-        <Select
-            blankSelection="Select One..."
-            label="Territory"
-            name="location"
-            options={options}
-            {...props}
-        />
-        <Flex
-            spacing="between"
-            {...props}
-        >
-          <Button
-              text="Apply"
+          <TextInput
+              label="Full Name"
+              placeholder="Enter name"
               {...props}
           />
-          <Button
-              text="Clear"
-              variant="secondary"
+
+          <Select
+              blankSelection="Select One..."
+              label="Territory"
+              name="location"
+              options={options}
               {...props}
           />
-        </Flex>
+          <Flex
+              spacing="between"
+              {...props}
+          >
+            <Button
+                onClick={closePopover}
+                text="Apply"
+                {...props}
+            />
+            <Button
+                text="Clear"
+                variant="secondary"
+                {...props}
+            />
+          </Flex>
+        </form>
+      )}
+
       </Filter>
 
       <Filter
@@ -65,7 +72,7 @@ const FilterNoBackground = (props) => {
           'Full Name': 'John Wick',
           'City': 'Las Vegas',
         }}
-          minWidth="375px"
+          minWidth="360px"
           results={3}
           sortOptions={{
           popularity: 'Popularity',
@@ -77,33 +84,39 @@ const FilterNoBackground = (props) => {
           sortValue={[{ name: 'popularity', dir: 'desc' }]}
           {...props}
       >
-        <TextInput
-            label="Full Name"
-            placeholder="Enter name"
-            {...props}
-        />
+      {({ closePopover }) => (
+        <form>
 
-        <Select
-            blankSelection="Select One..."
-            label="Territory"
-            name="location"
-            options={options}
-            {...props}
-        />
-        <Flex
-            spacing="between"
-            {...props}
-        >
-          <Button
-              text="Apply"
+          <TextInput
+              label="Full Name"
+              placeholder="Enter name"
               {...props}
           />
-          <Button
-              text="Clear"
-              variant="secondary"
+
+          <Select
+              blankSelection="Select One..."
+              label="Territory"
+              name="location"
+              options={options}
               {...props}
           />
-        </Flex>
+          <Flex
+              spacing="between"
+              {...props}
+          >
+            <Button
+                onClick={closePopover}
+                text="Apply"
+                {...props}
+            />
+            <Button
+                text="Clear"
+                variant="secondary"
+                {...props}
+            />
+          </Flex>
+        </form>
+      )}
       </Filter>
     </>
   )

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb

@@ -1,6 +1,6 @@
 <%=
   pb_rails("filter", props: {
-    min_width: "375px",
+    min_width: "360px",
     id: "nosort",
     filters: [
       { name: "name", value: "John Wick" }
@@ -15,7 +15,7 @@
       OpenStruct.new(name: "Canada", value: 2),
       OpenStruct.new(name: "Brazil", value: 3),
       OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
+      OpenStruct.new(name: "A galaxy far far away...", value: 5)
     ]
   %>
 

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx

@@ -7,45 +7,51 @@ const FilterNoSort = (props) => {
     { value: 'Canada' },
     { value: 'Brazil' },
     { value: 'Philippines' },
-    { value: 'A galaxy far far away, like really far away...' },
+    { value: 'A galaxy far far away...' },
   ]
   return (
     <Filter
         filters={{
           'Full Name': 'John Wick',
         }}
-        minWidth="375px"
+        minWidth="360px"
         results={546}
         sortValue={[{ name: 'popularity', dir: 'desc' }]}
         {...props}
     >
-      <TextInput
-          label="Full Name"
-          placeholder="Enter name"
-          {...props}
-      />
-
-      <Select
-          blankSelection="Select One..."
-          label="Territory"
-          name="location"
-          options={options}
-          {...props}
-      />
-      <Flex
-          spacing="between"
-          {...props}
-      >
-        <Button
-            text="Apply"
+    {({ closePopover }) => (
+      <form>
+        <TextInput
+            label="Full Name"
+            placeholder="Enter name"
             {...props}
         />
-        <Button
-            text="Clear"
-            variant="secondary"
+
+        <Select
+            blankSelection="Select One..."
+            label="Territory"
+            name="location"
+            options={options}
             {...props}
         />
-      </Flex>
+        <Flex
+            spacing="between"
+            {...props}
+        >
+          <Button
+              onClick={closePopover}
+              text="Apply"
+              {...props}
+          />
+          <Button
+              text="Clear"
+              variant="secondary"
+              {...props}
+          />
+        </Flex>
+      </form>
+    )}
+    
     </Filter>
   )
 }

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb

@@ -1,6 +1,6 @@
 <%=
   pb_rails("filter", props: {
-    min_width: "375px",
+    min_width: "360px",
     id: "fo",
     filters: [
       { name: "name", value: "John Wick" }
@@ -14,7 +14,7 @@
       OpenStruct.new(name: "Canada", value: 2),
       OpenStruct.new(name: "Brazil", value: 3),
       OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
+      OpenStruct.new(name: "A galaxy far far away...", value: 5)
     ]
   %>
   <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx

@@ -7,41 +7,48 @@ const FilterOnly = (props) => {
     { value: 'Canada' },
     { value: 'Brazil' },
     { value: 'Philippines' },
-    { value: 'A galaxy far far away, like really far away...' },
+    { value: 'A galaxy far far away...' },
   ]
   return (
     <Filter
         filters={{ 'Full Name': 'John Wick' }}
-        minWidth="375px"
+        minWidth="360px"
         {...props}
     >
-      <TextInput
-          label="Full Name"
-          placeholder="Enter name"
-          {...props}
-      />
+    {({ closePopover }) => (
+      <form>
 
-      <Select
-          blankSelection="Select One..."
-          label="Territory"
-          name="location"
-          options={options}
-          {...props}
-      />
-      <Flex
-          spacing="between"
-          {...props}
-      >
-        <Button
-            text="Apply"
+        <TextInput
+            label="Full Name"
+            placeholder="Enter name"
             {...props}
         />
-        <Button
-            text="Clear"
-            variant="secondary"
+
+        <Select
+            blankSelection="Select One..."
+            label="Territory"
+            name="location"
+            options={options}
             {...props}
         />
-      </Flex>
+        <Flex
+            spacing="between"
+            {...props}
+        >
+          <Button
+              onClick={closePopover}
+              text="Apply"
+              {...props}
+          />
+          <Button
+              text="Clear"
+              variant="secondary"
+              {...props}
+          />
+        </Flex>
+      </form>
+    )}
+
     </Filter>
   )
 }

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb

@@ -1,6 +1,6 @@
 <%=
   pb_rails("filter", props: {
-    min_width: "375px",
+    min_width: "360px",
     id: "pla",
     filters: [
       { name: "name", value: "John Wick" }
@@ -15,7 +15,7 @@
       OpenStruct.new(name: "Canada", value: 2),
       OpenStruct.new(name: "Brazil", value: 3),
       OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
+      OpenStruct.new(name: "A galaxy far far away...", value: 5)
     ]
   %>
   <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx

@@ -11,14 +11,14 @@ const FilterPlacement = (props) => {
     { value: 'Canada' },
     { value: 'Brazil' },
     { value: 'Philippines' },
-    { value: 'A galaxy far far away, like really far away...' },
+    { value: 'A galaxy far far away...' },
   ]
   return (
 
     <>
       <Filter
           double
-          minWidth="375px"
+          minWidth="360px"
           onSortChange={SortingChangeCallback}
           placement={"right"}
           results={1}
@@ -32,33 +32,39 @@ const FilterPlacement = (props) => {
           sortValue={[{ name: 'popularity', dir: 'desc' }]}
           {...props}
       >
-        <TextInput
-            label="Example Text Field"
-            placeholder="Enter Text"
-            {...props}
-        />
+      {({ closePopover }) => (
+        <form>
 
-        <Select
-            blankSelection="Select One..."
-            label="Example Collection Select"
-            name="Collection Select"
-            options={options}
-            {...props}
-        />
-        <Flex
-            spacing="between"
-            {...props}
-        >
-          <Button
-              text="Apply"
+          <TextInput
+              label="Example Text Field"
+              placeholder="Enter Text"
               {...props}
           />
-          <Button
-              text="Clear"
-              variant="secondary"
+
+          <Select
+              blankSelection="Select One..."
+              label="Example Collection Select"
+              name="Collection Select"
+              options={options}
               {...props}
           />
-        </Flex>
+          <Flex
+              spacing="between"
+              {...props}
+          >
+            <Button
+                onClick={closePopover}
+                text="Apply"
+                {...props}
+            />
+            <Button
+                text="Clear"
+                variant="secondary"
+                {...props}
+            />
+          </Flex>
+        </form>
+      )}
       </Filter>
     </>
   )

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

@@ -1,4 +1,4 @@
-Click the filter buttom above to toggle the popover.
+Click the filter button above to toggle the popover.
 
 To change the filter's popover position, use the `placement` prop with one of the positions: 
 `"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"`

data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb

@@ -1,6 +1,6 @@
 <%=
   pb_rails("filter", props: {
-    min_width: "375px",
+    min_width: "360px",
     id: "2",
     filters: [
       { name: "name", value: "John Wick" }
@@ -20,7 +20,7 @@
       OpenStruct.new(name: "Canada", value: 2),
       OpenStruct.new(name: "Brazil", value: 3),
       OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away, like really far away...", value: 5)
+      OpenStruct.new(name: "A galaxy far far away...", value: 5)
     ]
   %>
 

data/app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx

@@ -13,14 +13,14 @@ const FilterSingle = (props) => {
     { value: 'Canada' },
     { value: 'Brazil' },
     { value: 'Philippines' },
-    { value: 'A galaxy far far away, like really far away...' },
+    { value: 'A galaxy far far away...' },
   ]
   return (
     <Filter
         filters={{
           'Full Name': 'John Wick',
         }}
-        minWidth="375px"
+        minWidth="360px"
         results={546}
         sortOptions={{
           popularity: 'Popularity',
@@ -32,33 +32,38 @@ const FilterSingle = (props) => {
         sortValue={[{ name: 'popularity', dir: 'desc' }]}
         {...props}
     >
-      <TextInput
-          label="Full Name"
-          placeholder="Enter name"
-          {...props}
-      />
-
-      <Select
-          blankSelection="Select One..."
-          label="Territory"
-          name="location"
-          options={options}
-          {...props}
-      />
-      <Flex
-          spacing="between"
-          {...props}
-      >
-        <Button
-            text="Apply"
+    {({ closePopover }) => (
+      <form>
+        <TextInput
+            label="Full Name"
+            placeholder="Enter name"
             {...props}
         />
-        <Button
-            text="Clear"
-            variant="secondary"
+
+        <Select
+            blankSelection="Select One..."
+            label="Territory"
+            name="location"
+            options={options}
             {...props}
         />
-      </Flex>
+        <Flex
+            spacing="between"
+            {...props}
+        >
+          <Button
+              onClick={closePopover}
+              text="Apply"
+              {...props}
+          />
+          <Button
+              text="Clear"
+              variant="secondary"
+              {...props}
+          />
+        </Flex>
+      </form>
+    )}
     </Filter>
   )
 }

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

@@ -7,7 +7,7 @@ examples:
   - filter_no_sort: No Sort
   - filter_only: Filter Only
   - sort_only: Sort Only
-  - filter_min_width: Min Width for Popover Inside of Filter
+  - filter_max_width: Max Width for Popover Inside of Filter
   - filter_placement: Filter Placement
 
   react:
@@ -17,6 +17,5 @@ examples:
   - filter_no_sort: No Sort
   - filter_only: Filter Only
   - sort_only: Sort Only
-  - filter_min_width: Min Width for Popover Inside of Filter
-  - filter_close_popover: Close Popover
+  - filter_max_width: Max Width for Popover Inside of Filter
   - filter_placement: Filter Placement

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

@@ -4,6 +4,5 @@ export { default as FilterNoSort } from './_filter_no_sort.jsx'
 export { default as FilterNoBackground } from './_filter_no_background.jsx'
 export { default as FilterOnly } from './_filter_only.jsx'
 export { default as SortOnly } from './_sort_only.jsx'
-export { default as FilterMinWidth } from './_filter_min_width.jsx'
-export { default as FilterClosePopover } from './_filter_close_popover.jsx'
+export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -27,6 +27,11 @@
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
+    
+      &:focus {
+        outline: $primary solid 1px;
+        outline-offset: -1px;
+      }
     }
   }
 

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -110,6 +110,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
         <Hashtag
             classname="home-hashtag"
             dark={dark}
+            marginRight="xxs"
             newWindow={newWindow}
             text={homeId}
             type="home"

data/app/pb_kits/playbook/pb_legend/_legend.jsx

@@ -34,8 +34,16 @@ const Legend = (props: LegendProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+
+  const customColor = color.charAt(0) === '#' && color
+
+  const customColorStyle = {
+  background: customColor
+}
+
+ 
   const bodyCss = classnames(
-    buildCss('pb_legend_kit', color),
+    buildCss('pb_legend_kit', customColor ? "" : color),
     globalProps(props),
     className
   )
@@ -48,7 +56,9 @@ const Legend = (props: LegendProps) => {
         id={id}
     >
       <Body color={dark ? 'lighter' : 'light'}>
-        <span className="pb_legend_indicator_circle" />
+        <span className={`${customColor ? "pb_legend_indicator_circle_custom" : "pb_legend_indicator_circle"}`}
+            style={customColorStyle} 
+        />
         <If condition={prefixText}>
           <Title
               dark={dark}

data/app/pb_kits/playbook/pb_legend/_legend.scss

@@ -23,6 +23,12 @@
   @include indicator-colors($data_colors);
   @include indicator-colors($status_colors);
   @include indicator-colors($product_colors);
-  @include indicator-colors($category_colors)
+  @include indicator-colors($category_colors);
 
+  .pb_legend_indicator_circle_custom {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  }
 }

data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("legend", props: { color: "#dc418a", text: "Windows" }) %>
+<%= pb_rails("legend", props: { color: "#3ef0b8", text: "Windows" }) %>
+<%= pb_rails("legend", props: { color: "#ab8b04", text: "Windows" }) %>

data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Legend } from '../..'
+
+const LegendCustomColors = (props) => (
+  <div>
+    <Legend
+        color="#dc418a"
+        text="Windows"
+        {...props}
+    />
+    <Legend
+        color="#3ef0b8"
+        text="Windows"
+        {...props}
+    />
+    <Legend
+        color="#ab8b04"
+        text="Windows"
+        {...props}
+    />
+  </div>
+)
+
+export default LegendCustomColors

data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.md

@@ -0,0 +1 @@
+The color prop also allows for use of custom colors passed in as HEX codes. 

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

@@ -4,8 +4,10 @@ examples:
   - legend_default: Default
   - legend_prefix: With Prefix Text
   - legend_colors: Colors
+  - legend_custom_colors: Custom Colors
 
   react:
   - legend_default: Default
   - legend_prefix: With Prefix Text
   - legend_colors: Colors
+  - legend_custom_colors: Custom Colors