playbook_ui 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4097 → 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4216

data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts

@@ -1 +1,4 @@
-declare module 'intl-tel-input'
+declare module 'intl-tel-input/build/js/intlTelInputWithUtils.js' {
+    const intlTelInput: any;
+    export default intlTelInput;
+}

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

@@ -21,7 +21,7 @@ import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import { uniqueId } from 'lodash';
 
-type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
+type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth' | 'maxHeight' | 'minHeight'>
 
 type PbPopoverProps = {
   aria?: { [key: string]: string };
@@ -79,6 +79,7 @@ const Popover = (props: PbPopoverProps) => {
     maxWidth,
     minHeight,
     minWidth,
+    width,
     targetId,
   } = props;
 
@@ -97,7 +98,8 @@ const Popover = (props: PbPopoverProps) => {
       maxHeight ? { maxHeight: maxHeight } : {},
       maxWidth ? { maxWidth: maxWidth } : {},
       minHeight ? { minHeight: minHeight } : {},
-      minWidth ? { minWidth: minWidth } : {}
+      minWidth ? { minWidth: minWidth } : {},
+      width ? { width: width } : {}
     );
   };
   const ariaProps = buildAriaProps(aria);
@@ -167,6 +169,7 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
     maxWidth,
     minHeight,
     minWidth,
+    width,
   } = props;
 
   useEffect(() => {
@@ -216,6 +219,7 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
         placement={placement}
         referenceElement={referenceElement}
         targetId={targetId}
+        width={width}
         zIndex={zIndex}
         {...props}
     >

data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb

@@ -14,7 +14,7 @@
         trigger_element_id: "regular-popover-1",
         tooltip_id: "tooltip-1",
         offset: true,
-        position: "top"
+        position: "top",
     }) do %>
         I'm a popover. I can show content of any size.
     <% end %>

data/app/pb_kits/playbook/pb_popover/popover.rb

@@ -12,6 +12,7 @@ module Playbook
       prop :max_width
       prop :min_width
       prop :min_height
+      prop :width
       prop :z_index, type: Playbook::Props::String
       prop :offset, type: Playbook::Props::Boolean, default: false
       prop :close_on_click, type: Playbook::Props::Enum,
@@ -36,11 +37,12 @@ module Playbook
         out += "max-width: #{max_width}; " if max_width.present?
         out += "min-height: #{min_height}; " if min_height.present?
         out += "min-width: #{min_width};" if min_width.present?
+        out += "width: #{width};" if width.present?
         out
       end
 
       def width_height_class_helper
-        "overflow_handling" if max_height || max_width
+        "overflow_handling" if max_height || max_width || width
       end
 
       def data

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

@@ -10,6 +10,24 @@
 $pb_selectable_card_indicator_size: 22px;
 $pb_selectable_card_border: 2px;
 
+$pb_selectable_space_classes: (
+  xxs: $space_xxs,
+  xs: $space_xs,
+  sm: $space_sm,
+  md: $space_md,
+  lg: $space_lg,
+  xl: $space_xl,
+);
+$pb_selectable_paddings: (
+  p: "padding",
+  pr: "padding-right",
+  pl: "padding-left",
+  pt: "padding-top",
+  pb: "padding-bottom",
+  px: ("padding-left", "padding-right"),
+  py: ("padding-top", "padding-bottom")
+);
+
 [class^=pb_selectable_card_kit] {
   display: block;
   margin-bottom: 0;
@@ -73,8 +91,6 @@ $pb_selectable_card_border: 2px;
 
         position: relative;
         @include pb_card_selected;
-        // Selected card has 1px more border
-        // Remove 1px so content does not "jump"
         padding: calc(#{$space_sm} - 1px);
         transition-property: none;
         transition-duration: 0s;
@@ -90,6 +106,54 @@ $pb_selectable_card_border: 2px;
           background-color: $royal;
         }
       }
+
+      // Selected card has 1px more border
+      // Remove 1px so content does not "jump"
+      @each $position_name,
+      $position in $pb_selectable_paddings {
+        @each $space_name,
+        $space in $pb_selectable_space_classes {
+          ~ label.#{$position_name}_#{$space_name} {
+            @if type-of($position)=="list" {
+              @each $coordinate in $position {
+                #{$coordinate}: calc(#{$space} - 1px) !important;
+              }
+            }
+
+            @else {
+              #{$position}: calc(#{$space} - 1px) !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &[class*=_display_input] {
+    input[type="checkbox"],
+    input[type="radio"] {
+      &:checked {
+        ~label {
+          border-width: $pb_card_border_width;
+          outline: 1px solid $primary;
+        }
+
+      }
+    }
+
+    > label {
+      outline: 1px solid transparent;
+      padding: $space_sm;
+    }
+
+    &.dark {
+      input[type="checkbox"],
+      input[type="radio"] {
+        &:checked ~ label {
+          border-width: $pb_card_border_width;
+          outline: 1px solid $primary;
+        }
+      }
     }
   }
 

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

@@ -66,6 +66,7 @@ const SelectableCard = (props: SelectableCardProps) => {
       'checked': checked,
       'disabled': disabled,
       'enabled': !disabled,
+      'display_input': variant === 'displayInput',
     }),
   { error },
   dark ? 'dark' : '',

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -25,7 +25,7 @@
           <% end %>
           <div class="separator"></div>
           <div class="psuedo_separator"></div>
-          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true }) do %>
+          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true, dark: object.dark }) do %>
             <% if content.nil? %>
               <%= pb_rails("body", props: { text: object.text }) %>
             <% else %>

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -25,7 +25,7 @@ module Playbook
 
       def classname
         [
-          generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class),
+          generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class, display_input_class),
           error_class,
           dark_props,
         ].compact.join(" ")
@@ -79,6 +79,10 @@ module Playbook
       def error_class
         error ? "error" : nil
       end
+
+      def display_input_class
+        variant == "display_input" ? "display_input" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -1,4 +1,7 @@
 export default [
+  "minHeight",
+  "maxHeight",
+  "height",
   "left",
   "bottom",
   "right",

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -170,12 +170,24 @@ type ZIndex = {
   zIndex?: ZIndexType,
 } | ZIndexResponsiveType
 
+type Height = {
+  height?: string 
+}
+
+type MaxHeight = {
+  maxHeight?: string
+}
+
+type MinHeight = {
+  minHeight?: string
+}
+
 // keep this as the last type definition
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
-  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
+  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -498,7 +510,22 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     } else {
       return verticalAlign ? `vertical_align_${verticalAlign} ` : ''
     }
-  }
+  },
+
+}
+
+const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[key: string]: any}} = {
+  heightProps: ({ height }: Height) => {
+    return height ? { height } : {}; 
+  },
+
+  maxHeightProps: ({ maxHeight }: MaxHeight) => {
+    return maxHeight ? { maxHeight } : {};
+  },
+
+  minHeightProps: ({ minHeight }: MinHeight) => {
+    return minHeight ? { minHeight } : {}; 
+  },
 }
 
 type DefaultProps = {[key: string]: string} | Record<string, unknown>
@@ -510,6 +537,16 @@ export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {})
   }).filter((value) => value?.length > 0).join(" ")
 }
 
+// New function for inline styles
+export const globalInlineProps = (props: GlobalProps): React.CSSProperties => {
+  const styles = Object.keys(PROP_INLINE_CATEGORIES).reduce((acc, key) => {
+    const result = PROP_INLINE_CATEGORIES[key](props);
+    return { ...acc, ...(typeof result === 'object' ? result : {}) }; // Ensure result is an object before spreading
+  }, {});
+
+  return styles; // Return the styles object directly
+}
+
 
 export const deprecatedProps = (): void => {
   // if (process.env.NODE_ENV === 'development') {