playbook_ui 10.14.1.pre.alpha2 → 10.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 289033a3783ec2df05eadf3e37ebbdc51513cb443bfc9c351349683eabf4f921
-  data.tar.gz: 662e3efbd7f8e4f79dfa591312f94dab94087a53b17b72bc222a3d4dee14142f
+  metadata.gz: faae90de5528b9f023fd6824aa39c518ce892c36c60a212e5e4f7638d56f84ce
+  data.tar.gz: bbd980bc0d205b346fa150aced925e080c8ac8d3239e5edbccb4d3c9c3d6f556
 SHA512:
-  metadata.gz: 77c23b93648b94eb00c22c8f6cc09271bdffc36119c052aec8e73d562e3470f1aa2732f2de572e2859433877fb6c561f81eb3253849d29bfa6a3d04a7799293d
-  data.tar.gz: 4d6b8d0534a90029125d2adf562097364ce74de7b6178a4fc1e8243187ae808b3d63f33ccd15e3ccaac9099a45bf6d1eae0b80659a8d7a2747029c7b392a17a2
+  metadata.gz: 7df412eddb0717bb3166971a857cbc47df4d14f487eb34939e0e1a8e230dd95b101e19481b4eed793c5a5c01be6a65fdb1b57c7df288b65606a44c94c0f0ee92
+  data.tar.gz: 5b2dd670d04f69b59c7d6150b94dbfe547d7ef9ac39e7973489463de9759c8a81aa23af5a0e0867a85fd20ae2eedb3b60cbdf2a5370b8a470d5d35fed2c6bc91

data/app/pb_kits/playbook/pb_background/_background.jsx

@@ -7,7 +7,7 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type BackgroundProps = {
   aria?: object,
-  backgroundColor?: 'gradient' | 'dark' | 'light' | 'white',
+  backgroundColor?: 'gradient' | 'dark' | 'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | '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',
   children?: array<React.ReactNode> | React.ReactNode,
   className?: string,
   data?: object,

data/app/pb_kits/playbook/pb_background/_background.scss

@@ -1,12 +1,15 @@
 @import "../tokens/colors";
 
-$background_colors: (
+$additional_colors: (
   "gradient": linear-gradient(135deg, $gradient_start 0%, $gradient_end 100%),
   "dark": $bg_dark,
   "light": $bg_light,
   "white": $white,
 );
 
+$merge_kits1: map-merge($status_colors, $category_colors);
+$merge_kits2: map-merge($merge_kits1, $product_colors);
+$background_colors: map-merge($additional_colors, $merge_kits2);
 
 [class^=pb_background_kit] {
   max-width: 100%;

data/app/pb_kits/playbook/pb_background/background.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbBackground
     class Background < Playbook::KitBase
       prop :background_color, type: Playbook::Props::Enum,
-                              values: %w[gradient dark light white],
+                              values: %w[gradient dark light white success warning error info neutral primary 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],
                               default: "light"
       prop :image_url
 

data/app/pb_kits/playbook/pb_background/docs/_background_category.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("flex", props: {gap: "md", justify: "center", wrap: true}) do %>
+  <%= pb_rails("background", props: { background_color: "category_1", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_2", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_3", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_4", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_5", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_6", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_7", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_8", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_9", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_10", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_11", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_12", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_13", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_14", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_15", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_16", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_17", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_18", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_19", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_20", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_21", padding: "xl" }) do %> <% end %>
+<%end%>

data/app/pb_kits/playbook/pb_background/docs/_background_category.jsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import { Background } from '../..'
+import { Flex } from '../..'
+
+const BackgroundCategory = (props) => (
+  <Flex
+      gap="md"
+      justify="center"
+      wrap
+  >
+    <Background
+        backgroundColor="category_1"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_2"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_3"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_4"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_5"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_6"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_7"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_8"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_9"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_10"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_11"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_12"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_13"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_14"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_15"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_16"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_17"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_18"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_19"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_20"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_21"
+        padding="xl"
+        {...props}
+    />
+  </Flex>
+)
+
+export default BackgroundCategory

data/app/pb_kits/playbook/pb_background/docs/_background_category.md

@@ -0,0 +1 @@
+Category colors can be passed into the background kit. Values `category_1` to `category_21` are accepted. List of all category and status colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_background/docs/_background_status.html.erb

@@ -0,0 +1,13 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("background", props: { background_color: "success", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "warning", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "error", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "info", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "neutral", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "primary", padding: "xl" }) do %> <% end %>
+</div>

data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Background } from '../..'
+
+const BackgroundStatus = (props) => (
+  <div className="pb--doc-demo-row">
+    <Background
+        backgroundColor="success"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="warning"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="error"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="info"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="neutral"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="primary"
+        padding="xl"
+        {...props}
+    />
+  </div>
+)
+
+export default BackgroundStatus

data/app/pb_kits/playbook/pb_background/docs/_background_status.md

@@ -0,0 +1 @@
+Status colors can be passed into the background kit. `success`, `warning`, `error`, `info`, `neutral`, and `primary`

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

@@ -1 +1 @@
-The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the `background_color` prop to assign its color. The colors that you can choose from for the `background_color` prop are: gradient, dark, light, and white.
+The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the `background_color` prop to assign its color. The colors that you can choose from for the `background_color` prop are: gradient, dark, light, white, status colors, product colors, and category colors.

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

@@ -5,9 +5,13 @@ examples:
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image
+  - background_status: Status
+  - background_category: Category
 
   react:
   - background_light: Light
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image
+  - background_status: Status
+  - background_category: Category

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

@@ -2,4 +2,5 @@ export { default as BackgroundLight } from './_background_light.jsx'
 export { default as BackgroundWhite } from './_background_white.jsx'
 export { default as BackgroundGradient } from './_background_gradient.jsx'
 export { default as BackgroundImage } from './_background_image.jsx'
-
+export { default as BackgroundStatus } from './_background_status.jsx'
+export { default as BackgroundCategory } from './_background_category.jsx'

data/app/pb_kits/playbook/pb_card/_card.jsx

@@ -8,7 +8,7 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type CardPropTypes = {
   aria?: object,
-  background?: "white" | "dark" | "light" | "windows" | "siding" | "doors" | "solar" | "roofing" | "gutters" | "insulation",
+  background?: "white" | "dark" | "light" | "windows" | "siding" | "doors" | "solar" | "roofing" | "gutters" | "insulation" | "none",
   borderNone?: boolean,
   borderRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "rounded",
   children: array<React.ReactNode> | React.ReactNode,
@@ -67,7 +67,7 @@ const Body = (props: CardBodyProps) => {
 const Card = (props: CardPropTypes) => {
   const {
     aria = {},
-    background = 'white',
+    background = 'none',
     borderNone = false,
     borderRadius = 'md',
     children,
@@ -80,10 +80,9 @@ const Card = (props: CardPropTypes) => {
     padding = 'md',
   } = props
   const borderCSS = borderNone == true ? 'border_none' : ''
-  const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, `${borderCSS}`, `border_radius_${borderRadius}`, {
-    selected,
-    deselected: !selected,
-    [`background_${background}`]: background,
+  const selectedCSS = selected == true ? 'selected' : 'deselected'
+  const backgroundCSS = background == 'none' ? '' : `background_${background}`
+  const cardCss = buildCss('pb_card_kit', selectedCSS, `shadow_${shadow}`, borderCSS, `border_radius_${borderRadius}`, backgroundCSS, {
     [`highlight_${highlight.position}`]: highlight.position,
     [`highlight_${highlight.color}`]: highlight.color,
   })

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

@@ -23,6 +23,7 @@ $additional_colors: (
   "dark": $bg_dark,
   "light": $bg_light,
   "white": $white,
+  "none": none,
 );
 $background_colors: map-merge($product_colors, $additional_colors);
 
@@ -49,10 +50,11 @@ $background_colors: map-merge($product_colors, $additional_colors);
   transition-property: all;
   transition-duration: $transition_short;
   transition-timing-function: $easeIn;
+  background-color: $white;
 
   @each $name, $color in $background_colors {
     &[class*=background_#{$name}] {
-      background: $color;
+      background-color: $color;
     }
   };
 
@@ -72,6 +74,8 @@ $background_colors: map-merge($product_colors, $additional_colors);
 @mixin pb_card_dark {
   color: $white;
   @include pb_card($card_dark, $border_dark);
+  background-color: $card_dark;
+  border-color: $border_dark;
 }
 
 @mixin pb_card_highlight($width, $height, $background){

data/app/pb_kits/playbook/pb_card/card.rb

@@ -18,18 +18,18 @@ module Playbook
                            values: %w[xs sm md lg xl none rounded],
                            default: "md"
       prop :background, type: Playbook::Props::Enum,
-                        values: %w[white light dark windows siding doors solar roofing gutters insulation],
-                        default: "white"
+                        values: %w[white light dark windows siding doors solar roofing gutters insulation none],
+                        default: "none"
 
       def classname
         generate_classname("pb_card_kit",
                            selected_class,
                            shadow_class,
-                           highlight_position_class,
-                           highlight_color_class,
-                           background_class,
                            border_class,
-                           border_radius_class)
+                           border_radius_class,
+                           background_class,
+                           highlight_position_class,
+                           highlight_color_class)
       end
 
       def body_padding
@@ -59,7 +59,7 @@ module Playbook
       end
 
       def background_class
-        background.present? ? "background_#{background}" : "background_white"
+        background == "none" ? nil : "background_#{background}"
       end
 
       def border_class

data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb

@@ -19,7 +19,7 @@
 
 <br>
 
-<%= pb_rails("card", props: { background: "light" })  do %>
+<%= pb_rails("card", props: { background: "light"})  do %>
   <%= pb_rails("body", props: {
   text: "Light"
 }) %>
@@ -54,4 +54,4 @@
 }) %>
 <% end %>
 
-<br>
+<br>

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx

@@ -32,7 +32,6 @@ const CardBackground = (props) => {
       <Card>
         <Body
             text="White"
-            {...props}
         />
       </Card>
 
@@ -44,7 +43,6 @@ const CardBackground = (props) => {
       >
         <Body
             text="Light"
-            {...props}
         />
       </Card>
 

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -67,6 +67,7 @@
 	$opacity_hidden: 0;
 
 	@include pb_card;
+	background-color: $white;
 	box-shadow: $shadow_deepest;
 	border: 0;
 	max-height: calc(100vh - #{$gutter * 2});

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

@@ -1,7 +1 @@
 This kit is used to build most of the complex interfaces. The Flex Kit is used the same way flex box is used.
-
-##### !!!Attention these props will be deprecated in the future please use new props in their place
-
-* `horizontal` - Will be replaced with `justify` 
-* `vertical` - Will be replaced with `align` 
-* `spacing` - Will be removed. Use `justify` 

data/app/pb_kits/playbook/pb_flex/docs/_flex_align.md

@@ -1,7 +1,3 @@
 ##### Prop
 
-*ATTENTION* - the vertical prop will be deprecated & renamed in the future. 
-
-* **Deprecated Prop**: `vertical` | **Type**: String | **Values**: top | center | bottom | stretch | baseline | none
-
-* **New Prop**: `align` | **Type**: String | **Values**: start | center | end | stretch | baseline | none
+`align` | **Type**: String | **Values**: start | center | end | stretch | baseline | none

data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.md

@@ -1,7 +1,3 @@
 ##### Prop
 
-*ATTENTION* - the horizontal prop will be deprecated & renamed in the future. 
-
-* **Deprecated Prop**: `horizontal` | **Type**: String | **Values**: left | center | right | stretch | none
-
-* **New Prop**: `justify` | **Type**: String | **Values**: start | center | end | | none
+`justify` | **Type**: String | **Values**: start | center | end | | none

data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.md

@@ -1,7 +1,3 @@
 ##### Prop
 
-*ATTENTION* - the spacing prop will be deprecated & renamed in the future. 
-
-* **Deprecated Prop**: `spacing` | **Type**: String | **Values**: none | around | evenly | between 
-
-* **New Prop**: `justify` | **Type**: String | **Values**: none | around | evenly | between
+`justify` | **Type**: String | **Values**: none | around | evenly | between

data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx

@@ -15,6 +15,7 @@ type FormPillProps = {
   avatar?: boolean,
   avatarUrl?: string,
   size?: string,
+  textTransform?: "none" | "lowercase",
   closeProps?: {
     onClick?: EventHandler,
     onMouseDown?: EventHandler,
@@ -30,12 +31,14 @@ const FormPill = (props: FormPillProps) => {
     avatarUrl,
     closeProps = {},
     size = '',
+    textTransform = 'none',
   } = props
   const css = classnames(
     `pb_form_pill_kit_${'primary'}`,
     globalProps(props),
     className,
     size === 'small' ? 'small' : null,
+    textTransform,
   )
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -70,4 +70,11 @@ $form_pill_colors: (
       &::before { line-height: 21px; }
     }
   }
+  &[class*=lowercase] {
+    text-transform: lowercase;
+  }
+
+  &[class*=none] {
+    text-transform: none;
+  }
 }

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("form_pill", props: { text_transform: "lowercase" , text: "THIS IS A TAG" }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import FormPill from '../_form_pill.jsx'
+
+const FormPillExample = (props) => {
+  return (
+    <div>
+      <FormPill
+          onClick={() => alert('Click!')}
+          text="THIS IS A TAG"
+          textTransform="lowercase"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default FormPillExample

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.md

@@ -0,0 +1 @@
+By default `textTransform = "none"`.  If there is a need to enforce `lowercase`, please pass the `textTransform = "lowercase` prop.

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb

@@ -1,4 +1 @@
-<%= pb_rails("form_pill", props: {
-   text: "this is a tag"
-
-   }) %>
+<%= pb_rails("form_pill", props: { text: "this is a tag" }) %>

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

@@ -4,9 +4,11 @@ examples:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
+  - form_pill_example: Example
 
 
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
+  - form_pill_example: Example

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

@@ -1,3 +1,5 @@
 export { default as FormPillUser } from './_form_pill_user.jsx'
 export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'
+export { default as FormPillExample } from './_form_pill_example.jsx'
+

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,19 +1,12 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname + object.size_class) do %>
-    <% if object.name.present? %>
-      <%= pb_rails("avatar", props: {
-        name: object.name,
-        image_url: object.avatar_url,
-        size: "xs"
-      }) %>
+<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class) do %>
+  <% if object.name.present? %>
+    <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
       <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
-    <% elsif object.text.present? %>
-      <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
-    <% end %>
+        <% elsif object.text.present? %>
+          <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
+            <% end %>
 
-    <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
-      <%= pb_rails("icon", props: { icon: 'times', fixed_width: true }) %>
-    <% end %>
-<% end %>
+              <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
+                <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
+                  <% end %>
+                    <% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -8,12 +8,16 @@ module Playbook
       prop :text
       prop :size
 
+      prop :text_transform, type: Playbook::Props::Enum,
+                            values: %w[none lowercase],
+                            default: "none"
+
       def classname
-        generate_classname("pb_form_pill_kit", "primary", name, text)
+        generate_classname("pb_form_pill_kit", "primary", name, text, text_transform)
       end
 
       def display_text
-        name.downcase
+        object.text
       end
 
       def size_class

data/app/pb_kits/playbook/pb_pill/_pill.jsx

@@ -14,6 +14,7 @@ type PillProps = {
   id?: string,
   text: string,
   variant?: "success" | "warning" | "error" | "info" | "neutral",
+  textTransform?: "none" | "lowercase"
 }
 
 const Pill = (props: PillProps) => {
@@ -24,11 +25,12 @@ const Pill = (props: PillProps) => {
     id,
     text,
     variant = 'neutral',
+    textTransform = 'lowercase',
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_pill_kit', variant), globalProps(props), className)
+  const classes = classnames(buildCss('pb_pill_kit', variant, textTransform), globalProps(props), className)
 
   return (
     <div

data/app/pb_kits/playbook/pb_pill/_pill.scss

@@ -14,6 +14,14 @@ $pb_pill_height: 22px;
   border-radius: $pb_pill_height/2;
   white-space: nowrap;
 
+  &[class*=lowercase] {
+    text-transform: lowercase;
+  }
+
+  &[class*=none] {
+    text-transform: none;
+  }
+
   @each $color_name, $color_value in $status_color_text {
     &[class*=_#{$color_name}]  {
         background: rgba($color_value, $opacity-1);

data/app/pb_kits/playbook/pb_pill/docs/_pill_default.html.erb

@@ -1,45 +1 @@
-<%= pb_rails("pill", props: {
-  text: "Default"
-}) %>
-
-<br><br>
-
-<%= pb_rails("pill", props: {
-  text: "success",
-  variant: "success"
-}) %>
-
-<br><br>
-
-<%= pb_rails("pill", props: {
-  text: "error",
-  variant: "error"
-}) %>
-
-<br><br>
-
-<%= pb_rails("pill", props: {
-  text: "warning",
-  variant: "warning"
-}) %>
-
-<br><br>
-
-<%= pb_rails("pill", props: {
-  text: "info",
-  variant: "info"
-}) %>
-
-<br><br>
-
-<%= pb_rails("pill", props: {
-  text: "neutral",
-  variant: "neutral"
-}) %>
-
-<br><br>
-
-<%= pb_rails("pill", props: {
-  text: "primary",
-  variant: "primary"
-}) %>
+<%= pb_rails("pill", props: { text: "Default" }) %>

data/app/pb_kits/playbook/pb_pill/docs/_pill_default.jsx

@@ -1,57 +1,12 @@
 import React from 'react'
 import Pill from '../_pill.jsx'
 
-const PillDefault = () => {
+const PillDefault = (props) => {
   return (
     <div>
-      <Pill text="default" />
-
-      <br />
-      <br />
-
-      <Pill
-          text="success"
-          variant="success"
-      />
-
-      <br />
-      <br />
-
-      <Pill
-          text="error"
-          variant="error"
-      />
-
-      <br />
-      <br />
-
-      <Pill
-          text="warning"
-          variant="warning"
-      />
-
-      <br />
-      <br />
-
-      <Pill
-          text="info"
-          variant="info"
-      />
-
-      <br />
-      <br />
-
-      <Pill
-          text="neutral"
-          variant="neutral"
-      />
-
-      <br />
-      <br />
-
       <Pill
-          text="primary"
-          variant="primary"
+          text="default"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_pill/docs/_pill_example.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("pill", props: { text_transform: "none" , text: "Success" , variant: "success" }) %>

data/app/pb_kits/playbook/pb_pill/docs/_pill_example.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Pill from '../_pill'
+
+const PillExample = (props) => {
+  return (
+    <div>
+      <Pill
+          text="Success"
+          textTransform="none"
+          variant="success"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default PillExample

data/app/pb_kits/playbook/pb_pill/docs/_pill_example.md

@@ -0,0 +1 @@
+Pass `textTransform = "none"` prop and the text will remain without modification.

data/app/pb_kits/playbook/pb_pill/docs/_pill_variants.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("pill", props: { text: "success" , variant: "success" }) %>
+<%= pb_rails("pill", props: { text: "error" , variant: "error" }) %>
+<%= pb_rails("pill", props: { text: "warning" , variant: "warning" }) %>
+<%= pb_rails("pill", props: { text: "info" , variant: "info" }) %>
+<%= pb_rails("pill", props: { text: "neutral" , variant: "neutral" }) %>
+<%= pb_rails("pill", props: { text: "primary" , variant: "primary" }) %>

data/app/pb_kits/playbook/pb_pill/docs/_pill_variants.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import Pill from '../_pill.jsx'
+
+const PillVariants = (props) => {
+  return (
+    <div>
+      <Pill
+          text="success"
+          variant="success"
+          {...props}
+      />
+
+      <Pill
+          text="error"
+          variant="error"
+          {...props}
+      />
+
+      <Pill
+          text="warning"
+          variant="warning"
+          {...props}
+      />
+
+      <Pill
+          text="info"
+          variant="info"
+          {...props}
+      />
+
+      <Pill
+          text="neutral"
+          variant="neutral"
+      />
+
+      <Pill
+          text="primary"
+          variant="primary"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default PillVariants

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

@@ -2,8 +2,12 @@ examples:
   
   rails:
   - pill_default: Default
+  - pill_variants: Variants
+  - pill_example: Example
  
   
   
   react:
   - pill_default: Default
+  - pill_variants: Variants
+  - pill_example: Example

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

@@ -1 +1,3 @@
 export { default as PillDefault } from './_pill_default.jsx'
+export { default as PillVariants } from './_pill_variants.jsx'
+export { default as PillExample } from './_pill_example.jsx'

data/app/pb_kits/playbook/pb_pill/pill.rb

@@ -7,13 +7,16 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[success warning error info neutral primary],
                      default: "neutral"
+      prop :text_transform, type: Playbook::Props::Enum,
+                            values: %w[none lowercase],
+                            default: "lowercase"
 
       def classname
-        generate_classname("pb_pill_kit", variant)
+        generate_classname("pb_pill_kit", variant, text_transform)
       end
 
       def display_text
-        text.downcase
+        object.text
       end
     end
   end

data/app/pb_kits/playbook/pb_popover/_popover.scss

@@ -1,4 +1,5 @@
 @import "../tokens/positioning";
+@import "../tokens/colors";
 @import "../pb_card/card_mixin";
 @import "../tokens/shadows";
 
@@ -43,6 +44,7 @@
 }
 .pb_popover_body {
   @include pb_card;
+  background-color: $white;
   border: 0;
   box-shadow: $shadow_deeper;
 }

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -25,6 +25,7 @@ $pb_selectable_card_border: 2px;
     }
 
     @include pb_card;
+    background-color: $white;
     padding: $space_sm;
     margin-bottom: $space_sm;
     cursor: pointer;

data/app/pb_kits/playbook/utilities/_max_width.scss

@@ -1,3 +1,13 @@
+.max_width_xs {
+  max-width: 360px;
+}
+.max_width_0 {
+  max-width: 0;
+}
+.max_width_none {
+  max-width: none;
+}
+
 .max_width_sm {
   max-width: 540px;
 }

data/lib/playbook/spacing.rb

@@ -70,7 +70,7 @@ module Playbook
     end
 
     def max_width_values
-      %w[sm md lg xl]
+      %w[xs sm md lg xl 0 none]
     end
   end
 end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.14.1.pre.alpha1"
-  VERSION = "10.14.1.pre.alpha2"
+  PREVIOUS_VERSION = "10.14.0"
+  VERSION = "10.15.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.14.1.pre.alpha2
+  version: 10.15.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-11-22 00:00:00.000000000 Z
+date: 2021-11-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -99,16 +99,16 @@ dependencies:
   name: rubocop-performance
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.11.5
+        version: 1.9.2
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.11.5
+        version: 1.9.2
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -197,36 +197,36 @@ dependencies:
   name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.8'
     - - ">="
       - !ruby/object:Gem::Version
         version: 3.8.0
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.8'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.8'
     - - ">="
       - !ruby/object:Gem::Version
         version: 3.8.0
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.8'
 - !ruby/object:Gem::Dependency
   name: rubocop
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.20.0
+        version: 0.93.1
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.20.0
+        version: 0.93.1
 - !ruby/object:Gem::Dependency
   name: spring
   requirement: !ruby/object:Gem::Requirement
@@ -322,12 +322,18 @@ files:
 - app/pb_kits/playbook/pb_background/_background.scss
 - app/pb_kits/playbook/pb_background/background.html.erb
 - app/pb_kits/playbook/pb_background/background.rb
+- app/pb_kits/playbook/pb_background/docs/_background_category.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_category.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_category.md
 - app/pb_kits/playbook/pb_background/docs/_background_gradient.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_image.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_image.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_light.jsx
+- 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_white.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_white.jsx
 - app/pb_kits/playbook/pb_background/docs/_description.md
@@ -909,6 +915,9 @@ files:
 - app/pb_kits/playbook/pb_form_group/form_group.rb
 - app/pb_kits/playbook/pb_form_pill/_form_pill.jsx
 - app/pb_kits/playbook/pb_form_pill/_form_pill.scss
+- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb
+- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx
+- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.md
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb
@@ -1339,6 +1348,11 @@ files:
 - app/pb_kits/playbook/pb_pill/docs/_description.md
 - app/pb_kits/playbook/pb_pill/docs/_pill_default.html.erb
 - app/pb_kits/playbook/pb_pill/docs/_pill_default.jsx
+- app/pb_kits/playbook/pb_pill/docs/_pill_example.html.erb
+- app/pb_kits/playbook/pb_pill/docs/_pill_example.jsx
+- app/pb_kits/playbook/pb_pill/docs/_pill_example.md
+- app/pb_kits/playbook/pb_pill/docs/_pill_variants.html.erb
+- app/pb_kits/playbook/pb_pill/docs/_pill_variants.jsx
 - app/pb_kits/playbook/pb_pill/docs/example.yml
 - app/pb_kits/playbook/pb_pill/docs/index.js
 - app/pb_kits/playbook/pb_pill/pill.html.erb
@@ -2072,11 +2086,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
-rubygems_version: 3.1.6
+rubygems_version: 3.0.3
 signing_key:
 specification_version: 4
 summary: Playbook Design System