Allow Responsive Display Global Props (#1846)

* Added conditional to displayProps

* Added breakpoint query

* Removed commented out code

* Trying to display gloabl props

* Display global props

* Display breakpoints on rails

* Working on multiple screen sizes

* Display global props at multiple screen sizes

* Added Props pill back for display

* Separate base types

* Fix display.rb css output

* Global props work fro single display value

* Edited visual guidelines styling

* Fixed syntax for display.ts

* Switched display.ts syntax back

* Fixed syntax error this time

* Fix types and SCSS classes

* Add breakpoints grid to screen sizes

* Don't make changes to unassociated files

* All files should have one empty line at the end per code style rules

* Add colors type

Co-authored-by: Dion Theroulde <[email protected]>
Co-authored-by: Stephen Marshall <[email protected]>

playbook-website/app/views/pages/code_snippets/display_in_use_jsx.txt

@@ -1,4 +1,15 @@
-<Button display="flex">
-  Button Text
-<Button/>
+<Card display="flex">
+  Card content
+<Card/>
 
+<Card
+  display={
+    xs: "hidden",
+    sm: "flex",
+    md: "inline",
+    lg: "inline_block",
+    xl: "block"
+  }
+>
+  Card content
+<Card/>

playbook-website/app/views/pages/visual_guidelines_partials/_display.html.erb

@@ -1,29 +1,36 @@
-<%= pb_rails("title", props: { text: "Display", size: 1, margin_top: "xl", padding_top: "xl" }) %>
-<%= pb_rails("body", props: { tag: "p", margin_top: "xs", margin_bottom: "lg" }) do %>
-<% end %>
-<%= pb_rails("title", props: { text: "Global Props", tag: "h3", size: 4, margin_bottom: "xs" }) %> 
-<%= pb_rails("body", props: { text: "Available in every kit. These are added globally as they are most flexible when developing.", margin_bottom: "sm" }) %>
+<%= pb_rails("title", props: { text: "Display", size: 1, margin_bottom: "sm", margin_top: "xl", padding_top: "xl" }) %>
+<%= pb_rails("title", props: { text: "Global Props", tag: "h3", size: 4, margin_bottom: "xs" }) %>
+<%= pb_rails("body", props: { text: "Available in every kit. These are added globally as they are most flexible when developing.", margin_bottom: "sm", margin_top: "xs" }) %>
 <%= pb_rails("card", props: { shadow: "deep", margin_bottom: "sm", padding: "none" }) do %>
-    <%= pb_rails("flex", props: { vertical: "stretch", padding_x: "md", padding_top: "md", padding_bottom: "md" }) do %>
-      <%= pb_rails("flex/flex_item", props: { flex: "1" }) do %>
-        <%= pb_rails("caption", props: { text: "Props", margin_bottom: "sm" }) %>
-          <%= pb_rails("pill", props: { text: "display", variant: "neutral" }) %>
-      <% end %>
-      <%= pb_rails("section_separator", props: { orientation: "vertical", margin_x: "sm" }) %>
-      <%= pb_rails("flex/flex_item", props: { flex: "1" }) do %>
-        <%= pb_rails("caption", props: { text: "Values", margin_bottom: "sm" }) %>
-        <%= pb_rails("pill", props: { text: "block", variant: "warning" }) %>
-        <%= pb_rails("pill", props: { text: "inline_block", variant: "warning" }) %>
-        <%= pb_rails("pill", props: { text: "inline", variant: "warning" }) %>
-        <%= pb_rails("pill", props: { text: "flex", variant: "warning" }) %>
-        <%= pb_rails("pill", props: { text: "inline_flex", variant: "warning" }) %>
-        <%= pb_rails("pill", props: { text: "hidden", variant: "warning" }) %>
-      <% end %>
+  <%= pb_rails("flex", props: { vertical: "stretch", padding_x: "md", padding_top: "md", padding_bottom: "md" }) do %>
+    <%= pb_rails("flex/flex_item", props: { flex: "1"}) do %>
+      <%= pb_rails("caption", props: { text: "Props", margin_bottom: "sm" })%>
+      <%= pb_rails("pill", props: { text: "Display", variant: "neutral"})%>
+    <% end %>
+    <%= pb_rails("section_separator", props: { orientation: "vertical", margin_x: "sm" }) %>
+    <%= pb_rails("flex/flex_item", props: { flex: "1" }) do %>
+      <%= pb_rails("caption", props: { text: " Screen Sizes", margin_bottom: "sm" }) %>
+      <%= pb_rails("pill", props: { text: "xs", variant: "warning" }) %>
+      <%= pb_rails("pill", props: { text: "sm", variant: "warning" }) %>
+      <%= pb_rails("pill", props: { text: "md", variant: "warning" }) %>
+      <%= pb_rails("pill", props: { text: "lg", variant: "warning" }) %>
+      <%= pb_rails("pill", props: { text: "xl", variant: "warning" }) %>
     <% end %>
-    <%= pb_rails("background", props: { id: "code-wrapper", classname: "border-bottom", background_color: "dark", padding: "none" }) do %>
-      <%= pb_rails("caption", props: { text: "EXAMPLE IN USE", padding_top: "lg", margin_x: "xl", classname: "dark" }) %>
-      <div class="pb--codeCopy">
-        <pre class="highlight pt_sm" style="margin: 0px"><%= raw rouge(@display_in_use_code_example, "react") %></pre>
-      </div>
+    <%= pb_rails("section_separator", props: { orientation: "vertical", margin_x: "sm" }) %>
+    <%= pb_rails("flex/flex_item", props: { flex: "1" }) do %>
+      <%= pb_rails("caption", props: { text: "Values", margin_bottom: "sm" }) %>
+      <%= pb_rails("pill", props: { text: "inline", variant: "warning" }) %>
+      <%= pb_rails("pill", props: { text: "flex", variant: "warning" }) %>
+      <%= pb_rails("pill", props: { text: "inline_block", variant: "warning" }) %>
+      <%= pb_rails("pill", props: { text: "block", variant: "warning" }) %>
+      <%= pb_rails("pill", props: { text: "hidden", variant: "warning" }) %>
     <% end %>
-  <% end %>
+  <% end %>
+  <%= pb_rails("background", props: { id: "code-wrapper", classname: "border-bottom", background_color: "dark", padding: "none" }) do %>
+    <%= pb_rails("caption", props: { text: "EXAMPLE IN USE", padding_top: "lg", margin_x: "xl", classname: "dark" }) %>
+    <div class="pb--codeCopy">
+      <pre class="highlight pt_sm" style="margin: 0px"><%= raw rouge(@display_in_use_code_example, "react") %></pre>
+    </div>
+  <% end %>
+<% end %>
+<%= render "pages/visual_guidelines_partials/display_breakpoints"%>

playbook-website/app/views/pages/visual_guidelines_partials/_display_breakpoints.html.erb

@@ -0,0 +1,51 @@
+<%= pb_rails("title", props: { text: "Utility Classes", tag: "h3", size: 4, margin_bottom: "xs", padding_top: "xs" }) %>
+<%= pb_rails("body", props: { text: "Just want the raw classes? We got you. All of our global props are simple CSS utilities available through classes.", margin_bottom: "sm" }) %>
+<%= pb_rails("caption", props: { text: "Visual Guide", margin_bottom: "sm" }) %>
+<%= pb_rails("card", props: {
+  margin_bottom: "none",
+  padding: "none",
+  shadow: "deep"
+}) do %>
+  <%= pb_rails("table", props: { size: "sm" }) do %>
+    <thead>
+      <tr>
+        <th>Screen Size</th>
+        <th>@media screen</th>
+        <th>Class</th>
+        <th>Properties</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>xs</td>
+        <td>@media screen and (max-width: 575px)</td>
+        <td>.display_xs_hidden</td>
+        <td>display: hidden !important</td>
+      </tr>
+      <tr>
+        <td>sm</td>
+        <td>@media screen and (max-width: 576px)</td>
+        <td>.display_sm_block</td>
+        <td>display: block !important</td>
+      </tr>
+      <tr>
+        <td>md</td>
+        <td>@media screen and (max-width: 768px)</td>
+        <td>.display_md_inline_block</td>
+        <td>display: inline-block !important</td>
+      </tr>
+      <tr>
+        <td>lg</td>
+        <td>@media screen and (max-width: 992px)</td>
+        <td>.display_lg_inline</td>
+        <td>display: inline !important</td>
+      </tr>
+      <tr>
+        <td>xl</td>
+        <td>@media screen and (max-width: 1200px)</td>
+        <td>.display_xl_flex</td>
+        <td>display: flex !important</td>
+      </tr>
+    </tbody>
+  <% end %>
+<% end %>

playbook/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Image from '../pb_image/_image'
 import OnlineStatus from '../pb_online_status/_online_status'
@@ -18,14 +18,14 @@ type AvatarProps = {
   name: string,
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
   status: "away" | "offline" | "online",
-}
+} & GlobalProps
 
 const firstTwoInitials = (name: string) =>
   name.split(/\s/).map((name) => name[0])
     .join('')
     .substring(0, 2)
 
-const Avatar = (props: AvatarProps) => {
+const Avatar = (props: AvatarProps): React.ReactElement => {
   const {
     aria = {},
     className,

playbook/app/pb_kits/playbook/pb_body/_body.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Highlight from '../pb_highlight/_highlight'
 
@@ -20,7 +20,7 @@ type BodyProps = {
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
   variant: null | 'link',
-}
+} & GlobalProps
 
 const Body = (props: BodyProps): React.ReactElement => {
   const {
@@ -56,12 +56,12 @@ const Body = (props: BodyProps): React.ReactElement => {
         id={id}
     >
       { highlighting && (
-         <Highlight
-             highlightedText={highlightedText}
-             text={text}
-         >
-            {children}
-         </Highlight>
+        <Highlight
+            highlightedText={highlightedText}
+            text={text}
+        >
+          {children}
+        </Highlight>
       ) }
       { !highlighting && (
         text || children

playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -4,6 +4,7 @@
 @import "../tokens/colors";
 @import "../tokens/transition";
 @import "../tokens/animation-curves";
+@import "../tokens/display";
 
 $pb_card_border_width: 1px;
 $pb_card_border_radius: $border_rad_heavier;

playbook/app/pb_kits/playbook/pb_image/_image.tsx

@@ -16,7 +16,7 @@ type ImageType = {
   url?: string,
 } & GlobalProps
 
-const Image = (props: ImageType) => {
+const Image = (props: ImageType): React.ReactElement => {
   const {
     alt = '',
     aria = {},

playbook/app/pb_kits/playbook/tokens/_display.scss

@@ -0,0 +1,13 @@
+$display_inline: inline;
+$display_block: block;
+$display_inline_block: inline-block;
+$display_flex: flex;
+$display_none: none;
+$display_inline_flex: inline-flex;
+$displays: (
+  display_none:   $display_none,
+  display_flex: $display_flex,
+  display_inline: $display_inline,
+  display_inline_block: $display_inline_block,
+  display_block: $display_block
+);

playbook/app/pb_kits/playbook/tokens/_screen_sizes.scss

@@ -17,6 +17,26 @@ $breakpoints: (
   xl: $screen-xl-min
 );
 
+$breakpoints_grid: (
+    xs: (
+        max: $screen-xs-min
+    ),
+    sm: (
+        min: $screen-sm-min,
+        max: $screen-md-max
+    ),
+    md: (
+        min: $screen-md-min,
+        max: $screen-lg-max
+    ),
+    lg: (
+        min: $screen-lg-min,
+        max: $screen-xl-max
+    ),
+    xl: (
+        min: $screen-xl-min,
+    )
+);
 
 @function breakpoint($breakpoint_name) {
   @return map-get($breakpoints, $breakpoint_name);
@@ -28,3 +48,19 @@ $breakpoints: (
     @content;
   }
 }
+
+@mixin break_on($min: null, $max: null) {
+  @if not $max {
+    @media screen and (min-width: $min) {
+      @content;
+    }
+  } @else if not $min {
+    @media screen and (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @media screen and (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  }
+}

playbook/app/pb_kits/playbook/types/base.ts

@@ -0,0 +1,8 @@
+// Simple base types
+import { SyntheticEvent } from "react"
+
+export type Binary = 0 | 1
+export type Callback<T, K> = (arg: T) => K
+export type EmptyObject = Record<string, unknown>
+export type InputCallback<T> = Callback<SyntheticEvent<T>, void>
+export type Noop = () => void

playbook/app/pb_kits/playbook/types.ts → playbook/app/pb_kits/playbook/types/colors.ts

@@ -1,8 +1,3 @@
-import { SyntheticEvent } from "react"
-
-export type Callback<T, K> = (arg: T) => K
-export type InputCallback<T> = Callback<SyntheticEvent<T>, void>
-
 export type BackgroundColors = "white" | "dark" | "light"
 export type CategoryColors = "category_1" | "category_2" | "category_3" | "category_4" | "category_5" | "category_6" | "category_7" | "category_8" | "category_9" | "category_10" | "category_11" | "category_12" | "category_13" | "category_14" | "category_15" | "category_16" | "category_17" | "category_18" | "category_19" | "category_20" | "category_21"
 export type ProductColors = "windows" | "siding" | "doors" | "solar" | "roofing" | "gutters" | "insulation"

playbook/app/pb_kits/playbook/types/display.ts

@@ -0,0 +1,9 @@
+export type DisplayType = "none" | "flex" | "inline_flex" | "inline" | "inline_block" | "block"
+
+export type Display = {
+  display?: DisplayType,
+} | DisplaySizes
+
+export type DisplaySizes = {[key: string]: DisplayType | any}
+
+export type None = "none"

playbook/app/pb_kits/playbook/types/index.ts

@@ -0,0 +1,4 @@
+export * from './base'
+export * from './colors'
+export * from './display'
+export * from './sizes'

playbook/app/pb_kits/playbook/types/sizes.ts

@@ -0,0 +1 @@
+export type Sizes = "xxs" | "xs" | "sm" | "md" | "lg" | "xl"

playbook/app/pb_kits/playbook/utilities/_display.scss

@@ -1,3 +1,5 @@
+@import "../tokens/display";
+
 .display_block {
     display: block;
 }
@@ -18,6 +20,28 @@
     display: inline-flex;
 }
 
-.display_hidden {
+.display_none {
     display: none;
-}
+}
+
+$display_values: (
+    none: $display_none,
+    flex: $display_flex,
+    inline: $display_inline,
+    inline_block: $display_inline_block,
+    inline_flex: $display_inline_flex,
+    block: $display_block
+);
+
+// using a grid here
+@each $size, $size_value in $breakpoints_grid {
+    @each $display, $display_value in $display_values {
+        $min_size: map-get($size_value, "min");
+        $max_size: map-get($size_value, "max");
+        .display_#{$size}_#{$display} {
+          @include break_on($min_size, $max_size) {
+            display: #{$display_value} !important;
+          }
+        }
+    }
+}