playbook_ui 15.3.0 → 15.4.0.pre.alpha.PLAY1541responsivefloorPOC12370

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss

@@ -9,29 +9,20 @@ $pb_card_border_radius: $border_rad_heavier;
 
 // used to display dropdown on the left of the calender
 .quick-pick-drop-down {
-  width: auto;
-  display: grid;
+  width: 100%;
 }
 
 .quick-pick-ul {
-  padding: $space_xs 0px;
   margin: 0;
   list-style: none;
 }
 
 .nav-item {
   list-style: none;
-  border-radius: 6px;
-  border-bottom: 0;
-  margin: $space_xs $space_sm;
 }
 
 .nav-item-link {
   text-decoration: none;
-  border-width: $pb_card_border_width;
-  border-style: solid;
-  border-color: $border_light;
-  border-radius: $pb_card_border_radius;
   padding: $space_xs 14px;
   transition-property: color, background-color;
   transition-duration: 0.15s;
@@ -40,15 +31,21 @@ $pb_card_border_radius: $border_rad_heavier;
   color: $charcoal;
   font-size: $font_default;
   font-weight: $regular;
+  text-align: left;
+  border-bottom: 1px solid $border_light;
   &.active {
-    border-width: 2px;
-    border-color: $primary;
+    color: $white;
+    background-color: $primary;
+    &:hover {
+      background-color: $product_1_background;
+      color: $white;
+    }
   }
   @media (hover:hover) {
     &:hover {
       cursor: pointer;
-      box-shadow: $shadow-deep;
-      border-color: $slate;
+      background-color: $bg_light;
+      color: $primary;
     }
   }
 }
@@ -57,19 +54,3 @@ $pb_card_border_radius: $border_rad_heavier;
 .quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
   display: none;
 }
-
-@media only screen and (max-width: 767px) {
-  .quick-pick-ul {
-    padding: $space_xs $space_xs;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .nav-item {
-    margin: $space_xxs $space_xs;
-  }
-
-  .nav-item-link {
-    padding: $space_xs $space_xxs;
-  }
-}

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -19,6 +19,7 @@ type DateRangeInlineProps = {
   icon?: boolean;
   id?: string;
   size?: "sm" | "xs";
+  showCurrentYear?: boolean;
   startDate?: Date;
 };
 
@@ -45,6 +46,7 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
     icon = false,
     size = "sm",
     startDate,
+    showCurrentYear = false,
   } = props;
 
   const dateInCurrentYear = () => {
@@ -60,13 +62,10 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions);
   
   const renderTime = (date: Date) => {
+    const includeYear = showCurrentYear || !dateInCurrentYear();
     return (
       <time dateTime={dateTimeIso(date)}>
-        {dateInCurrentYear() ? (
-          ` ${dateTimestamp(date, false)} `
-        ) : (
-          ` ${dateTimestamp(date, true)} `
-        )}
+        {` ${dateTimestamp(date, includeYear)} `}
       </time>
     );
   };
@@ -83,7 +82,8 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             {icon && (
               <Caption 
                   dark={dark} 
-                  tag="span">
+                  tag="span"
+              >
                 <Icon
                     className="pb_date_range_inline_icon"
                     dark={dark}
@@ -96,12 +96,14 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             )}
             <Caption 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               {renderTime(startDate)}
             </Caption>
             <Caption 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               <Icon
                   className="pb_date_range_inline_arrow"
                   dark={dark}
@@ -112,7 +114,8 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             </Caption>
             <Caption 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               {renderTime(endDate)}
             </Caption>
           </>
@@ -124,7 +127,8 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
               <Body 
                   color={"light"} 
                   dark={dark}
-                  tag="span">
+                  tag="span"
+              >
                 <Icon
                     className="pb_date_range_inline_icon"
                     dark={dark}
@@ -137,13 +141,15 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             )}
             <Body 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               {renderTime(startDate)}
             </Body>
             <Body 
                 color={"light"} 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               <Icon
                   className="pb_date_range_inline_arrow"
                   dark={dark}
@@ -154,7 +160,8 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             </Body>
             <Body 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               {renderTime(endDate)}
             </Body>
           </>

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb

@@ -14,7 +14,8 @@ module Playbook
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"
-
+      prop :show_current_year, type: Playbook::Props::Boolean,
+                               default: false
       def classname
         generate_classname("pb_date_range_inline_kit", dark_class, align)
       end
@@ -38,11 +39,12 @@ module Playbook
       end
 
       def time_display(time)
+        include_year = show_current_year || !dates_in_current_year?
         content_tag(:time, datetime: time.to_iso) do
-          if dates_in_current_year?
-            "#{time.to_month_downcase} #{time.to_day}"
-          else
+          if include_year
             "#{time.to_month_downcase} #{time.to_day}, #{time.to_year}"
+          else
+            "#{time.to_month_downcase} #{time.to_day}"
           end
         end
       end

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js

@@ -111,6 +111,23 @@ describe("DateRangeInline Kit", () => {
         const text = kit.querySelector('.pb_caption_kit_md:first-child')
         expect(text.textContent).toEqual(" Jan 15 ")
     })
+
+    test("renders DateRangeInline with year when showCurrentYear is true", () => {
+        const currentYear = new Date().getFullYear()
+        render(
+            <DateRangeInline
+                data={{ testid: testId }}
+                endDate={new Date((`15 Aug ${currentYear}`))}
+                showCurrentYear
+                size="xs"
+                startDate={new Date(`15 Jan ${currentYear}`)}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector('.pb_caption_kit_md:first-child')
+        expect(text.textContent).toEqual(` Jan 15, ${currentYear} `)
+    })
     
 
 })

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), size: "xs", show_current_year: true }) %>
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), show_current_year: true }) %>
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), align: "center", icon: true, size: "xs", show_current_year: true }) %>
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), align: "center", icon: true, show_current_year: true }) %>

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import DateRangeInline from '../_date_range_inline'
+
+const DateRangeInlineShowCurrentYear = (props) => {
+  return (
+    <div>
+      <DateRangeInline
+          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
+          showCurrentYear
+          size="xs"
+          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
+          {...props}
+      />
+      <DateRangeInline
+          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
+          showCurrentYear
+          size="sm"
+          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
+          {...props}
+      />
+      <DateRangeInline
+          align="center"
+          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
+          icon
+          showCurrentYear
+          size="xs"
+          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
+          {...props}
+      />
+      <DateRangeInline
+          align="center"
+          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
+          icon
+          showCurrentYear
+          size="sm"
+          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DateRangeInlineShowCurrentYear

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.md

@@ -0,0 +1 @@
+By default, the Date Range Inline kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here. 

data/app/pb_kits/playbook/pb_date_range_inline/docs/_description.md

@@ -1 +1 @@
-Use to display a date range. Year will not show if it is the current year.
+Use to display a date range.

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

@@ -2,11 +2,12 @@ examples:
   
   rails:
   - date_range_inline_default: Default
-  
+  - date_range_inline_show_current_year: Show Current Year
   
   react:
   - date_range_inline_default: Default
-
+  - date_range_inline_show_current_year: Show Current Year
+  
   swift:
   - date_range_inline_default_swift: Default
   - date_range_inline_props_swift: ""

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

@@ -1 +1,2 @@
 export { default as DateRangeInlineDefault } from './_date_range_inline_default.jsx'
+export { default as DateRangeInlineShowCurrentYear } from './_date_range_inline_show_current_year.jsx'

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -19,6 +19,7 @@ type DateStackedProps = {
   size?: "sm" | "md";
   id?: string;
   reverse?: boolean;
+  showCurrentYear?: boolean;
 };
 
 const sizes: {sm: 4, md: 3} = {
@@ -37,6 +38,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
     data={},
     htmlOptions={},
     size = "sm",
+    showCurrentYear = false,
   } = props;
   const classes = classnames(
     buildCss("pb_date_stacked_kit", align, size, {
@@ -55,7 +57,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
   return (
     <>
       {bold == false ? (
-        <div 
+        <div
             {...dataProps}
             {...htmlProps}
             className={classes}
@@ -68,10 +70,10 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
                 text={DateTime.toDay(date).toString()}
             />
           </div>
-          {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
+          {(currentYear != inputYear || showCurrentYear) && <Caption size="xs">{inputYear}</Caption>}
         </div>
       ) : (
-          <div 
+          <div
               {...dataProps}
               {...htmlProps}
               className={classes}
@@ -89,7 +91,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
                   size="4"
                   text={DateTime.toDay(date).toString()}
               />
-              {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
+              {(currentYear != inputYear || showCurrentYear) && <Title size="4">{inputYear}</Title>}
             </div>
           </div>
       )}

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb

@@ -4,16 +4,15 @@
 
       <div class="pb_date_stacked_day_month">
         <%= pb_rails("caption", props: { text: object.month }) %>
-        <%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %><% end %>
+        <%= pb_rails("title", props: { text: object.day , size: object.title_size }) %>
         <%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
       </div>
 
     <% else %>
       <div class="pb_date_stacked_day_month">
         <%= pb_rails("title", props: { text: object.month, size: 4 }) %>
-        <%= pb_rails("title", props: { text: object.day, size: 4 }) do %><% end %>
+        <%= pb_rails("title", props: { text: object.day, size: 4 }) %>
         <%= pb_rails("title", props: { text: object.year, size:4 }) %>
-
       </div>
 
     <% end %>

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb

@@ -16,6 +16,8 @@ module Playbook
                   default: false
       prop :bold, type: Playbook::Props::Boolean,
                   default: false
+      prop :show_current_year, type: Playbook::Props::Boolean,
+                               default: false
 
       def classname
         generate_classname("pb_date_stacked_kit", align, size, reverse_class, dark_class)
@@ -37,11 +39,15 @@ module Playbook
       end
 
       def year
-        current_year = DateTime.now.year.to_i
-        year = Playbook::PbKit::PbDateTime.new(date).to_year.to_i
-        if current_year != year
-          content_tag(:time, datetime: year) do
-            year.to_s
+        if show_current_year
+          Playbook::PbKit::PbDateTime.new(date).to_year.to_s
+        else
+          current_year = DateTime.now.year.to_i
+          year = Playbook::PbKit::PbDateTime.new(date).to_year.to_i
+          if current_year != year
+            content_tag(:time, datetime: year) do
+              year.to_s
+            end
           end
         end
       end

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js

@@ -22,7 +22,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={new Date()}
-                size="sm"      
+                size="sm"
             />
         )
 
@@ -36,7 +36,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={new Date()}
-                size="sm"      
+                size="sm"
             />
         )
 
@@ -51,7 +51,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={new Date()}
-                size="sm"      
+                size="sm"
             />
         )
 
@@ -66,7 +66,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={new Date()}
-                size="md"      
+                size="md"
             />
         )
 
@@ -80,7 +80,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={futureDate}
-                size="sm"      
+                size="sm"
             />
         )
 
@@ -89,6 +89,23 @@ describe("DateStacked Kit", () => {
         expect(text.textContent).toEqual("2016")
     })
 
+    test("renders current year when showCurrentYear is true", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={new Date()}
+                showCurrentYear
+                size="sm"
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_caption_kit_xs")
+        const currentYear = new Date().getFullYear()
+        expect(text.textContent).toEqual(`${currentYear}`)
+    })
+
     test("renders correct className when order reversed", () => {
         render(
             <DateStacked
@@ -96,7 +113,7 @@ describe("DateStacked Kit", () => {
                 data={{ testid: testId }}
                 date={futureDate}
                 reverse
-                size="sm"      
+                size="sm"
             />
         )
         const kit = screen.getByTestId(testId)
@@ -110,7 +127,7 @@ describe("DateStacked Kit", () => {
                 bold
                 data={{ testid: testId }}
                 date={futureDate}
-                size="md"      
+                size="md"
             />
         )
 
@@ -125,7 +142,7 @@ describe("DateStacked Kit", () => {
                 align="center"
                 data={{ testid: testId }}
                 date={futureDate}
-                size="md"      
+                size="md"
             />
         )
 
@@ -139,7 +156,7 @@ describe("DateStacked Kit", () => {
                 align="right"
                 data={{ testid: testId }}
                 date={futureDate}
-                size="md"      
+                size="md"
             />
         )
 

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("date_stacked", props: {
+  date: DateTime.now,
+  show_current_year: true
+}) %>
+
+<br>
+
+<%= pb_rails("date_stacked", props: {
+  date: DateTime.now,
+  show_current_year: true,
+  size: "md"
+}) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/{_date_stacked_not_current_year.jsx → _date_stacked_current_year.jsx}

@@ -1,12 +1,13 @@
 import React from 'react'
 import DateStacked from '../_date_stacked'
 
-const DateStackedNotCurrentYear = (props) => {
+const DateStackedCurrentYear = (props) => {
   return (
     <div>
 
       <DateStacked
-          date={new Date('20 Mar 2018')}
+          date={new Date()}
+          showCurrentYear
           size="sm"
           {...props}
       />
@@ -14,13 +15,13 @@ const DateStackedNotCurrentYear = (props) => {
       <br />
 
       <DateStacked
-          date={new Date('20 Mar 2018')}
+          date={new Date()}
+          showCurrentYear
           size="md"
           {...props}
       />
-
     </div>
   )
 }
 
-export default DateStackedNotCurrentYear
+export default DateStackedCurrentYear

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.md

@@ -0,0 +1 @@
+By default, the Date Stacked kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here.

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb

@@ -2,4 +2,4 @@
 
 <br>
 
-<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md"}) %>
+<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), size: "md"}) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx

@@ -15,7 +15,7 @@ const DateStackedDefault = (props) => {
       <br />
 
       <DateStacked
-          date={new Date()}
+          date={new Date('20 Mar 2018')}
           size="md"
           {...props}
       />

data/app/pb_kits/playbook/pb_date_stacked/docs/_description.md

@@ -1 +1 @@
-Use to display the date, stacking month and day. Year will not show if it is the current year.
+Use to display the date, stacking month and day.

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

@@ -2,7 +2,7 @@ examples:
 
   rails:
   - date_stacked_default: Default
-  - date_stacked_not_current_year: Not Current Year
+  - date_stacked_current_year: Show Current Year
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
@@ -11,7 +11,7 @@ examples:
 
   react:
   - date_stacked_default: Default
-  - date_stacked_not_current_year: Not Current Year
+  - date_stacked_current_year: Show Current Year
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_bold: Bold

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

@@ -1,6 +1,6 @@
 export { default as DateStackedBold } from './_date_stacked_bold.jsx'
 export { default as DateStackedDefault } from './_date_stacked_default.jsx'
-export { default as DateStackedNotCurrentYear } from './_date_stacked_not_current_year.jsx'
+export { default as DateStackedCurrentYear } from './_date_stacked_current_year.jsx'
 export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'
 export { default as DateStackedSizes } from './_date_stacked_sizes.jsx'
 export { default as DateStackedAlign } from './_date_stacked_align.jsx'

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,7 +1,7 @@
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
-  <form>
+  <%= pb_form_with(scope: :example, method: :get, url: "", options: { remote: true }) do |form| %>
     <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
         <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
     <% end %>
@@ -13,5 +13,5 @@
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
-  </form>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md

@@ -1 +1 @@
-You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.
+You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/token/colors) for reference.

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -12,6 +12,7 @@
 
 .pb_dropdown_default,
 .pb_dropdown_subtle,
+.pb_dropdown_quickpick,
 .pb_dropdown_default_separators_hidden,
 .pb_dropdown_subtle_separators_hidden {
   .dropdown_wrapper {