playbook_ui 14.6.2.pre.alpha.PLAY15814348 → 14.6.2.pre.alpha.PLAY15814384

data/lib/playbook/kit_base.rb

@@ -82,18 +82,6 @@ module Playbook
       self
     end
 
-    def combined_html_options
-      default_html_options.merge(html_options.deep_merge(data_attributes))
-    end
-
-    def global_inline_props
-      {
-        height: height,
-        min_height: min_height,
-        max_height: max_height,
-      }.compact
-    end
-
     # rubocop:disable Layout/CommentIndentation
     # pb_content_tag information (potentially to be abstracted into its own dev doc in the future)
     # The pb_content_tag generates HTML content tags for rails kits with flexible options.
@@ -122,6 +110,34 @@ module Playbook
     end
     # rubocop:enable Style/OptionalBooleanParameter
 
+    def combined_html_options
+      merged = default_html_options.dup
+
+      html_options.each do |key, value|
+        if key == :style && value.is_a?(Hash)
+          # Convert style hash to CSS string
+          merged[:style] = value.map { |k, v| "#{k.to_s.gsub('_', '-')}: #{v}" }.join("; ")
+        else
+          merged[key] = value
+        end
+      end
+
+      inline_styles = dynamic_inline_props
+      merged[:style] = if inline_styles.present?
+                         merged[:style].present? ? "#{merged[:style]}; #{inline_styles}" : inline_styles
+                       end
+
+      merged.deep_merge(data_attributes)
+    end
+
+    def global_inline_props
+      {
+        height: height,
+        min_height: min_height,
+        max_height: max_height,
+      }.compact
+    end
+
   private
 
     def default_options
@@ -131,8 +147,10 @@ module Playbook
         class: classname,
         aria: aria,
       }
+
       inline_styles = dynamic_inline_props
-      options[:style] = inline_styles if inline_styles.present?
+      options[:style] = inline_styles if inline_styles.present? && !html_options.key?(:style)
+
       options
     end
 
@@ -148,8 +166,8 @@ module Playbook
     end
 
     def dynamic_inline_props
-      styles = global_inline_props.map { |key, value| "#{key.to_s.gsub('_', '-')}: #{value};" if value.present? }.compact
-      styles.join(" ").presence
+      styles = global_inline_props.map { |key, value| "#{key.to_s.gsub('_', '-')}: #{value}" if value.present? }.compact
+      styles.join("; ").presence
     end
   end
 end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.6.2"
-  VERSION = "14.6.2.pre.alpha.PLAY15814348"
+  VERSION = "14.6.2.pre.alpha.PLAY15814384"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.6.2.pre.alpha.PLAY15814348
+  version: 14.6.2.pre.alpha.PLAY15814384
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-11-04 00:00:00.000000000 Z
+date: 2024-11-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1385,7 +1385,8 @@ files:
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx
-- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md
+- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md
+- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx
 - app/pb_kits/playbook/pb_form_pill/docs/example.yml
@@ -2738,11 +2739,16 @@ files:
 - app/pb_kits/playbook/pb_timeline/_item.tsx
 - app/pb_kits/playbook/pb_timeline/_timeline.scss
 - app/pb_kits/playbook/pb_timeline/_timeline.tsx
+- app/pb_kits/playbook/pb_timeline/detail.html.erb
+- app/pb_kits/playbook/pb_timeline/detail.rb
 - app/pb_kits/playbook/pb_timeline/docs/_description.md
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_default.html.erb
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx
+- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb
+- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx
+- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md
@@ -2750,6 +2756,14 @@ files:
 - app/pb_kits/playbook/pb_timeline/docs/index.js
 - app/pb_kits/playbook/pb_timeline/item.html.erb
 - app/pb_kits/playbook/pb_timeline/item.rb
+- app/pb_kits/playbook/pb_timeline/label.html.erb
+- app/pb_kits/playbook/pb_timeline/label.rb
+- app/pb_kits/playbook/pb_timeline/step.html.erb
+- app/pb_kits/playbook/pb_timeline/step.rb
+- app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx
+- app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx
+- app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx
+- app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx
 - app/pb_kits/playbook/pb_timeline/timeline.html.erb
 - app/pb_kits/playbook/pb_timeline/timeline.rb
 - app/pb_kits/playbook/pb_timeline/timeline.test.js
@@ -3119,8 +3133,8 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-BtdghxJo.js
-- dist/chunks/_weekday_stacked-D1RoR5CN.js
+- dist/chunks/_typeahead-C-6MLSyC.js
+- dist/chunks/_weekday_stacked-CFhGhr9V.js
 - dist/chunks/lazysizes-B7xYodB-.js
 - dist/chunks/lib-D-mTv-kp.js
 - dist/chunks/pb_form_validation-BkWGwJsl.js

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

@@ -1 +0,0 @@
-For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.