playbook_ui 14.6.2.pre.alpha.PLAY1613darkdatetimecolors4432 → 14.6.2.pre.alpha.PLAY15814348

data/lib/playbook/hover.rb

@@ -4,7 +4,6 @@ module Playbook
   module Hover
     def self.included(base)
       base.prop :hover
-      base.prop :group_hover, type: Playbook::Props::Boolean, default: false
     end
 
     def hover_options
@@ -39,8 +38,7 @@ module Playbook
 
     def hover_props
       selected_props = hover_options.keys.select { |sk| try(sk) }
-
-      return nil if selected_props.nil? && group_hover.nil?
+      return nil unless selected_props.present?
 
       responsive = selected_props.present? && try(selected_props.first).is_a?(::Hash)
       css = ""
@@ -60,7 +58,6 @@ module Playbook
         end
       end
 
-      css += "group_hover " if group_hover
       css.strip unless css.blank?
     end
   end

data/lib/playbook/kit_base.rb

@@ -82,6 +82,18 @@ 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.
@@ -110,34 +122,6 @@ 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
@@ -147,10 +131,8 @@ module Playbook
         class: classname,
         aria: aria,
       }
-
       inline_styles = dynamic_inline_props
-      options[:style] = inline_styles if inline_styles.present? && !html_options.key?(:style)
-
+      options[:style] = inline_styles if inline_styles.present?
       options
     end
 
@@ -166,8 +148,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.PLAY1613darkdatetimecolors4432"
+  VERSION = "14.6.2.pre.alpha.PLAY15814348"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.6.2.pre.alpha.PLAY1613darkdatetimecolors4432
+  version: 14.6.2.pre.alpha.PLAY15814348
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-11-08 00:00:00.000000000 Z
+date: 2024-11-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1385,8 +1385,7 @@ 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_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_truncated_text.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
@@ -2433,24 +2432,6 @@ files:
 - app/pb_kits/playbook/pb_selectable_list/selectable_list.test.js
 - app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb
 - app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb
-- app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading.scss
-- app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading.tsx
-- app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading_mixins.scss
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.md
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.md
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.md
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx
-- app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md
-- app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml
-- app/pb_kits/playbook/pb_skeleton_loading/docs/index.js
-- app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.html.erb
-- app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.rb
-- app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.test.jsx
 - app/pb_kits/playbook/pb_source/_source.scss
 - app/pb_kits/playbook/pb_source/_source.tsx
 - app/pb_kits/playbook/pb_source/docs/_description.md
@@ -2757,16 +2738,11 @@ 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
@@ -2774,14 +2750,6 @@ 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
@@ -3151,8 +3119,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-DhLic2Fe.js
-- dist/chunks/_weekday_stacked-Mx8TYP5I.js
+- dist/chunks/_typeahead-BtdghxJo.js
+- dist/chunks/_weekday_stacked-D1RoR5CN.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_rails.md

@@ -1,3 +0,0 @@
-For Form 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.
-
-__NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.

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

@@ -1 +0,0 @@
-For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

data/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading.scss

@@ -1,37 +0,0 @@
-@import 'skeleton_loading_mixins';
-
-.pb_skeleton_loading {
-    display: "flex";
-    flex-direction: "column";
-    height: 100%;
-    .color_default {
-        @include skeleton-shimmer($silver);
-    }
-    .color_white {
-        @include skeleton-shimmer-light($white);
-    }
-    .dark {
-        @include skeleton-shimmer($border_dark);
-    }
-    .gap_xxs {
-        margin-top: 4px;
-    }
-    .gap_xs {
-        margin-top: 8px;
-    }
-    .gap_sm {
-        margin-top: 16px;
-    }
-    .gap_md {
-        margin-top: 24px;
-    }
-    .gap_lg {
-        margin-top: 32px;
-    }
-    .gap_xl {
-        margin-top: 40px;
-    }
-    .gap_xxl {
-        margin-top: 48px;
-    }
-}

data/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading.tsx

@@ -1,67 +0,0 @@
-
-import React from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
-import { Sizes } from '../types'
-
-
-type SkeletonLoadingProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  id?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  height?: string,
-  width?: string,
-  borderRadius?: string,
-  gap?: Sizes | "none",
-  stack?: number,
-  color?: "default" | "white",
-  dark?: boolean,
-} & GlobalProps
-
-const SkeletonLoading = (props: SkeletonLoadingProps): React.ReactElement => {
-  const {
-    aria = {},
-    className,
-    data = {},
-    id,
-    htmlOptions = {},
-    height = "16px",
-    width = "100%",
-    borderRadius = "sm",
-    gap = "xxs",
-    stack = 1,
-    color = "default",
-    dark = false,
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
-  const skeletonContainerCss = classnames(buildCss('pb_skeleton_loading'), globalProps(props), className)
-  const gapClass = gap !== 'none' ? `gap_${gap}` : ''
-  const innerSkeletonCss = classnames(`border_radius_${borderRadius}`,`color_${color}`, dark && 'dark', )
-  const innerSizeStyle = { height, width }
-  
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={skeletonContainerCss}
-        id={id}
-    >
-      {Array.from({ length: Number(stack) }).map((_, index) => (
-        <div
-            className={classnames(buildCss('pb_skeleton_loading_item'), innerSkeletonCss, index > 0 && gapClass)}
-            key={index}
-            style={innerSizeStyle}
-        />
-      ))}
-    </div>
-  )
-}
-
-export default SkeletonLoading

data/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading_mixins.scss

@@ -1,40 +0,0 @@
-// Animation
-@keyframes wave {
-    0% {
-      background-position: -468px 0;
-    }
-    100% {
-      background-position: 468px 0;
-    }
-}
-
-// Shimmer animation and gradient mixin based on color
-@mixin skeleton-shimmer($color) {
-    background: $color;
-    background-color: $color;
-    background-image: linear-gradient(
-      to left,
-      $color 0%,
-      lighten($color, 1%) 50%,
-      lighten($color, 1%) 60%,
-      $color 80%,
-      $color 100%
-    );
-    background-repeat: no-repeat;
-    animation: wave 1.5s linear infinite forwards;
-}
-
-@mixin skeleton-shimmer-light($color) {
-    background: $color;
-    background-color: $color;
-    background-image: linear-gradient(
-      to left,
-      $color 0%,
-      darken($color, 1%) 50%,
-      darken($color, 1%) 60%,
-      $color 80%,
-      $color 100%
-    );
-    background-repeat: no-repeat;
-    animation: wave 1.5s linear infinite forwards;
-}

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { Flex, SkeletonLoading } from "playbook-ui"
-
-
-const SkeletonLoadingBorderRadius = (props) => (
-  <Flex justify="evenly">
-    <SkeletonLoading 
-        borderRadius="rounded" 
-        height="50px" 
-        width="100px" 
-        {...props}
-    />
-    <SkeletonLoading 
-        borderRadius="xl" 
-        height="50px" 
-        width="100px" 
-        {...props}
-    />
-    <SkeletonLoading 
-        borderRadius="lg" 
-        height="50px" 
-        width="100px" 
-        {...props}
-    />
-    <SkeletonLoading 
-        borderRadius="md" 
-        height="50px" 
-        width="100px" 
-        {...props}
-    />
-    <SkeletonLoading 
-        height="50px" 
-        width="100px" 
-        {...props}
-    />
-    <SkeletonLoading 
-        borderRadius="xs" 
-        height="50px" 
-        width="100px" 
-        {...props}
-    />
-    <SkeletonLoading 
-        borderRadius="none" 
-        height="50px" 
-        width="100px" 
-        {...props}
-    />
-  </Flex>
-)
-
-export default SkeletonLoadingBorderRadius

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.md

@@ -1 +0,0 @@
-The `borderRadius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import { Card, SkeletonLoading } from "playbook-ui"
-
-
-const SkeletonLoadingColor = (props) => (
-  <div>
-    <Card 
-        borderNone 
-        {...props}
-    >
-      <SkeletonLoading {...props}/>
-    </Card>
-    <Card 
-        background="light" 
-        borderNone 
-        {...props}
-    >
-      <SkeletonLoading 
-          color="white" 
-          {...props} 
-      />
-    </Card>
-  </div>
-)
-
-export default SkeletonLoadingColor

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.md

@@ -1 +0,0 @@
-The SkeletonLoading component has a default and a white `color` variant.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("skeleton_loading") %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx

@@ -1,11 +0,0 @@
-import React from 'react'
-import { SkeletonLoading } from "playbook-ui"
-
-
-const SkeletonLoadingDefault = (props) => (
-  <div>
-    <SkeletonLoading {...props} />
-  </div>
-)
-
-export default SkeletonLoadingDefault

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import { Card, SkeletonLoading } from "playbook-ui"
-
-
-const SkeletonLoadingHeightWidth = (props) => (
-  <div>
-    <SkeletonLoading
-        height="100px"
-        width="50%"
-        {...props}
-    />
-    <SkeletonLoading
-        gap="md"
-        height="20px"
-        marginY="md"
-        stack="3"
-        width="50px"
-        {...props}
-    />
-    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
-        marginBottom="md"
-        padding="none" 
-    >
-      <SkeletonLoading
-          borderRadius="md"
-          gap="xl"
-          height="50%"
-          width="300px"
-          {...props}
-      />
-    </Card>
-    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
-        padding="none"
-    >
-      <SkeletonLoading
-          borderRadius="md"
-          gap="xl"
-          height="30%"
-          stack="2"
-          width="70%"
-          {...props}
-      />
-    </Card>
-    <SkeletonLoading 
-        height="150px"
-        marginY="md"
-        width="150px"
-        {...props}
-    />
-    <SkeletonLoading 
-        borderRadius="rounded"
-        height="150px"
-        width="150px"
-        {...props}
-    />
-  </div>
-)
-
-export default SkeletonLoadingHeightWidth

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.md

@@ -1,3 +0,0 @@
-The `height` and `width` props accept pixel and percentage values. If using a percentage for `height`, the parent container must have a set height.
-
-Set the `height` and `width` props to the same value to make a square. A `rounded` borderRadius will make a square a circle. If using percentages to make a square, your parent container must also be a square.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import { SkeletonLoading } from "playbook-ui"
-
-
-const SkeletonLoadingLayout = (props) => (
-  <div>
-    <SkeletonLoading
-        stack="5"
-        {...props}
-    />
-    <SkeletonLoading
-        gap="md"
-        paddingTop="xl"
-        stack="3"
-        {...props}
-    />
-  </div>
-)
-
-export default SkeletonLoadingLayout

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md

@@ -1,3 +0,0 @@
-Use the `stack` and `gap` props in conjunction to layer multiple Skeleton loading bars on top of each other.
-
-`stack` accepts a number that correlates to the number of rows (1 is default), and `gap` accepts a portion of our [spacing props](https://playbook.powerapp.cloud/visual_guidelines/spacing) (`xxs` as default, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`) to set the pixel distance between each row. `gap` will not do anything if there is no corresponding `stack` prop set.

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

@@ -1,13 +0,0 @@
-examples:
-  
-  rails:
-  # - skeleton_loading_default: Default
-  
-  
-  react:
-  - skeleton_loading_default: Default
-  - skeleton_loading_color: Color
-  - skeleton_loading_layout: Layout
-  - skeleton_loading_border_radius: Border Radius
-  - skeleton_loading_height_width: Height & Width
-  

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

@@ -1,5 +0,0 @@
-export { default as SkeletonLoadingDefault } from './_skeleton_loading_default.jsx'
-export { default as SkeletonLoadingColor } from './_skeleton_loading_color.jsx'
-export { default as SkeletonLoadingLayout } from './_skeleton_loading_layout.jsx'
-export { default as SkeletonLoadingBorderRadius } from './_skeleton_loading_border_radius.jsx'
-export { default as SkeletonLoadingHeightWidth } from './_skeleton_loading_height_width.jsx'

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.html.erb

@@ -1,12 +0,0 @@
-<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
-<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
-<%= pb_content_tag(
-    # :div,
-    # aria: object.aria,
-    # class: object.classname,
-    # data: object.data,
-    # id: object.id,
-    # **combined_html_options
-) do %>
-  <span>SKELETON_LOADING CONTENT</span>
-<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.rb

@@ -1,8 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbSkeletonLoading
-    class SkeletonLoading < ::Playbook::KitBase
-    end
-  end
-end