playbook_ui 16.1.0.pre.alpha.play2712navkitadddisabledstatecollapsible13821 → 16.1.0.pre.alpha.play264213817

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d939aea02ce3a4f2c4b4fef3a3167caffa5ffcb62f263496c3d28c69f0dcd0f4
-  data.tar.gz: 4551f5959fe2a467396b057ad3e113d572c2dddadc5cf05e29b76302b6079ca4
+  metadata.gz: 60b41dbbb195e70b9104ae56ec68ad19fb488444096838262600e95bbe239642
+  data.tar.gz: 6d634ec91b1f185be3d7e47e6c88eeab8e545831336742e5661f5066a628e274
 SHA512:
-  metadata.gz: 162e5837f327e866b090bb5d365f16f601ed095206eb89629ae98b124c0d8e1a5c5e0682df498175f460f53f221c6091b303d6767c37f5ecb6a1ff90cd4d6458
-  data.tar.gz: f02c17129d23078e67191024c8d1194353eb48f5623167a994c8795438954de246d9ed42d494fb18c39b48ca2726f5fdcc8522596c65d292b5141676836a3807
+  metadata.gz: dd16edcd3a1830e2736636eb7f254099c46fe7130e6ef42fd0bb35a17a1e6967f84be79ec23761183e615bdbe0c242b890d30670ef993a3382dbf62c349cc864
+  data.tar.gz: 377d852a602c33c7067b566a1fc838a61836516add1396a720269dd31e28aa370aa8ca400b913b6905c50443a45bf0e6cc9d84951480f09cf7b469e09d04f86c

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

@@ -1,4 +1,36 @@
-<%= pb_rails("card", props: {
-})  do %>
-  Card content
+<%= pb_rails("flex", props: {
+  gap: "md",
+  orientation: "column"
+}) do %>
+
+  <%= pb_rails("caption", props: { text: "flex direction responsive: row on md + xl, column as default" }) %>
+  <%= pb_rails("card", props: {
+    flex_direction: { default: "column", md: "row", xl:"row" }
+  })  do %>
+      <%= pb_rails("body", props: { text: "Item 1", color: "default" }) %>
+    <%= pb_rails("body", props: { text: "Item 2", color: "default" }) %>
+    <%= pb_rails("body", props: { text: "Item 3", color: "default" }) %>
+  <% end %>
+
+  <%= pb_rails("caption", props: { text: "align items responsive: start on default, center on md, end on lg" }) %>
+  <%= pb_rails("card", props: {
+    display: "flex",
+    flex_direction: "row",
+    align_items: { default: "start", md: "center", lg: "end" },
+  })  do %>
+    <%= pb_rails("card", props: {height:"xs" }) do %> Card 1 <% end %>
+    <%= pb_rails("card", props: { height:"sm" }) do %> Card 2 <% end %>
+    <%= pb_rails("card", props: { height:"xs" }) do %> Card 3 <% end %>
+  <% end %>
+
+<%= pb_rails("caption", props: { text: "Text Align responsive: left on default, center on md, right on lg" }) %>
+  <%= pb_rails("card", props: {
+    text_align: { default: "left", md: "center", lg: "right" },
+    width: "100%"
+  })  do %>
+    <%= pb_rails("body", props: { }) do %> text 1 <% end %>
+    <%= pb_rails("body", props: { }) do %> text 2 <% end %>
+    <%= pb_rails("body", props: { }) do %> text 3 <% end %>
+  <% end %>
 <% end %>
+

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -44,7 +44,6 @@ type NavItemProps = {
   marginX?: Spacing;
   marginY?: Spacing;
   disabled?: boolean;
-  inactive?: boolean;
 } & GlobalProps;
 
 const NavItem = (props: NavItemProps) => {
@@ -92,7 +91,6 @@ const NavItem = (props: NavItemProps) => {
     marginX,
     marginY,
     disabled = false,
-    inactive = false,
   } = props;
 
   const spacingMarginProps = {
@@ -150,7 +148,6 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   const highlightedBorderClass = active === true && highlighted_border === false ? "highlighted_border_none" : "";
   const collapsibleTrailClass = collapsible && collapsibleTrail ? "collapsible_trail" : "";
   const disabledClass = disabled ? "pb_nav_item_disabled" : "";
-  const inactiveClass = inactive ? "pb_nav_item_inactive" : "";
 
   const fontSizeMapping = {
     "small": "font_size_small",
@@ -184,7 +181,6 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
     tagClasses,
     collapsible ? globalProps(filteredProps, {...filteredPadding}) : globalProps(props, {...itemSpacing}),
     disabledClass,
-    inactiveClass,
     className
   );
 
@@ -230,7 +226,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
       {collapsible ? (
         <>
           <Collapsible
-              className={collapsibleClasses + ` ${inactiveClass}`}
+              className={collapsibleClasses}
               collapsed={collapsed}
               icon={iconRight && iconRight}
               iconSize="xs"

data/app/pb_kits/playbook/pb_nav/_nav.scss

@@ -79,8 +79,7 @@
 }
 
 // Disabled scss
-.pb_nav_item_disabled, 
-.pb_nav_item_inactive {
+.pb_nav_item_disabled {
   cursor: not-allowed !important;
   .pb_nav_list_item_text, 
   .pb_nav_list_item_icon_left,
@@ -101,28 +100,3 @@
     }
   }
 }
-
-.pb_nav_item_inactive { 
-  .pb_nav_list_item_text_collapsible {
-    color: $text_lt_lighter !important;
-    cursor: not-allowed !important;
-  }
-}
-
-.pb_nav_item_inactive { 
-  .pb_collapsible_content_kit {
-  .pb_nav_list_item_text_collapsible {
-    color: $text_lt_lighter !important;
-    cursor: not-allowed !important;
-  }
-}
-   @media (hover: hover) {
-    &:hover {
-      .pb_nav_list_item_icon_section_collapsible {
-        path {
-          color: $text_lt_lighter !important;
-        }
-      }
-    }
-  }
-}

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

@@ -1,6 +1,5 @@
 examples:
   rails:
-  - collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
   - default_nav: Default
   - with_icons_nav: With Icons
   - with_img_nav: With Custom Icon
@@ -27,7 +26,6 @@ examples:
   - tab_nav: Tab Nav
 
   react:
-  - collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
   - default_nav: Default
   - with_icons_nav: With Icons
   - with_img_nav: With Custom Icon

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

@@ -22,5 +22,4 @@ export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_sp
 export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
 export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
 export { default as HorizontalNavDisabled } from './_horizontal_nav_disabled.jsx'
-export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
-export { default as CollapsibleNavDisabledItem } from './_collapsible_nav_disabled_item.jsx'
+export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -20,7 +20,6 @@ module Playbook
       prop :icon_left
       prop :icon_right
       prop :image_url
-      prop :inactive, type: Playbook::Props::Boolean, default: false
       prop :target, type: Playbook::Props::Enum,
                     values: %w[_blank _self _parent _top],
                     default: "_self"
@@ -28,7 +27,7 @@ module Playbook
         if collapsible
           "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible"
         else
-          "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{font_size_class} #{font_weight_class} #{inactive_class} pb_nav_list_item_link#{disabled_class}"
+          "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link#{disabled_class}"
         end
       end
 
@@ -95,7 +94,7 @@ module Playbook
       end
 
       def collapsible_nav_classname
-        generate_classname("collapsible_nav_wrapper", active_class, collapsible_trail_class, inactive_class)
+        generate_classname("collapsible_nav_wrapper", active_class, collapsible_trail_class)
       end
 
     private
@@ -108,10 +107,6 @@ module Playbook
         disabled ? " pb_nav_item_disabled" : nil
       end
 
-      def inactive_class
-        inactive ? " pb_nav_item_inactive" : nil
-      end
-
       def highlighted_border_class
         !highlighted_border && active ? "highlighted_border_none" : nil
       end

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -75,7 +75,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     name,
     onChange = noop,
     placeholder,
-    textareaHeight,
+    inputHeight,
+    inputMinHeight,
     simple = false,
     sticky = false,
     template = '',
@@ -243,10 +244,10 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     )}
       {
         advancedEditor ? (
-          <div 
+          <div
               className={classnames(
                 "pb_rich_text_editor_advanced_container",
-                { [`textarea_height_${textareaHeight}`]: !!textareaHeight, ["toolbar-active"]: shouldShowToolbar }
+                { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
               )}
           >
             {shouldShowToolbar && (

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

@@ -36,4 +36,3 @@ examples:
   - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
   - rich_text_editor_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview
-  - rich_text_editor_advanced_rows: Advanced Height