playbook_ui 14.25.0.pre.alpha.testingcss9700 → 14.25.0.pre.alpha.testingcss9751

data/dist/reset.css

@@ -1,89 +1 @@
-/*=====================================
-Base colors should not be documented.
-Only document color use.
-
-Colors -----------------------------*/
-/* Specialty Gradient -----------------*/
-/* Interface colors -------------------*/
-/* Main colors ------------------------*/
-/*=====================================
-
-Background colors ------------------*/
-/* Card colors ------------------*/
-/* Active colors ----------------------*/
-/* Hover colors -----------------------*/
-/* Focus colors -----------------------*/
-/* Border colors ----------------------*/
-/* Shadow colors ----------------------*/
-/* Text colors ------------------------*/
-/* Data colors ------------------------*/
-/* Status colors ----------------------*/
-/* Link colors ------------------------*/
-/* Product colors ---------------------*/
-/* Category colors ---------------------*/
-/* CLEAN UP AND REMOVE */
-/* Headings */
-/* Standard Font Weights */
-/* Non_Standard Font Weights */
-/* Link Colors */
-/*=====================================
-Base colors should not be documented.
-Only document color use.
-
-Colors -----------------------------*/
-/* Specialty Gradient -----------------*/
-/* Interface colors -------------------*/
-/* Main colors ------------------------*/
-/*=====================================
-
-Background colors ------------------*/
-/* Card colors ------------------*/
-/* Active colors ----------------------*/
-/* Hover colors -----------------------*/
-/* Focus colors -----------------------*/
-/* Border colors ----------------------*/
-/* Shadow colors ----------------------*/
-/* Text colors ------------------------*/
-/* Data colors ------------------------*/
-/* Status colors ----------------------*/
-/* Link colors ------------------------*/
-/* Product colors ---------------------*/
-/* Category colors ---------------------*/
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-*:before, *:after {
-  box-sizing: border-box;
-}
-
-html {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  height: 100vh;
-  overflow-x: hidden;
-}
-
-body {
-  font-family: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif;
-  font-size: 15.5px;
-  line-height: 1.5;
-  background-color: #F3F7FB;
-  height: 100%;
-  letter-spacing: 0.003em;
-  font-weight: 400;
-  font-style: normal;
-  text-rendering: optimizeLegibility;
-  -moz-font-feature-settings: "liga" on;
-  color: #242B42;
-  margin: 0 !important;
-  padding: 0 !important;
-  box-sizing: border-box;
-  min-height: 100vh;
-  padding: 50px;
-}
-
-a {
-  text-decoration: none;
-  color: #0056CF;
-}
+*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:Power Centra,Helvetica Neue,Helvetica,Arial,sans_serif;font-size:15.5px;line-height:1.5;background-color:#f3f7fb;height:100%;letter-spacing:.003em;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242b42;margin:0!important;padding:0!important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056cf}

data/lib/playbook/classnames.rb

@@ -17,6 +17,8 @@ module Playbook
         min_width_props,
         max_width_props,
         gap_props,
+        column_gap_props,
+        row_gap_props,
         z_index_props,
         number_spacing_props,
         shadow_props,

data/lib/playbook/spacing.rb

@@ -4,6 +4,8 @@ module Playbook
   module Spacing
     def self.included(base)
       base.prop :gap
+      base.prop :column_gap
+      base.prop :row_gap
       base.prop :margin
       base.prop :margin_bottom
       base.prop :margin_left
@@ -63,6 +65,18 @@ module Playbook
       }
     end
 
+    def column_gap_options
+      {
+        column_gap: "column_gap",
+      }
+    end
+
+    def row_gap_options
+      {
+        row_gap: "row_gap",
+      }
+    end
+
     def spacing_options
       {
         margin: "m",
@@ -164,7 +178,45 @@ module Playbook
 
       selected_gap_props.map do |k|
         gap_value = send(k)
-        "gap_#{gap_value}" if gap_values.include? gap_value
+        if gap_value.is_a?(Hash)
+          gap_value.map do |media_size, gap_spacing_value|
+            "gap_#{media_size}_#{gap_spacing_value.underscore}" if gap_values.include?(gap_spacing_value.to_s)
+          end
+        elsif gap_values.include?(gap_value.to_s)
+          "gap_#{gap_value.underscore}"
+        end
+      end.compact.join(" ")
+    end
+
+    def column_gap_props
+      selected_column_gap_props = column_gap_options.keys.select { |sk| try(sk) }
+      return nil unless selected_column_gap_props.present?
+
+      selected_column_gap_props.map do |k|
+        column_gap_value = send(k)
+        if column_gap_value.is_a?(Hash)
+          column_gap_value.map do |media_size, column_gap_spacing_value|
+            "column_gap_#{media_size}_#{column_gap_spacing_value.underscore}" if gap_values.include?(column_gap_spacing_value.to_s)
+          end
+        elsif gap_values.include?(column_gap_value.to_s)
+          "column_gap_#{column_gap_value.underscore}"
+        end
+      end.compact.join(" ")
+    end
+
+    def row_gap_props
+      selected_row_gap_props = row_gap_options.keys.select { |sk| try(sk) }
+      return nil unless selected_row_gap_props.present?
+
+      selected_row_gap_props.map do |k|
+        row_gap_value = send(k)
+        if row_gap_value.is_a?(Hash)
+          row_gap_value.map do |media_size, row_gap_spacing_value|
+            "row_gap_#{media_size}_#{row_gap_spacing_value.underscore}" if gap_values.include?(row_gap_spacing_value.to_s)
+          end
+        elsif gap_values.include?(row_gap_value.to_s)
+          "row_gap_#{row_gap_value.underscore}"
+        end
       end.compact.join(" ")
     end
   end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.25.0"
-  VERSION = "14.25.0.pre.alpha.testingcss9700"
+  VERSION = "14.25.0.pre.alpha.testingcss9751"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.25.0.pre.alpha.testingcss9700
+  version: 14.25.0.pre.alpha.testingcss9751
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-08-18 00:00:00.000000000 Z
+date: 2025-08-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1336,35 +1336,6 @@ files:
 - app/pb_kits/playbook/pb_draggable/index.js
 - app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx
 - app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx
-- app/pb_kits/playbook/pb_drawer/_close_icon.tsx
-- app/pb_kits/playbook/pb_drawer/_drawer.scss
-- app/pb_kits/playbook/pb_drawer/_drawer.tsx
-- app/pb_kits/playbook/pb_drawer/_drawer_context.tsx
-- app/pb_kits/playbook/pb_drawer/context.ts
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.md
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx
-- app/pb_kits/playbook/pb_drawer/docs/example.yml
-- app/pb_kits/playbook/pb_drawer/docs/index.js
-- app/pb_kits/playbook/pb_drawer/drawer.html.erb
-- app/pb_kits/playbook/pb_drawer/drawer.rb
-- app/pb_kits/playbook/pb_drawer/drawer.test.jsx
-- app/pb_kits/playbook/pb_drawer/hooks/useBreakpoint.tsx
-- app/pb_kits/playbook/pb_drawer/hooks/useDrawerAnimation.tsx
-- app/pb_kits/playbook/pb_drawer/index.js
 - app/pb_kits/playbook/pb_dropdown/_dropdown.scss
 - app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
 - app/pb_kits/playbook/pb_dropdown/_dropdown_mixin.scss
@@ -1605,7 +1576,8 @@ files:
 - app/pb_kits/playbook/pb_flex/docs/_flex_default.md
 - app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb
 - app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
-- app/pb_kits/playbook/pb_flex/docs/_flex_gap.md
+- app/pb_kits/playbook/pb_flex/docs/_flex_gap_rails.md
+- app/pb_kits/playbook/pb_flex/docs/_flex_gap_react.md
 - app/pb_kits/playbook/pb_flex/docs/_flex_inline.html.erb
 - app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
 - app/pb_kits/playbook/pb_flex/docs/_flex_inline.md
@@ -3647,12 +3619,12 @@ 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/_line_graph-DPTwfQR-.js
-- dist/chunks/_typeahead-CEqlHw0H.js
-- dist/chunks/_weekday_stacked-D3dG14OB.js
-- dist/chunks/lazysizes-BUUj27EF.js
-- dist/chunks/lib-CIetbXpr.js
-- dist/chunks/pb_form_validation-D_g9rOE9.js
+- dist/chunks/_line_graph-Dv_ODxW3.js
+- dist/chunks/_typeahead-CD5RAaaP.js
+- dist/chunks/_weekday_stacked-Bv6tOPKC.js
+- dist/chunks/lazysizes-B7xYodB-.js
+- dist/chunks/lib-CY5ZPzic.js
+- dist/chunks/pb_form_validation-D3b0JKHH.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

data/app/pb_kits/playbook/pb_drawer/_close_icon.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import Icon from '../pb_icon/_icon'
-
-import { getAllIcons } from "../utilities/icons/allicons"
-
-type CloseIconProps = {
-  onClose: () => void,
-}
-
-export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
-  const { onClose } = props
-  const timesIcon = getAllIcons()["times"]
-  return (
-    <div
-        className="pb_dialog_close_icon"
-        onClick={onClose}
-    >
-      <Icon
-          className="svg-inline--fa"
-          customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
-          fixedWidth
-      />
-    </div>
-  )
-}

data/app/pb_kits/playbook/pb_drawer/_drawer.scss

@@ -1,381 +0,0 @@
-@import "../tokens/positioning";
-@import "../tokens/colors";
-@import "../pb_card/card_mixin";
-@import "../tokens/shadows";
-@import "../tokens/border_radius";
-@import "../tokens/spacing";
-@import "../tokens/animation-curves";
-@import "../tokens/positioning";
-
-$gutter: $space_lg;
-$xsmall: 64px;
-$small: 200px;
-$medium: 250px;
-$large: 300px;
-$xlarge: 365px;
-$animation-duration: .25s;
-$z-index: $z_7;
-
-@keyframes modalFadeInLeft {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes modalFadeOutLeft {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-100%);
-  }
-}
-
-@keyframes modalFadeInRight {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes modalFadeOutRight {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-
-@keyframes modalFadeIn {
-  from {
-    transform: translateY(-100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes modalFadeOut {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(-100%);
-  }
-}
-
-@keyframes overlayFade {
-  from {
-    opacity: 0;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes overlayFadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes modalFadeDownIn {
-  from {
-    transform: translateY(-100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes modalFadeDownOut {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(-100%);
-  }
-}
-
-@keyframes modalFadeUpIn {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes modalFadeUpOut {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(100%);
-  }
-}
-
-body.PBDrawer__Body--open {
-  transition: margin-left $animation-duration ease-in, margin-right $animation-duration ease-in;
-}
-
-body.PBDrawer__Body--close {
-  transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
-}
-
-.pb_drawer_lg_left .pb_drawer {
-  transform: translateX(-100%);
-}
-
-.pb_drawer_lg_right .pb_drawer {
-  transform: translateX(100%);
-}
-
-.pb_drawer.pb_drawer_after_open {
-  pointer-events: auto;
-  transform: translate3d(0, 0, 0);
-}
-
-// Drawer Styles
-.pb_drawer {
-  background-color: $white;
-  z-index: $z-index;
-  border: 0;
-  height: 100%;
-  overflow: auto;
-  animation-duration: $animation-duration;
-  outline: none;
-
- &.pb_drawer_within_element_rails {
-    position: relative;
-    width: 100%;
-    display: block;
-    background-color: $white;
-    overflow: hidden;
-
-    // Use max-height for a smooth accordion-like animation
-    max-height: 0;
-    transition: max-height $animation-duration ease-in-out;
-    z-index: 1;
-
-    &.open {
-      max-height: 1000px;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: inherit;
-      z-index: -1;
-    }
-  }
-
-  &.pb_drawer_within_element {
-    position: relative;
-    width: 100%;
-    display: block;
-    background-color: $white;
-    overflow: hidden;
-    transition: height $animation-duration ease-in-out;
-    height: var(--drawer-height);
-    z-index: 1;
-
-    &.pb_drawer_before_close {
-      height: 0;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: inherit;
-      z-index: -1;
-    }
-  }
-
-  .toggle-content.is-visible {
-    display: block;
-    height: auto;
-  }
-
-  .drawer {
-    position: sticky;
-    will-change: transform;
-    top: 0;
-    background-color: $white;
-    z-index: $z_9;
-  }
-
-  &[class*="_left"] {
-    animation-name: modalFadeInLeft;
-  }
-
-  &[class*="_left"][class*="_before_close"] {
-    animation-name: modalFadeOutLeft;
-    animation-duration: $animation-duration;
-    transform: translateX(-100%);
-  }
-
-  &[class*="_right"] {
-    animation-name: modalFadeInRight;
-    justify-content: flex-end;
-  }
-
-  &[class*="_right"][class*="_before_close"] {
-    animation-name: modalFadeOutRight;
-    animation-duration: $animation-duration;
-    transform: translateX(100%);
-  }
-
-  &[class*="_bottom"] {
-    animation: none;
-    transform: none;
-  }
-
-  &[class*="_bottom"][class*="_before_close"] {
-    animation: none;
-    transform: none;
-  }
-
-  &[class*="_top"] {
-    animation-name: modalFadeUpIn;
-  }
-
-  &[class*="_top"][class*="_before_close"] {
-    animation-name: modalFadeUpOut;
-    animation-duration: $animation-duration;
-  }
-
-
-  &[class*="_xs_"] {
-    width: $xsmall;
-    max-width: $xsmall;
-  }
-
-  &[class*="_sm_"] {
-    width: $small;
-    max-width: $small;
-  }
-
-  &[class*="_md_"] {
-    width: $medium;
-    max-width: $medium;
-  }
-
-  &[class*="_lg_"] {
-    width: $large;
-    max-width: $large; 
-  }
-
-  &[class*="_xl_"] {
-    width: $xlarge;
-    max-width: $xlarge; 
-  }
-
-  &[class*="_full_"] {
-    width: 100%;
-    max-width: 100%; 
-  }
-
-  &.drawer_border-full {
-    box-shadow: none;
-    border: 2px solid #f3f7fb;
-  }
-
-  &.drawer_border-right {
-    border-right: 2px solid #f3f7fb;
-  }
-
-  &.drawer_border-left {
-    border-left: 2px solid #f3f7fb;
-  }
-
-  &.no-background {
-    background-color: transparent; 
-  }
-
-  &_close_icon {
-    cursor: pointer;
-  }
-
-  &_overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    background-color: rgba($bg_dark, $opacity_4);
-    z-index: $z-index;
-    animation: overlayFade $animation-duration ease-in-out forwards;
-    
-    &[class*="_left"]{
-      justify-content: flex-start;
-    }
-
-    &[class*="_center"]{
-      justify-content: center;
-    }
-
-    &[class*="_right"]{
-      justify-content: flex-end;
-    }
-    
-    &_before_close {
-      animation: overlayFadeOut $animation-duration ease-in-out forwards;
-      opacity: 0;
-      // height: 0;
-    }
-  }
-
-  &_no_overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    z-index: $z-index;
-    opacity: 1;
-    pointer-events: none;
-
-    &[class*="_right"]{
-      justify-content: flex-end;
-    }
-
-    &[class*="_left"]{
-      justify-content: flex-start;
-    }
-
-    &[class*="_center"]{
-      justify-content: center;
-    }
-
-    &_before_close {
-      height: 0;
-    }
-  }
-
-
-  &.pb_drawer_before_close {
-    transform: translateX(-100%);
-  }
-}