playbook_ui 15.1.0.pre.alpha.iconstatvaluescss10956 → 15.1.0.pre.alpha.testingtiptap11004

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 023dae1c06846305a2de70d79d36fac8bb6e685e9eed4da1157a84559d3749c6
-  data.tar.gz: f8154d1b04e55366e85ddf6f2a21d2e465d49ba40d6a456ddb43450307930e91
+  metadata.gz: 7666b6fac1ed12cd57f6e04399e9435d460a274c5d44d38216ce0ed94024cde7
+  data.tar.gz: de5912fdd691035fb02f2a92d9692309a08586ec430141ee8ed0b64ee5b3e70e
 SHA512:
-  metadata.gz: d7fa8e2b752601706f4aa07fc61cb6c08280c21c315faf666ef054eac38a01e6e14e17fe5015de1d6c3734ba0fae3039b01223ab85a32a305166ca0bd06983e7
-  data.tar.gz: f61864e43078b05767ba7fc2335881b00ee99799b8731ca982e00a43fc952c5b085b5712626d66b410548f5b6e83bbaf200b2343bf6ef4f7aff8ee94b046e76d
+  metadata.gz: 60685d79142f02e761606168b87b47bd68384f8f112270e2a77ffd8233b02660fd949ddc288160a769dad5ce70e32a814509f90dd15b6b4cd6bcfb51088cde41
+  data.tar.gz: 3b8ceb9c5588c986fd04fcbbdf230e5d6a0a2852afd72d11d4c06685433b717e468e44ee9ec63756fbbe887812f9977a7013f87e62ca1e07108acc22aeb2eb41

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -146,8 +146,6 @@ export function useTableState({
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
-    if (!pagination) return {};
-
     return {
       getPaginationRowModel: getPaginationRowModel(),
       paginateExpandedRows: false,

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -19,6 +19,10 @@
     @import "./sass_partials/calendar_input_icon";
   }
 
+  label {
+    display: block !important;
+  }
+
   &:focus,
   :focus-within {
     div.cal_icon_wrapper,

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

@@ -3,12 +3,12 @@
 <%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-stacked-delete"}, margin_right: "md" }) %>
 
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-default", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-default",
     status: "default",
-    size: "sm", 
-    title: "Are you sure?", 
-    text: "Text explaining why there is an alert", 
+    size: "sm",
+    title: "Are you sure?",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
@@ -18,12 +18,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-caution", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-caution",
     status: "caution",
-    size: "sm", 
-    title: "Are you sure?", 
-    text: "This is the action you will be taking", 
+    size: "sm",
+    title: "Are you sure?",
+    text: "This is the action you will be taking",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
@@ -33,16 +33,16 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-stacked-delete", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-stacked-delete",
     status: "delete",
-    size: "sm", 
-    title: "Delete", 
-    text: "You are about to delete ...", 
+    size: "sm",
+    title: "Delete",
+    text: "You are about to delete ...",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
-            <%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
+            <%= pb_rails("button", props: { text: "Yes, Action", variant: "danger", full_width: true }) %>
             <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-delete" } }) %>
         <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx

@@ -51,7 +51,7 @@ const DialogStackedAlert = () => {
   return (
     <div>
     <Flex
-        rowGap="xs" 
+        rowGap="xs"
         wrap
     >
       <Button
@@ -93,6 +93,7 @@ const DialogStackedAlert = () => {
           <Button
               fullWidth
               onClick={dialog.toggle}
+              variant= {dialog.status == "delete" ? "danger" : "primary"}
           >
             {dialog.buttonOneText}
           </Button>

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

@@ -8,12 +8,12 @@
 <%= pb_rails("button", props: { text: "Success Status", data: {"open-dialog": "dialog-status-success"}, margin_right: "md" }) %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-default", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-default",
     status: "default",
-    size: "status_size", 
-    title: "Are you sure?", 
-    text: "Text explaining why there is an alert", 
+    size: "status_size",
+    title: "Are you sure?",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -23,12 +23,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-info", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-info",
     status: "info",
-    size: "status_size", 
-    title: "Information", 
-    text: "Text explaining why there is an alert", 
+    size: "status_size",
+    title: "Information",
+    text: "Text explaining why there is an alert",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -37,12 +37,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-caution", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-caution",
     status: "caution",
-    size: "status_size", 
-    title: "Are you Sure?", 
-    text: "This is the action you will be taking", 
+    size: "status_size",
+    title: "Are you Sure?",
+    text: "This is the action you will be taking",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -52,27 +52,27 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-delete", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-delete",
     status: "delete",
-    size: "status_size", 
-    title: "Delete", 
-    text: "You are about to delete ...", 
+    size: "status_size",
+    title: "Delete",
+    text: "You are about to delete ...",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
-            <%= pb_rails("button", props: { text: "Yes, Delete" }) %>
+            <%= pb_rails("button", props: { text: "Yes, Delete", variant: "danger" }) %>
             <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-delete" } }) %>
         <% end %>
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-error", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-error",
     status: "error",
-    size: "status_size", 
-    title: "Error Message", 
-    text: "Text explaining the error", 
+    size: "status_size",
+    title: "Error Message",
+    text: "Text explaining the error",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -81,12 +81,12 @@
     <% end %>
 <% end %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-status-success", 
+<%= pb_rails("dialog", props: {
+    id:"dialog-status-success",
     status: "success",
-    size: "status_size", 
-    title: "Success!", 
-    text: "Text explaining what is successful", 
+    size: "status_size",
+    title: "Success!",
+    text: "Text explaining what is successful",
 }) do %>
     <%= pb_rails("dialog/dialog_footer") do %>
         <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx

@@ -83,8 +83,8 @@ const DialogStatus = () => {
 
   return (
     <div>
-      <Flex 
-          rowGap="xs" 
+      <Flex
+          rowGap="xs"
           wrap
       >
         <Button
@@ -117,7 +117,7 @@ const DialogStatus = () => {
         >
           {"Success Status"}
         </Button>
-        <Button 
+        <Button
             marginRight="md"
             onClick={toggleErrorAlert}
         >
@@ -152,6 +152,7 @@ const DialogStatus = () => {
                   <Button
                       onClick={dialog.toggle}
                       paddingRight="xl"
+                      variant={dialog.status == "delete" ? "danger" : "primary"}
                   >
                   {dialog.buttonOneText}
                   </Button>

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
 
@@ -26,7 +26,7 @@ type IconCircleProps = {
     | "orange"
     | "green"
     | "lighter",
-} & GlobalProps
+}
 
 const IconCircle = (props: IconCircleProps) => {
   const {

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss

@@ -3,45 +3,51 @@
 @import "../tokens/spacing";
 @import "../pb_icon_circle/icon_circle";
 
-.pb_icon_stat_value_kit_horizontal,
-.pb_icon_stat_value_kit_vertical
- {
+[class^=pb_icon_stat_value_kit]{
   display: flex;
   align-items: baseline;
 
-  &.pb_icon_stat_value_kit_vertical {
+  &[class*=_vertical]  {
     flex-direction: column;
 
-    &.text_align_center {
+    &[class*=_center]  {
       align-items: center;
 
-      .pb_title_kit,
-      .pb_body_kit,
-      .pb_caption_kit_md {
+      [class^=pb_title],
+      [class^=pb_body],
+      [class^=pb_caption] {
         text-align: center;
       }
     }
 
-    &.text_align_right {
+    &[class*=_right]  {
       align-items: flex-end;
 
-      .pb_title_kit,
-      .pb_body_kit,
-      .pb_caption_kit_md {
+      [class^=pb_title],
+      [class^=pb_body],
+      [class^=pb_caption] {
         text-align: right;
       }
     }
+
+    [class^=pb_icon_circle] {
+      margin-bottom: $space-xs;
+    }
   }
 
-  &.pb_icon_stat_value_kit_horizontal {
+  &[class*=_horizontal]  {
     align-items: center;
 
-    &.text_align_center {
+    &[class*=_center]  {
       justify-content: center;
     }
 
-    &.text_align_right {
+    &[class*=_right]  {
       justify-content: flex-end;
     }
+
+    [class^=pb_icon_circle] {
+      margin-right: $space-sm;
+    }
   }
 }

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -33,7 +33,8 @@ type IconStatValueProps = {
     | "yellow"
     | "orange"
     | "green"
-} & GlobalProps
+    | "lighter",
+}
 
 const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
   const {
@@ -49,13 +50,13 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
     text = '',
     unit = '',
     value = 0,
-    variant = 'default',
+    variant = 'lighter',
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
-    buildCss('pb_icon_stat_value_kit', orientation), globalProps(props),
+    buildCss('pb_icon_stat_value_kit', orientation, size, variant), globalProps(props),
     className
   )
   const titleSize = function(size: "sm" | "md" | "lg") {
@@ -100,8 +101,6 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
       <IconCircle
           dark={dark}
           icon={icon}
-          marginBottom={orientation == 'vertical' ? 'xs' : undefined}
-          marginRight={orientation == 'horizontal' ? 'sm' : undefined}
           size={size}
           variant={variant}
       />

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -3,8 +3,6 @@
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,
         icon: object.icon,
-        margin_right: object.icon_margin_right,
-        margin_bottom: object.icon_margin_bottom,
         size: object.size,
         variant: object.variant }) %>
 

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb

@@ -9,8 +9,8 @@ module Playbook
                   values: %w[sm md lg],
                   default: "sm"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default royal blue purple teal red yellow green orange],
-                     default: "default"
+                     values: %w[default royal blue purple teal red yellow green orange lighter],
+                     default: "lighter"
 
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],
@@ -25,7 +25,7 @@ module Playbook
       prop :value
 
       def classname
-        generate_classname("pb_icon_stat_value_kit", orientation)
+        generate_classname("pb_icon_stat_value_kit", orientation, size, variant)
       end
 
       def value_string
@@ -41,14 +41,6 @@ module Playbook
           3
         end
       end
-
-      def icon_margin_right
-        orientation === "horizontal" && "sm"
-      end
-
-      def icon_margin_bottom
-        orientation === "vertical" && "xs"
-      end
     end
   end
 end

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

@@ -18,7 +18,7 @@ describe("IconStatValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal")
+        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal_sm_lighter")
     })
 
     test("renders icon", () => {
@@ -99,10 +99,9 @@ describe("IconStatValue Kit", () => {
                     value={64.18}
           />
             )
-            const size = sizeProp === "sm" ? "3" : sizeProp === "md" ? "2" : "1"
+    
             const kit = screen.getByTestId(testId)
-            const title = kit.querySelector(".pb_title_kit")
-            expect(title).toHaveClass(`pb_title_${size}`)
+            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_${sizeProp}_lighter`)
 
             cleanup()
         })
@@ -116,7 +115,8 @@ describe("IconStatValue Kit", () => {
         "teal",
         "red",
         "yellow",
-        "green"].forEach(
+        "green",
+        "lighter"].forEach(
             (colorProp) => {
             render(
                 <IconStatValue
@@ -128,10 +128,9 @@ describe("IconStatValue Kit", () => {
                     variant={colorProp}
           />
             )
-
+    
             const kit = screen.getByTestId(testId)
-            const iconCircle = kit.querySelector(`.pb_icon_circle_kit_size_sm_${colorProp}`)
-            expect(iconCircle).toBeInTheDocument()
+            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_sm_${colorProp}`)
 
             cleanup()
         }) 
@@ -150,7 +149,7 @@ describe("IconStatValue Kit", () => {
             )
     
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical")
+            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical_sm_lighter")
     })
 
 })

data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss

@@ -12,7 +12,6 @@
 }
 
 @mixin preview_tiptap_p {
-    margin: 1rem 0 0 0;
     min-height: 1rem;
 }
 
@@ -56,13 +55,9 @@
 }
 
 @mixin preview_tiptap_blockquote {
-    font-size: $font_larger;
-    padding: $space_sm $space_md;
-    font-style: italic;
-    margin: 1rem 0 0 0;
-    p {
-        margin: 0;
-    }
+    border-left: 3px solid $text_lt_lighter;
+    margin: 1.5rem 0;
+    padding-left: 1rem;
 }
 
 @mixin preview_tiptap_h1 {
@@ -70,7 +65,6 @@
     line-height: $text_larger;
     font-weight: $bolder;
     letter-spacing: $lspace_tight;
-    margin: 2.1rem 0 0 0;
 }
 
 @mixin preview_tiptap_h2 {
@@ -78,7 +72,6 @@
     line-height: $text_larger;
     font-weight: $bolder;
     letter-spacing: $lspace_tight;
-    margin: 1.9rem 0 0 0;
 }
 
 @mixin preview_tiptap_h3 {
@@ -86,7 +79,6 @@
     line-height: $text_large;
     font-weight: $bolder;
     letter-spacing: $lspace_tight;
-    margin: 1.7rem 0 0 0;
 }
 
 @mixin preview_tiptap_smaller_headings {
@@ -94,7 +86,6 @@
     line-height: $text_base;
     letter-spacing: $lspace_tight;
     font-weight: $bolder;
-    margin: 1rem 0 0 0;
 }
 
 @mixin preview_tiptap_hr {
@@ -110,7 +101,6 @@
 }
 
 @mixin preview_tiptap_ol {
-    margin: 1rem 0 0 0;
     padding-left: $space_md;
     list-style: decimal;
     li {

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -75,16 +75,6 @@
       margin-top: 0;
     }
 
-    h4,
-    h5,
-    h6,
-    ul,
-    ol,
-    blockquote,
-    p {
-      margin: 1rem 0 0 0;
-    }
-
     code {
       @include preview_tiptap_code;
     }

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -140,10 +140,14 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     formattedValue = value
   }
 
+  const errorId = error ? `${id}-error` : undefined
+
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
         {...domSafeProps(props)}
+        aria-describedby={errorId}
+        aria-invalid={!!error}
         autoComplete={typeof autoComplete === "string" ? autoComplete : ( autoComplete ? undefined : "off" )}
         className="text_input"
         disabled={disabled}
@@ -202,16 +206,20 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         {...htmlProps}
         className={css}
     >
-      {label &&
-        <Caption
-            className="pb_text_input_kit_label"
-            text={label}
-        />
-      }
+      {label && (
+        <label htmlFor={id}>
+          <Caption className="pb_text_input_kit_label" 
+              text={label} 
+          />
+        </label>
+      )}
       <div className={`${addOnCss} text_input_wrapper`}>
         {render}
 
         {error && <Body
+            aria={{ atomic: "true", live: "polite" }}
+            htmlOptions={{ role: "alert" }}
+            id={errorId}
             status="negative"
             text={error}
             variant={null}

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb

@@ -9,23 +9,27 @@
 
 <%= pb_rails("text_input", props: {
   label: "Last Name",
-  placeholder: "Enter last name"
+  placeholder: "Enter last name",
+  id: "last-name"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Phone Number",
     type: "phone",
-    placeholder: "Enter phone number"
+    placeholder: "Enter phone number",
+    id: "phone"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Email Address",
     type: "email",
-    placeholder: "Enter email address"
+    placeholder: "Enter email address",
+    id: "email"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Zip Code",
     type: "number",
-    placeholder: "Enter zip code"
+    placeholder: "Enter zip code",
+    id: "zip"
 }) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -38,6 +38,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="last-name"
           label="Last Name"
           name="lastName"
           onChange={handleOnChangeFormField}
@@ -46,6 +47,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="phone"
           label="Phone Number"
           name="phone"
           onChange={handleOnChangeFormField}
@@ -55,6 +57,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="email"
           label="Email Address"
           name="email"
           onChange={handleOnChangeFormField}
@@ -64,6 +67,7 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
+          id="zip"
           label="Zip Code"
           name="zip"
           onChange={handleOnChangeFormField}
@@ -84,6 +88,7 @@ const TextInputDefault = (props) => {
       <br />
 
       <TextInput
+          id="first-name"
           label="First Name"
           onChange={handleOnChangeFirstName}
           placeholder="Enter first name"