playbook_ui 11.9.0 → 11.10.0.pre.alpha.pre.bold1

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import Title from '../_title'
+
+const TitleLightWeight = (props) => {
+  return (
+    <div>
+      <Title
+          bold={false}
+          size={3}
+          tag="h3"
+          text="Title 3"
+          {...props}
+      />
+      <Title
+          bold={false}
+          size={2}
+          tag="h2"
+          text="Title 2"
+          {...props}
+      />
+      <Title
+          bold={false}
+          size={1}
+          tag="h1"
+          text="Title 1"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TitleLightWeight

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md

@@ -0,0 +1,3 @@
+##### Prop
+Title kit will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
+Title `size 4` uses a heavy font weight by default and will not accept a lighter font weight.

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

@@ -1,8 +1,10 @@
 examples:
   rails:
-  - title_light: Light UI
+  - title_default: Default UI
+  - title_light_weight: Light Weight UI
   - title_colors: Colors
 
   react:
-  - title_light: Light UI
+  - title_default: Default UI
+  - title_light_weight: Light Weight UI
   - title_colors: Colors

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

@@ -1,2 +1,3 @@
-export { default as TitleLight } from './_title_light.jsx'
+export { default as TitleDefault } from './_title_default.jsx'
+export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'

data/app/pb_kits/playbook/pb_title/title.rb

@@ -17,9 +17,14 @@ module Playbook
                      values: [nil, "link"],
                      default: nil,
                      deprecated: true
+      prop :bold, type: Playbook::Props::Boolean, default: true
 
       def classname
-        generate_classname("pb_title_kit", size, variant, color)
+        generate_classname("pb_title_kit", size, variant, color, is_bold)
+      end
+
+      def is_bold
+        bold ? nil : "thin"
       end
     end
   end

data/app/pb_kits/playbook/pb_title/title.test.js

@@ -15,6 +15,19 @@ test('returns namespaced class name', () => {
   expect(kit).toHaveClass('pb_title_kit_size_3')
 })
 
+test('with thin font weight', () => {
+  render(
+    <Title
+        bold={false}
+        data={{ testid: 'primary-test' }}
+        text="Test thin font weight"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_title_kit_size_3_thin')
+})
+
 test('with colors', () => {
   render(
     <Title

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
 );

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

@@ -31,8 +31,19 @@
 
 @mixin pb_title_4 {
   @include pb_title($heading_4, $bolder);
+  letter-spacing: -0.03em !important;
 }
 
 @mixin pb_title_dark {
   color: $text_dk_default;
 }
+
+@mixin pb_title_bold {
+  font-weight: $bolder;
+  letter-spacing: 0em;
+}
+
+@mixin pb_title_thin {
+  font-weight: $lighter;
+  letter-spacing: $lspace_tight;
+}

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.8.1"
-  VERSION = "11.9.0"
+  PREVIOUS_VERSION = "11.10.0"
+  VERSION = "11.10.0.pre.alpha-bold1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.9.0
+  version: 11.10.0.pre.alpha.pre.bold1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-10-19 00:00:00.000000000 Z
+date: 2022-10-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -339,6 +339,9 @@ files:
 - app/pb_kits/playbook/pb_background/docs/_background_status.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_status.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_status.md
+- app/pb_kits/playbook/pb_background/docs/_background_status_subtle.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_status_subtle.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_status_subtle.md
 - app/pb_kits/playbook/pb_background/docs/_background_white.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_white.jsx
 - app/pb_kits/playbook/pb_background/docs/_description.md
@@ -584,8 +587,14 @@ files:
 - app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb
 - app/pb_kits/playbook/pb_collapsible/collapsible_main.rb
 - app/pb_kits/playbook/pb_collapsible/context.ts
+- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.html.erb
+- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx
+- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.md
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx
+- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.html.erb
+- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx
+- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md
 - app/pb_kits/playbook/pb_collapsible/docs/example.yml
 - app/pb_kits/playbook/pb_collapsible/docs/index.js
 - app/pb_kits/playbook/pb_collapsible/index.js
@@ -868,12 +877,11 @@ files:
 - app/pb_kits/playbook/pb_filter/_filter.jsx
 - app/pb_kits/playbook/pb_filter/_filter.scss
 - app/pb_kits/playbook/pb_filter/docs/_description.md
-- app/pb_kits/playbook/pb_filter/docs/_filter_close_popover.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
-- app/pb_kits/playbook/pb_filter/docs/_filter_default.md
-- app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb
-- app/pb_kits/playbook/pb_filter/docs/_filter_min_width.jsx
+- app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb
+- app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx
+- app/pb_kits/playbook/pb_filter/docs/_filter_max_width.md
 - app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_no_background.md
@@ -1243,6 +1251,9 @@ files:
 - app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb
 - app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx
 - app/pb_kits/playbook/pb_legend/docs/_legend_colors.md
+- app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb
+- app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx
+- app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.md
 - app/pb_kits/playbook/pb_legend/docs/_legend_default.html.erb
 - app/pb_kits/playbook/pb_legend/docs/_legend_default.jsx
 - app/pb_kits/playbook/pb_legend/docs/_legend_prefix.html.erb
@@ -1984,9 +1995,12 @@ files:
 - app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb
 - app/pb_kits/playbook/pb_title/docs/_title_colors.jsx
 - app/pb_kits/playbook/pb_title/docs/_title_colors.md
-- app/pb_kits/playbook/pb_title/docs/_title_light.html.erb
-- app/pb_kits/playbook/pb_title/docs/_title_light.jsx
-- app/pb_kits/playbook/pb_title/docs/_title_light.md
+- app/pb_kits/playbook/pb_title/docs/_title_default.html.erb
+- app/pb_kits/playbook/pb_title/docs/_title_default.jsx
+- app/pb_kits/playbook/pb_title/docs/_title_default.md
+- app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb
+- app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx
+- app/pb_kits/playbook/pb_title/docs/_title_light_weight.md
 - app/pb_kits/playbook/pb_title/docs/example.yml
 - app/pb_kits/playbook/pb_title/docs/index.js
 - app/pb_kits/playbook/pb_title/title.html.erb
@@ -2310,9 +2324,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

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

@@ -1,62 +0,0 @@
-import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
-
-const FilterClosePopover = (props) => {
-  const options = [
-    { value: 'USA' },
-    { value: 'Canada' },
-    { value: 'Brazil' },
-    { value: 'Philippines' },
-    { value: 'A galaxy far far away, like really far away...' },
-  ]
-
-  return (
-    <Filter
-        {...props}
-        filters={{
-          'Full Name': 'John Wick',
-          'City': 'San Francisco',
-        }}
-        minWidth="375px"
-        results={1}
-        sortOptions={{
-          popularity: 'Popularity',
-          // eslint-disable-next-line
-          manager_title: 'Manager\'s Title',
-          // eslint-disable-next-line
-          manager_name: 'Manager\'s Name',
-        }}
-        sortValue={[{ name: 'popularity', dir: 'desc' }]}
-    >
-      {({ closePopover }) => (
-        <form>
-          <TextInput
-              label="Full Name"
-              placeholder="Enter name"
-          />
-
-          <Select
-              blankSelection="Select One..."
-              label="Territory"
-              name="location"
-              options={options}
-          />
-          <Flex
-              spacing="between"
-          >
-            <Button
-                onClick={closePopover}
-                text="Apply"
-            />
-            <Button
-                text="Clear"
-                variant="secondary"
-            />
-          </Flex>
-        </form>
-      )}
-    </Filter>
-  )
-}
-
-export default FilterClosePopover

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

@@ -1,57 +0,0 @@
-import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
-
-const FilterMinWidth = (props) => {
-  const options = [
-    { value: 'USA' },
-    { value: 'Canada' },
-    { value: 'Brazil' },
-    { value: 'Philippines' },
-    { value: 'A galaxy far far away, like really far away...' },
-  ]
-  return (
-    <Filter
-        {...props}
-        double
-        filters={{
-          'Full Name': 'John Wick',
-          'City': 'San Francisco',
-        }}
-        minWidth="375px"
-        results={1}
-        sortOptions={{
-          popularity: 'Popularity',
-          // eslint-disable-next-line
-          manager_title: 'Manager\'s Title',
-          // eslint-disable-next-line
-          manager_name: 'Manager\'s Name',
-        }}
-        sortValue={[{ name: 'popularity', dir: 'desc' }]}
-    >
-      <TextInput
-          label="Full Name"
-          placeholder="Enter name"
-      />
-
-      <Select
-          blankSelection="Select One..."
-          label="Territory"
-          name="location"
-          options={options}
-      />
-      <Flex
-          spacing="between"
-      >
-        <Button
-            text="Apply"
-        />
-        <Button
-            text="Clear"
-            variant="secondary"
-        />
-      </Flex>
-    </Filter>
-  )
-}
-
-export default FilterMinWidth