playbook_ui 11.9.0 → 11.10.0.pre.alpha.pagination1

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

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

@@ -1,3 +1,4 @@
 export { default as LegendDefault } from './_legend_default.jsx'
 export { default as LegendPrefix } from './_legend_prefix.jsx'
 export { default as LegendColors } from './_legend_colors'
+export { default as LegendCustomColors} from './_legend_custom_colors'

data/app/pb_kits/playbook/pb_legend/legend.html.erb

@@ -4,7 +4,7 @@
     data: object.data,
     class: object.classname) do %>
   <%= pb_rails("body", props: {color: object.body_color}) do %>
-    <span class="pb_legend_indicator_circle"></span>
+    <span style="<%= object.custom_color %>" class=<%= object.custom_color_class %>></span>
     <%= pb_rails("title", props: { dark: object.dark, text: object.prefix_text, tag: "span", size: 4 }) %>
     <%= object.text %>
   <% end %>

data/app/pb_kits/playbook/pb_legend/legend.rb

@@ -12,8 +12,16 @@ module Playbook
         dark ? "lighter" : "light"
       end
 
+      def custom_color
+        color.start_with?("#") ? "background: #{color}" : ""
+      end
+
+      def custom_color_class
+        color.start_with?("#") ? "pb_legend_indicator_circle_custom" : "pb_legend_indicator_circle"
+      end
+
       def classname
-        generate_classname("pb_legend_kit", color)
+        generate_classname("pb_legend_kit", color.start_with?("#") ? nil : color)
       end
     end
   end

data/app/pb_kits/playbook/pb_pagination/_pagination.scss

@@ -0,0 +1,59 @@
+@import "tokens/colors";
+@import "tokens/typography";
+@import "tokens/border_radius";
+@import "tokens/shadows";
+
+.pb_pagination {
+  .pagination > li > a,
+  .pagination > li > span {
+    border: 0 !important;
+    margin-top: 1px;
+    margin-bottom: 1px;
+  }
+  .pagination > li:first-child > a,
+  .pagination > li:first-child > span {
+    border-right: 1px solid $border_light !important;
+    z-index: 2;
+  }
+  .pagination > li:last-child > a,
+  .pagination > li:last-child > span {
+    border-left: 1px solid $border_light !important;
+    z-index: 2;
+  }
+
+  .pagination {
+    border: 1px solid $border_light;
+    background-color: $white;
+
+    a {
+      color: $text_lt_default !important;
+      font-size: $text_small;
+      font-weight: $bold;
+      border: none;
+      margin-left: 1px;
+      margin-right: 1px;
+
+      &:hover {
+        background-color: $active_light;
+        color: $primary !important;
+        border-radius: $border_rad_light;
+      }
+
+      &:focus {
+        outline: 1px solid $primary !important;
+        border-radius: $border_rad_light;
+        outline-offset: -1px;
+      }
+    }
+    .active > span {
+      background-color: $primary;
+      border-radius: $border_rad_light;
+      margin-left: 1px;
+      margin-right: 1px;
+
+      &:hover {
+        box-shadow: $shadow_deeper;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("pagination") %>

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md

@@ -0,0 +1 @@
+To apply our pagination CSS styles in rails, wrap the `will_paginate` component in our pagination component.

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

@@ -0,0 +1,6 @@
+examples:
+  
+  rails:
+  - pagination_default: Default
+  
+  

data/app/pb_kits/playbook/pb_pagination/pagination.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+  <%= content.presence %>
+<% end %>

data/app/pb_kits/playbook/pb_pagination/pagination.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPagination
+    class Pagination < ::Playbook::KitBase
+      def classname
+        generate_classname("pb_pagination")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -31,6 +31,7 @@
 
   input {
     position: relative;
+    width: 0;
     left: $offscreen;
     &:checked, &:focus {
       & ~ .pb_radio_button {

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

@@ -121,7 +121,6 @@ $pb_selectable_card_border: 2px;
       }
       .separator{
         background: $error_dark;
-        width: 2px;
       }
     }
   }
@@ -144,7 +143,6 @@ $pb_selectable_card_border: 2px;
     }
     .separator {
       background: $error;
-      width: 2px;
     }
   }
 }

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -157,8 +157,42 @@
   .placeholder+.input-wrapper .typeahead-plus-icon {
     display: none;
   }
-  .typeahead-kit-select__control--is-focused .typeahead-plus-icon {
-    display: none;
+  .text_input {
+    .typeahead-kit-select {
+      &__single-value{
+        color: $text_lt_default;
+      }
+    }
+    &.typeahead-kit-select {
+      &__single-value{
+        color: $text_lt_default;
+      }
+      &__control {
+        &--is-focused {
+          @include pb_textarea_focus;
+          @include transition_default;
+          border-color: $primary;
+          background-color: rgba($focus_input_light,$opacity_5);
+          box-shadow: none;
+          .typeahead-plus-icon {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  
+ 
+  .typeahead-kit-select__menu {
+    .typeahead-kit-select__option {
+      &.typeahead-kit-select__option--is-focused {
+        background-color: $hover_light;
+      }
+      &.typeahead-kit-select__option--is-selected {
+        background-color: $primary;
+      }
+    }
   }
   .typeahead-plus-icon {
     color: $text_lt_lighter;
@@ -178,3 +212,4 @@
     }
   }
 }
+

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -154,30 +154,40 @@ $data_colors: (
 /* Status colors ----------------------*/
 $success:             $green !default;
 $success_secondary:   lighten($success, 10%);
+$success_subtle:      rgba($success, $opacity_1);
 $warning:             $yellow !default;
 $warning_secondary:   lighten($warning, 10%);
+$warning_subtle:      rgba($warning, $opacity_1);
 $error:               $red !default;
 $error_dark:          $red_dark !default;
 $error_dark_body:     lighten($error_dark, 2%);
 $error_secondary:     lighten($error, 10%);
+$error_subtle:        rgba($error, $opacity_1);
 $info:                $teal !default;
 $info_secondary :     lighten($info, 10%);
+$info_subtle:         rgba($info, $opacity_1);
 $neutral:             $slate !default;
 $neutral_secondary:   lighten($neutral, 10%);
+$neutral_subtle:      rgba($neutral, $opacity_1);
 $primary:             $primary !default;
-$primary_secondary:    lighten($primary, 10%);
+$primary_secondary:   lighten($primary, 10%);
 
 $status_colors: (
   success:            $success,
   success_secondary:    $success_secondary,
+  success_subtle:     $success_subtle,
   warning:            $warning,
   warning_secondary:    $warning_secondary,
+  warning_subtle:     $warning_subtle,
   error:              $error,
   error_secondary:      $error_secondary,
+  error_subtle:       $error_subtle,
   info:               $info,
   info_secondary:       $info_secondary,
+  info_subtle:        $info_subtle,
   neutral:            $neutral,
   neutral_secondary:    $neutral_secondary,
+  neutral_subtle:     $neutral_subtle,
   primary:            $primary,
   primary_secondary:    $primary_secondary
 );