playbook_ui 14.7.0.pre.alpha.revert3916revert3893PBNTR667railstypeaheadformintegration4523 → 14.7.0.pre.alpha.spacingquickchange4482

data/lib/playbook/forms/builder/typeahead_field.rb

@@ -5,19 +5,6 @@ module Playbook
     class Builder
       def typeahead(name, _options = {}, _html_options = {}, props: {})
         props[:name] = name
-
-        input_id = "#{name}_input"
-        props[:input_options] ||= {}
-        props[:input_options][:id] ||= input_id
-
-        props[:label] = @template.label(@object_name, name, for: props[:input_options][:id]) if props[:label] == true
-
-        if props[:validation]
-          validation_message = props[:validation][:message]
-          props[:input_options][:data] ||= {}
-          props[:input_options][:data][:validation_message] = validation_message
-        end
-
         @template.pb_rails("typeahead", props: props)
       end
     end

data/lib/playbook/hover.rb

@@ -50,7 +50,7 @@ module Playbook
         if responsive
           value.each do |key, val|
             if %i[background color].include?(key)
-              css += "#{prefix}_#{key}-#{val} " if hover_attributes.include?(key.to_s)
+              css += "#{prefix}_#{key}_#{val} " if hover_attributes.include?(key.to_s)
             elsif hover_attributes.include?(key.to_s) && send("hover_#{key}_values").include?(val.to_s)
               css += "#{prefix}_#{key}_#{val} "
             end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.7.0"
-  VERSION = "14.7.0.pre.alpha.revert3916revert3893PBNTR667railstypeaheadformintegration4523"
+  VERSION = "14.7.0.pre.alpha.spacingquickchange4482"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.7.0.pre.alpha.revert3916revert3893PBNTR667railstypeaheadformintegration4523
+  version: 14.7.0.pre.alpha.spacingquickchange4482
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-11-18 00:00:00.000000000 Z
+date: 2024-11-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -881,9 +881,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.md
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb
@@ -2785,9 +2782,6 @@ files:
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md
 - app/pb_kits/playbook/pb_timeline/docs/example.yml
 - app/pb_kits/playbook/pb_timeline/docs/index.js
 - app/pb_kits/playbook/pb_timeline/item.html.erb
@@ -3163,18 +3157,17 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js
 - app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js
 - app/pb_kits/playbook/utilities/test/globalProps/flexWrap.test.js
-- app/pb_kits/playbook/utilities/test/globalProps/hover.test.js
 - app/pb_kits/playbook/utilities/test/globalProps/justifyContent.test.js
 - app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js
 - app/pb_kits/playbook/utilities/test/globalProps/order.test.js
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-CA5rhmXa.js
-- dist/chunks/_weekday_stacked-9SqFhGPG.js
+- dist/chunks/_typeahead-DhLic2Fe.js
+- dist/chunks/_weekday_stacked-Mx8TYP5I.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-GRGYd9YR.js
-- dist/chunks/pb_form_validation-CS6rgdtE.js
+- dist/chunks/lib-D-mTv-kp.js
+- dist/chunks/pb_form_validation-BkWGwJsl.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.html.erb

@@ -1,42 +0,0 @@
-<%= pb_rails("date_picker", props: {
-  allow_input: true,
-  default_date: "This month",
-  end_date_id: "quick-pick-end-date",
-  end_date_name: "quick-pick-end-date",
-  mode: "range",
-  picker_id: "quick-pick-default-date",
-  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
-  selection_type: "quickpick",
-  start_date_id: "quick-pick-start-date",
-  start_date_name: "quick-pick-start-date"
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  allow_input: true,
-  custom_quick_pick_dates: {
-    dates: [
-      {
-        label: "Last 15 months",
-        value: {
-          timePeriod: "months",
-          amount: 15,
-        },
-      },
-      {
-        label: "First Week of June 2022",
-        value: ["06/01/2022", "06/07/2022"],
-      },
-    ],
-  },
-  default_date: "First Week of June 2022",
-  end_date_id: "quick-pick-end-date",
-  end_date_name: "quick-pick-end-date",
-  label: "Custom Date Picker",
-  mode: "range",
-  picker_id: "custom-quick-pick-default-date",
-  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
-  selection_type: "quickpick",
-  start_date_id: "quick-pick-start-date",
-  start_date_name: "quick-pick-start-date"
-}) %>
-

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.jsx

@@ -1,44 +0,0 @@
-import React from "react"
-import DatePicker from "../_date_picker"
-
-const DatePickerQuickPickDefaultDate = (props) => (
-    <>
-        <DatePicker
-            allowInput
-            defaultDate="This month"
-            mode="range"
-            pickerId="quick-pick-default-date"
-            placeholder="mm/dd/yyyy to mm/dd/yyyy"
-            selectionType="quickpick"
-            {...props}
-        />
-
-        <DatePicker
-            allowInput
-            customQuickPickDates={{
-                dates: [
-                    {
-                        label: "Last 15 months",
-                        value: {
-                            timePeriod: "months",
-                            amount: 15,
-                        },
-                    },
-                    {
-                        label: "First Week of June 2022",
-                        value: ["06/01/2022", "06/07/2022"],
-                    },
-                ],
-            }}
-            defaultDate="First Week of June 2022"
-            label="Custom Date Picker"
-            mode="range"
-            pickerId="custom-quick-pick-default-date"
-            placeholder="mm/dd/yyyy to mm/dd/yyyy"
-            selectionType="quickpick"
-            {...props}
-        />
-    </>
-)
-
-export default DatePickerQuickPickDefaultDate

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.md

@@ -1 +0,0 @@
-To set a default value using Quick Pick, use the `defaultDate` or `default_date` prop. This prop should match one of the labels displayed in the UI of the dropdown menu.

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb

@@ -1,94 +0,0 @@
-<%= pb_rails("flex", props: { justify: "evenly" }) do %>
-    <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "xs"}) do %>
-            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
-                <%= pb_rails("body", props: {
-                    text: "Conversation started",
-                    color: "light"
-                }) %>
-            <% end %>
-            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
-                <%= pb_rails("body", props: {
-                    text: "Trip #12422",
-                    color: "light"
-                }) %>
-            <% end %>
-            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
-                <%= pb_rails("body", props: {
-                    text: "Refund issue #12422",
-                    color: "light"
-                }) %>
-            <% end %>
-        <% end %>
-    <% end %>
-
-    <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "sm"}) do %>
-            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
-                <%= pb_rails("body", props: {
-                    text: "Conversation started",
-                    color: "light"
-                }) %>
-            <% end %>
-            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
-                <%= pb_rails("body", props: {
-                    text: "Trip #12422",
-                    color: "light"
-                }) %>
-            <% end %>
-            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
-                <%= pb_rails("body", props: {
-                    text: "Refund issue #12422",
-                    color: "light"
-                }) %>
-            <% end %>
-        <% end %>
-    <% end %>
-
-    <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "md"}) do %>
-            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
-                <%= pb_rails("body", props: {
-                    text: "Conversation started",
-                    color: "light"
-                }) %>
-            <% end %>
-            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
-                <%= pb_rails("body", props: {
-                    text: "Trip #12422",
-                    color: "light"
-                }) %>
-            <% end %>
-            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
-                <%= pb_rails("body", props: {
-                    text: "Refund issue #12422",
-                    color: "light"
-                }) %>
-            <% end %>
-        <% end %>
-    <% end %>
-
-    <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "lg"}) do %>
-            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
-                <%= pb_rails("body", props: {
-                    text: "Conversation started",
-                    color: "light"
-                }) %>
-            <% end %>
-            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
-                <%= pb_rails("body", props: {
-                    text: "Trip #12422",
-                    color: "light"
-                }) %>
-            <% end %>
-            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
-                <%= pb_rails("body", props: {
-                    text: "Refund issue #12422",
-                    color: "light"
-                }) %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>
-

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx

@@ -1,180 +0,0 @@
-import React from 'react'
-
-import Timeline from '../_timeline'
-import Flex from "../../pb_flex/_flex"
-import FlexItem from "../../pb_flex/_flex_item"
-import Body from '../../pb_body/_body'
-
-const TimelineWithGap = (props) => (
-  <div>
-    <Flex justify="evenly">
-    <FlexItem>
-        <Timeline
-            gap="xs"
-            orientation="vertical"
-        >
-          <Timeline.Item
-              icon="user"
-              iconColor="royal"
-              {...props}
-          >
-            <Body
-                color="light"
-                text="Conversation started"
-                {...props}
-            />
-          </Timeline.Item>
-          <Timeline.Item
-              icon="check"
-              iconColor="teal"
-              lineStyle="dotted"
-              {...props}
-          >
-            <Body
-                color="light"
-                text="Trip #12422"
-                {...props}
-            />
-          </Timeline.Item>
-          <Timeline.Item
-              icon="credit-card"
-              iconColor="red"
-              {...props}
-          >
-            <Body
-                color="light"
-                text="Refund issue #12422"
-                {...props}
-            />
-          </Timeline.Item>
-        </Timeline>
-      </FlexItem>
-      <FlexItem>
-        <Timeline
-            gap="sm"
-            orientation="vertical"
-        >
-          <Timeline.Item
-              icon="user"
-              iconColor="royal"
-              {...props}
-          >
-            <Body
-                color="light"
-                text="Conversation started"
-                {...props}
-            />
-          </Timeline.Item>
-          <Timeline.Item
-              icon="check"
-              iconColor="teal"
-              lineStyle="dotted"
-              {...props}
-          >
-            <Body
-                color="light"
-                text="Trip #12422"
-                {...props}
-            />
-          </Timeline.Item>
-          <Timeline.Item
-              icon="credit-card"
-              iconColor="red"
-              {...props}
-          >
-            <Body
-                color="light"
-                text="Refund issue #12422"
-                {...props}
-            />
-          </Timeline.Item>
-        </Timeline>
-      </FlexItem>
-      <FlexItem>
-        <Timeline
-            gap="md"
-            orientation="vertical"
-        >
-          <Timeline.Item
-              icon="user"
-              iconColor="royal"
-              {...props}
-          >
-            <Body
-                color="light"
-                text="Conversation started"
-                {...props}
-            />
-          </Timeline.Item>
-          <Timeline.Item
-              icon="check"
-              iconColor="teal"
-              lineStyle="dotted"
-              {...props}
-          >
-            <Body
-                color="light"
-                text="Trip #12422"
-                {...props}
-            />
-          </Timeline.Item>
-          <Timeline.Item
-              icon="credit-card"
-              iconColor="red"
-              lineStyle="dotted"
-              {...props}
-          >
-            <Body
-                color="light"
-                text="Refund issue #12422"
-                {...props}
-            />
-          </Timeline.Item>
-        </Timeline>
-      </FlexItem>
-      <FlexItem>
-        <Timeline
-            gap="lg"
-            orientation="vertical"
-        >
-          <Timeline.Item
-              icon="user"
-              iconColor="royal"
-              {...props}
-          >
-            <Body
-                color="light"
-                text="Conversation started"
-                {...props}
-            />
-          </Timeline.Item>
-          <Timeline.Item
-              icon="check"
-              iconColor="teal"
-              lineStyle="dotted"
-              {...props}
-          >
-            <Body
-                color="light"
-                text="Trip #12422"
-                {...props}
-            />
-          </Timeline.Item>
-          <Timeline.Item
-              icon="credit-card"
-              iconColor="red"
-              {...props}
-          >
-            <Body
-                color="light"
-                text="Refund issue #12422"
-                {...props}
-            />
-          </Timeline.Item>
-        </Timeline>
-      </FlexItem>
-    </Flex>
-  </div>
-)
-
-export default TimelineWithGap

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md

@@ -1 +0,0 @@
-Use the optional `gap` prop to render the timeline kit with adjusted spacing between nodes. The `gap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.

data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js

@@ -1,79 +0,0 @@
-import React from 'react';
-import { render, screen } from '../../test-utils';
-import Body from '../../../pb_body/_body';
-
-const testSubject = 'body';
-
-test('Hover Props: returns proper class name', () => {
-  const testIdColor = `${testSubject}-hover-color-red`;
-  render(
-    <Body
-        data={{ testid: testIdColor }}
-        hover={{ color: 'red' }}
-        text="Hi"
-    />
-  );
-
-  let kit = screen.getByTestId(testIdColor);
-  let expectedClassName = `hover_color-red`;
-  expect(kit).toHaveClass(expectedClassName);
-
-  const testIdBackground = `${testSubject}-hover-background-blue`;
-  render(
-    <Body
-        data={{ testid: testIdBackground }}
-        hover={{ background: 'blue' }}
-        text="Hi"
-    />
-  );
-
-  kit = screen.getByTestId(testIdBackground);
-  expectedClassName = `hover_background-blue`;
-  expect(kit).toHaveClass(expectedClassName);
-
-  const testIdShadow = `${testSubject}-hover-shadow-deep`;
-  render(
-    <Body
-        data={{ testid: testIdShadow }}
-        hover={{ shadow: 'deep' }}
-        text="Hi"
-    />
-  );
-
-  kit = screen.getByTestId(testIdShadow);
-  expectedClassName = `hover_shadow_deep`;
-  expect(kit).toHaveClass(expectedClassName);
-
-  const testIdScale = `${testSubject}-hover-scale`;
-  render(
-    <Body
-        data={{ testid: testIdScale }}
-        hover={{ scale: 'xl' }}
-        text="Test"
-    />
-  );
-
-  kit = screen.getByTestId(testIdScale);
-  expectedClassName = `hover_scale_xl`;
-  expect(kit).toHaveClass(expectedClassName);
-
-  const testIdMultiple = `${testSubject}-hover-multiple`;
-  render(
-    <Body
-        data={{ testid: testIdMultiple }}
-        hover={{
-        color: 'green',
-        background: 'error',
-        shadow: 'deeper',
-        scale: 'xl',
-      }}
-        text="Hi"
-    />
-  );
-
-  kit = screen.getByTestId(testIdMultiple);
-  expect(kit).toHaveClass('hover_color-green');
-  expect(kit).toHaveClass('hover_background-error');
-  expect(kit).toHaveClass('hover_shadow_deeper');
-  expect(kit).toHaveClass('hover_scale_xl');
-});