playbook_ui 14.17.0.pre.rc.1 → 14.18.0.pre.alpha.PLAY2037selectinlinecareterror7490

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

@@ -1,10 +1,10 @@
 <% 
-  options = [
+   options = [
     {
       label: "Jasper Furniss",
       value: "Jasper Furniss",
       territory: "PHL",
-      title: "Senior UX Engineer",
+      title: "Lead UX Engineer",
       id: "jasper-furniss",
       status: "Offline"
     },
@@ -17,22 +17,22 @@
       status: "Away"
     },
     {
-      label: "Jason Cypret",
-      value: "Jason Cypret",
+      label: "Carlos Lima",
+      value: "Carlos Lima",
       territory: "PHL",
-      title: "VP of User Experience",
-      id: "jason-cypret",
+      title: "Nitro Developer",
+      id: "carlos-lima",
       status: "Online"
     },
     {
       label: "Courtney Long",
       value: "Courtney Long",
       territory: "PHL",
-      title: "UX Design Mentor",
+      title: "Lead UX Designer",
       id: "courtney-long",
       status: "Online"
     }
-  ]
+  ];
 
 %>
 

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -95,7 +95,7 @@ test('generated customDisplay for trigger', () => {
 
   const kit = screen.getByTestId(testId)
   const trigger = kit.querySelector('.pb_dropdown_trigger')
-  const customDisplay = trigger.querySelector('.fa-flag.pb_icon_kit.fa-fw')
+  const customDisplay = trigger.querySelector('.pb_custom_icon')
   expect(customDisplay).toBeInTheDocument()
 })
 
@@ -170,7 +170,7 @@ test('generated custom Trigger', () => {
         options={options}
     >
       <Dropdown.Trigger>
-          <Icon icon="elephant" />
+          <Icon icon="flag" />
       </Dropdown.Trigger>
       {options.map((option) => (
       <Dropdown.Option key={option.id} 
@@ -182,7 +182,7 @@ test('generated custom Trigger', () => {
 
   const kit = screen.getByTestId(testId)
   const trigger = kit.querySelector('.pb_dropdown_trigger')
-  const customTrigger = trigger.querySelector('.fa-elephant.pb_icon_kit.fa-fw')
+  const customTrigger = trigger.querySelector('.pb_custom_icon')
   expect(customTrigger).toBeInTheDocument()
 })
 

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -22,7 +22,7 @@ type DropdownOptionProps = {
   data?: { [key: string]: string };
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
-  key?: string;
+  key?: string | number;
   option?: GenericObject;
   padding?: string;
 }  & GlobalProps;

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

@@ -0,0 +1,41 @@
+<%=
+  pb_rails("filter", props: {
+    id: "filter_within_trubo_frames",
+    position: "top",
+    filters: [
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "default",
+    results: 1,
+    popover_props: { append_to: "parent"  },
+  }) do
+%>
+  <%
+   example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      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 far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1 @@
+By default, the filter popover attaches to the `<body>`. To attach it elsewhere, like inside a Turbo Frame, pass the `append_to` prop through `popover_props`. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

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

@@ -11,6 +11,7 @@ examples:
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
+  - filter_within_turbo_frames: Within Turbo Frames
 
   react:
   - filter_default: Default

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

@@ -23,35 +23,39 @@
 @mixin error-state-right-side-select-kit {
   &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
   &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
-    align-items: flex-start;
-
-    .pb_select_kit_wrapper {
-      padding-top: $space_md;
-      margin-top: 2px;
+    &:not(:has(.pb_phone_number_input)) {
+      align-items: flex-start;
 
-      .pb_select_kit_caret {
+      .pb_select_kit_wrapper {
         padding-top: $space_md;
+        margin-top: 2px;
+
+        .pb_select_kit_caret {
+          padding-top: $space_md;
+        }
       }
-    }
 
-    .pb_select_kit_wrapper.error {
-      padding-top: $space_md;
-      margin-top: 2px;
+      .pb_select_kit_wrapper.error {
+        padding-top: $space_md;
+        margin-top: 2px;
 
-      .pb_select_kit_caret {
-        padding-top: $space_xl;
+        .pb_select_kit_caret {
+          padding-top: $space_xl;
+        }
       }
     }
   }
 }
 
 @mixin error-state-left-side-select-kit {
-  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
-    align-items: flex-start;
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_text_input_kit.error) {
+    &:not(:has(.pb_phone_number_input)) {
+      align-items: flex-start;
 
-    .pb_text_input_kit.error {
-      padding-top: $space_md;
-      margin-top: 2px;
+      .pb_text_input_kit.error {
+        padding-top: $space_md;
+        margin-top: 2px;
+      }
     }
   }
-}
+}

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

@@ -85,11 +85,19 @@
     .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-      border-right-width: 0;
+      border-right-color: transparent;
     }
+    [class^=pb_text_input_kit] .text_input_wrapper input:focus,
+    [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
+      border-right-color: $primary;
+    } 
+    [class^=pb_text_input_kit].error .text_input_wrapper input,
+    [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
+      border-right-color: $error;
+    }   
   }
 
-  & > [class^=pb_phone_number_input]:not(:first-child) {
+  & > [class^=pb_phone_number_input]:not(:first-child), [class^=pb_passphrase]:not(:first-child) {
     .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
@@ -107,8 +115,16 @@
     .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-      border-right: none;
+      border-right-color: transparent;
     }
+    [class^=pb_text_input_kit] .text_input_wrapper input:focus,
+    [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
+      border-right-color: $primary;
+    } 
+    [class^=pb_text_input_kit].error .text_input_wrapper input,
+    [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
+      border-right-color: $error;
+    }  
   }
 
   &[class*=rails] > [class^=pb_date_picker_kit] {
@@ -205,4 +221,30 @@
       border-top-left-radius: 0;
     }
   }
+
+  .pb_text_input_kit.error {
+    .text_input_wrapper {
+      input:focus {
+        outline: none;
+      }
+    }
+
+    & + * input,
+    & + * select {
+      border-left-color: $red;
+    }
+  }
+
+  .pb_text_input_kit:not(.error):focus-within + .error,
+  .pb_text_input_kit:not(.error):focus-within + .pb_select .error {
+    input,
+    select {
+      border-left: none;
+      padding-left: calc(var(--iti-flag-width) + 1px);
+    }
+  }
+  
+  &:has(> [class^="pb_select"]):has(> .pb_passphrase) [class^="pb_select"] {
+      align-self: baseline;
+  }
 }

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb

@@ -1,5 +1,4 @@
-<div>
-
+<%= pb_rails("flex", props: {orientation: "column", row_gap:"md"}) do %>
   <%= pb_rails("form_group") do %>
     <%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
     <%= pb_rails("select", props: {
@@ -17,8 +16,6 @@
       ]
     }) %>
   <% end %>
-  <br>
-  <br>
   <%= pb_rails("form_group") do %>
     <%= pb_rails("select", props: {
         blank_selection: "Phone",
@@ -32,4 +29,17 @@
         id: "phone"
     }) %>
   <% end %>
-</div>
+  <%= pb_rails("form_group") do %>
+      <%= pb_rails("phone_number_input", props: {
+        id: "phone2"
+      }) %>
+      <%= pb_rails("select", props: {
+        blank_selection: "Phone",
+        options: [
+          { value: "Cell" },
+          { value: "Work" },
+          { value: "Home" },
+        ]
+      }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx

@@ -1,11 +1,16 @@
-import React from 'react'
+import React, {useState} from 'react'
 
 import FormGroup from '../_form_group'
 import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
+import Flex from '../../pb_flex/_flex'
+import Passphrase from '../../pb_passphrase/_passphrase'
 
 const FormGroupSelect = (props) => {
+  const [input, setInput] = useState("");
+  const handleChange = (e) => setInput(e.target.value);
+
   const options = [
     { value: 'Country' },
     { value: 'Pop' },
@@ -25,7 +30,10 @@ const FormGroupSelect = (props) => {
   ]
 
   return (
-    <div>
+    <Flex 
+        orientation="column" 
+        rowGap="md"
+    >
       <FormGroup>
         <TextInput
             placeholder="Enter Artist Name"
@@ -37,18 +45,43 @@ const FormGroupSelect = (props) => {
             {...props}
         />
       </FormGroup>
-      <br />
-      <br />
       <FormGroup>
         <Select
             blankSelection="Phone"
             options={phoneOptions}
-            />
+            {...props}
+        />
         <PhoneNumberInput
             id='default'
+            {...props}
         />
     </FormGroup>
-    </div>
+    <FormGroup>
+      <PhoneNumberInput
+          id='default-2'
+          {...props}
+      />
+      <Select
+          blankSelection="Phone"
+          options={phoneOptions}
+          {...props}
+      />
+    </FormGroup>
+    <FormGroup>
+        <Select 
+            blankSelection="Phone" 
+            options={phoneOptions}
+            {...props}
+        />
+        <Passphrase
+            id="my-passphrase"
+            label=""
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+      </FormGroup>
+    </Flex>
   )
 }
 

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
+
+const data = [{ name: "Name", y: 45 }]
+
+const baseOptions = {
+  series: [{ data: data }],
+};
+
+const GaugePbStyles = () => {
+  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GaugePbStyles;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md

@@ -0,0 +1 @@
+You don't need to use the Gauge Kit to apply Playbook styles to your Highcharts gauge chart. Just import gaugeTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.

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

@@ -15,6 +15,7 @@ examples:
 
   react:
   - gauge_default: Default
+  - gauge_pb_styles: Playbook Styles
   - gauge_disable_animation: Disable Animation
   - gauge_title: Title
   - gauge_units: Units

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

@@ -1,4 +1,5 @@
 export { default as GaugeDefault } from './_gauge_default.jsx'
+export { default as GaugePbStyles } from './_gauge_pb_styles.jsx'
 export { default as GaugeDisableAnimation } from './_gauge_disable_animation.jsx'
 export { default as GaugeFullCircle } from './_gauge_full_circle.jsx'
 export { default as GaugeHeight } from './_gauge_height.jsx'

data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts

@@ -0,0 +1,85 @@
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
+
+const gaugeTheme = {
+  title: { text: "" },
+  chart: {
+    type: "solidgauge",
+    events: {
+      render() {
+        this.container
+          const arc = this.container.querySelector('path.gauge-pane');
+          if (arc) arc.setAttribute('stroke-linejoin', 'round');
+      }
+    }
+  },
+  pane: {
+    size: "90%",
+    startAngle: -100,
+    endAngle: 100,
+    background: [
+      {
+        borderWidth: 20,
+        innerRadius: "90%",
+        outerRadius: "90%",
+        shape: "arc",
+        className: "gauge-pane",
+        borderColor: colors.border_light,
+        borderRadius: '50%',
+      },
+    ],
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.bg_dark],
+        [1, colors.bg_dark],
+      ],
+    },
+    pointFormat:
+      '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
+      "<b>{point.y}</b>",
+    followPointer: true,
+    shadow: false,
+    borderWidth: 0,
+    borderRadius: 10,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_default,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+  },
+  yAxis: {
+    min: 0,
+    max: 100,
+    lineWidth: 0,
+    tickPositions: [] as number[],
+  },
+  plotOptions: {
+    solidgauge: {
+      borderColor: colors.data_1,
+      borderWidth: 20,
+      color: colors.data_1,
+      radius: 90,
+      innerRadius: "90%",
+      y: -26,
+      dataLabels: {
+        borderWidth: 0,
+        color: colors.text_lt_default,
+        enabled: true,
+        format: '<span class="fix">{y:,f}</span>',
+        style: {
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.regular,
+          fontSize: typography.heading_2,
+        },
+        y: -26,
+      },
+    },
+  },
+  credits: { enabled: false }
+}
+
+export default gaugeTheme;

data/app/pb_kits/playbook/pb_icon/icon.test.js

@@ -16,7 +16,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_fw")
     })
 
     test("renders rotate prop", () => {[
@@ -31,7 +31,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass(`fa-user pb_icon_kit fa-fw fa-rotate-${rotateProp} far`)
+        expect(kit).toHaveClass(`pb_custom_icon svg-inline--fa rotate_${rotateProp} svg_fw`)
 
         cleanup()
     })
@@ -48,7 +48,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fa-flip-horizontal far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa flip_horizontal svg_fw")
     })
 
 
@@ -63,7 +63,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-spinner pb_icon_kit fa-fw fa-spin far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa spin svg_fw")
     })
 
     test("renders pull icon", () => {
@@ -77,7 +77,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_fw pull_left")
     })
 
     test("renders pull icon", () => {
@@ -91,7 +91,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_fw pull_left")
     })
 
     test("renders border around icon", () => {
@@ -105,7 +105,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-user pb_icon_kit fa-border fa-fw far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_border svg_fw")
     })
 
     test("renders size prop", () => {
@@ -132,7 +132,7 @@ describe("Icon Kit", () => {
             )
     
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass(`pb_icon_kit fa-user fa-fw fa-${sizeProp} far`)
+            expect(kit).toHaveClass(`pb_custom_icon svg-inline--fa svg_${sizeProp} svg_fw`)
 
             cleanup()
         }) 
@@ -149,7 +149,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fas")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_fw")
     })
 
     test("renders with color prop", () => {

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js

@@ -29,7 +29,7 @@ describe("IconCircle Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const icon = kit.querySelector('.pb_icon_kit')
+        const icon = kit.querySelector('.pb_custom_icon')
         expect(icon).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js

@@ -33,7 +33,7 @@ describe("IconStatValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const icon = kit.querySelector(".fa-lightbulb-on.pb_icon_kit.fa-fw")
+        const icon = kit.querySelector(".pb_custom_icon")
         expect(icon).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js

@@ -29,7 +29,7 @@ describe("IconValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const icon = kit.querySelector(".fa-clipboard.pb_icon_kit.fa-fw")
+        const icon = kit.querySelector(".pb_custom_icon")
         expect(icon).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_label_value/label_value.test.js

@@ -56,7 +56,7 @@ describe("LabelValue Kit", () => {
             />
         )
         const kit = screen.getByTestId(testId)
-        const icon = kit.querySelector(".fa-truck.pb_icon_kit.fa-fw")
+        const icon = kit.querySelector(".pb_custom_icon")
         expect(icon).toBeInTheDocument()
     })