playbook_ui 14.4.0.pre.alpha.PLAY1486highchartscssdrivenPOC3923 → 14.4.0.pre.alpha.PLAY1529removefaeasy3876

data/lib/playbook/pagination_renderer.rb

@@ -31,7 +31,7 @@ module Playbook
         num = @collection.current_page > 1 && @collection.current_page - 1
         previous_or_next_page(
           num,
-          "<svg xmlns='http://www.w3.org/2000/svg' width='auto' height='auto' viewBox='0 0 30 24' fill='none' class='pb_custom_icon svg-inline--fa pb_icon_kit svg_fw svg_xs' id='' data='{}' aria='{:label=>&quot;away&quot;}' tabindex=''><path d='M8.20312 11.2031L17.2031 2.25C17.625 1.78125 18.3281 1.78125 18.7969 2.25C19.2188 2.67188 19.2188 3.375 18.7969 3.79688L10.5469 12L18.75 20.25C19.2188 20.6719 19.2188 21.375 18.75 21.7969C18.3281 22.2656 17.625 22.2656 17.2031 21.7969L8.20312 12.7969C7.73438 12.375 7.73438 11.6719 8.20312 11.2031Z' fill='currentColor'></path></svg>",
+          "<i> pb_rails('icon', props: { icon: 'chevron-left', fixed_width: true, size: 'xs' }) </i>",
           "prev"
         )
       end
@@ -40,7 +40,7 @@ module Playbook
         num = @collection.current_page < @collection.total_pages && @collection.current_page + 1
         previous_or_next_page(
           num,
-          "<svg xmlns='http://www.w3.org/2000/svg' width='auto' height='auto' viewBox='0 0 30 24' fill='none' class='pb_custom_icon svg-inline--fa pb_icon_kit svg_fw svg_xs' id='' data='{}' aria='{:label=>&quot;away&quot;}' tabindex=''><path d='M21.7969 11.2031C22.2188 11.6719 22.2188 12.375 21.7969 12.7969L12.7969 21.7969C12.3281 22.2656 11.625 22.2656 11.2031 21.7969C10.7344 21.375 10.7344 20.6719 11.2031 20.25L19.4062 12.0469L11.2031 3.79688C10.7344 3.375 10.7344 2.67188 11.2031 2.25C11.625 1.78125 12.3281 1.78125 12.75 2.25L21.7969 11.2031Z' fill='currentColor'></path></svg>",
+          "<i> pb_rails('icon', props: { icon: 'chevron-right', fixed_width: true, size: 'xs' }) </i>",
           "next"
         )
       end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.4.0"
-  VERSION = "14.4.0.pre.alpha.PLAY1486highchartscssdrivenPOC3923"
+  VERSION = "14.4.0.pre.alpha.PLAY1529removefaeasy3876"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.4.0.pre.alpha.PLAY1486highchartscssdrivenPOC3923
+  version: 14.4.0.pre.alpha.PLAY1529removefaeasy3876
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-10-01 00:00:00.000000000 Z
+date: 2024-09-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1106,21 +1106,6 @@ files:
 - app/pb_kits/playbook/pb_draggable/draggable.test.jsx
 - 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/docs/_drawer_borders.jsx
-- 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_overlay.jsx
-- 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_dropdown/_dropdown.scss
 - app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
 - app/pb_kits/playbook/pb_dropdown/context/index.tsx
@@ -3070,11 +3055,11 @@ 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-BywvWGAm.js
-- dist/chunks/_weekday_stacked-5OGZKZeo.js
+- dist/chunks/_typeahead-DnWoIeq6.js
+- dist/chunks/_weekday_stacked-C5Ls9JLc.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-DMOmCoAX.js
-- dist/chunks/pb_form_validation-Dna2I7fw.js
+- dist/chunks/lib-CEpcaI8y.js
+- dist/chunks/pb_form_validation-D9zkwt2b.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,465 +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";
-
-// Drawer animations
-// Drawer animations for fading in and out from the center
-@keyframes modalFadeIn {
-  from {
-    transform: translate3d(0, -100%, 0);
-    opacity: 0;
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes modalFadeOut {
-  from {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  to {
-    transform: translate3d(0, -50%, 0);
-    opacity: 0;
-  }
-}
-
-// Drawer animations for fading in and out from the right side
-
-@keyframes overlayFade {
-  from {
-    opacity: 0;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes overlayFadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-body.ReactModal__Body--open {
-  transition: margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-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 {
-  transform: translateX(0); /* Slide in */
-}
-// Drawer Styles
-.pb_drawer {
-
-  // Local Variables
-  $gutter: $space_lg;
-  $xsmall: 64px;
-  $small: 200px;
-  $medium: 250px;
-  $large: 300px;
-  $xlarge: 365px;
-  $animation-duration: .2s;
-  $z-index: 100;
-  $opacity_visible: 1;
-  $opacity_hidden: 0;
-
-  .drawer {
-    position: sticky;
-    top: 0;
-    background-color: $white;
-    z-index: $z_8;
-  }
-
-  // @include pb_card;
-  background-color: $white;
-  border: 0;
-  box-shadow: $shadow_deepest; // border class here
-  max-height: calc(100vh - #{$gutter * 2});
-  max-width: calc(100vw - #{$gutter * 2});
-  overflow: auto;
-  animation-name: modalFadeIn;
-  animation-duration: $animation-duration;
-  outline: none;
-  animation-timing-function: $easeInOutQuint;
-  transition: transform 0.3s ease-in-out;
-
-  &.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;
-  }
-
-  &[class*="_left"] {
-    animation-name: modalFadeInLeft;
-    &[class*="_before_close"] {
-      animation-name: modalFadeOutLeft;
-      animation-duration: $animation-duration;
-      opacity: $opacity_hidden;
-    }
-  }
-
-  &[class*="_right"] {
-    animation-name: modalFadeInRight;
-    &[class*="_before_close"] {
-      animation-name: modalFadeOutRight;
-      animation-duration: $animation-duration;
-      opacity: $opacity_hidden;
-    }
-  }
-
-  &[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; 
-  }
-
-  &_body_open {
-    overflow: hidden;
-  }
-
-  &_after_open {
-    opacity: $opacity_visible;
-  }
-
-  &.no-background {
-    background-color: transparent; 
-  }
-
-  &[class*="_before_close"] {
-    animation-name: modalFadeOut;
-    animation-duration: $animation-duration;
-    opacity: $opacity_hidden;
-  }
-
-  &_close_icon {
-    cursor: pointer;
-  }
-
-  &_overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba($bg_dark, $opacity_4);
-    z-index: $z-index;
-    animation-name: overlayFade;
-    animation-duration: $animation-duration;
-
-    &_after_open {
-      opacity: $opacity_visible;
-    }
-    &_before_close {
-      animation-name: overlayFadeOut;
-      animation-duration: $animation-duration;
-      opacity: $opacity_hidden;
-    }
-    &[class*="full_height"] {
-      &[class*="_left"]{
-        justify-content: flex-start;
-      }
-
-      &[class*="_center"]{
-        justify-content: center;
-      }
-
-      &[class*="_right"]{
-        justify-content: flex-end;
-      }
-
-      .pb_drawer {
-        height: 100%;
-        max-height: 100%;
-        max-width: none;
-        // This empty div only has height when drawer is full height
-        // Fix for drawer body content disappearing behind sticky footer
-        .drawer-pseudo-footer {
-          height: $space_xl * 2;
-        }
-        .drawer_footer {
-          position: fixed;
-          bottom: 0;
-          background-color: $white;
-          max-width: 100%;
-        }
-        &[class*="_xs_"] {
-          width: $xsmall;
-          .dialog_footer {
-            width: $xsmall;
-          }
-        }
-        &[class*="_sm_"] {
-          width: $small;
-          .dialog_footer {
-            width: $small;
-          }
-        }
-        &[class*="_md_"] {
-          width: $medium;
-          .dialog_footer {
-            width: $medium;
-          }
-        }
-        &[class*="_lg_"] {
-          width: $large;
-          .dialog_footer {
-            width: $large;
-          }
-        }
-        &[class*="_xl_"] {
-          width: $xlarge;
-          .dialog_footer {
-          width: $xlarge;
-        }
-      }
-    }
-  }
-}
-
-  &_no_overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: $z-index;
-    animation-name: overlayFade;
-    animation-duration: $animation-duration;
-    overflow: none; /* Ensure body remains scrollable */
-    pointer-events: none; /* Allow interaction inside the drawer itself */
-
-    body.ReactModal__Body--open {
-      overflow: none; /* Ensure body remains scrollable */
-      pointer-events: none; /* Allow interaction inside the drawer itself */
-    }
-
-    &_after_open {
-      opacity: $opacity_visible;
-      overflow: none; /* Ensure body remains scrollable */
-      pointer-events: none; /* Allow interaction inside the drawer itself */
-    }
-    &_before_close {
-      animation-name: overlayFadeOut;
-      animation-duration: $animation-duration;
-      opacity: $opacity_hidden;
-    }
-    &[class*="full_height"] {
-      &[class*="_left"]{
-        justify-content: flex-start;
-      }
-
-      &[class*="_center"]{
-        justify-content: center;
-      }
-
-      &[class*="_right"]{
-        justify-content: flex-end;
-      }
-
-      .pb_drawer {
-        height: 100%;
-        max-height: 100%;
-        max-width: none;
-        // This empty div only has height when drawer is full height
-        // Fix for drawer body content disappearing behind sticky footer
-        .drawer-pseudo-footer {
-          height: $space_xl * 2;
-        }
-        .drawer_footer {
-          position: fixed;
-          bottom: 0;
-          background-color: $white;
-          max-width: 100%;
-        }
-        &[class*="_xs_"] {
-          width: $xsmall;
-          .dialog_footer {
-            width: $xsmall;
-          }
-        }
-        &[class*="_sm_"] {
-          width: $small;
-          .dialog_footer {
-            width: $small;
-          }
-        }
-        &[class*="_md_"] {
-          width: $medium;
-          .dialog_footer {
-            width: $medium;
-          }
-        }
-        &[class*="_lg_"] {
-          width: $large;
-          .dialog_footer {
-            width: $large;
-          }
-        }
-        &[class*="_xl_"] {
-          width: $xlarge;
-          .dialog_footer {
-          width: $xlarge;
-        }
-      }
-    }
-  }
-}
-
-[class*="drawer_body"] {
-  padding: $space_sm;
-}
-
-[class*="drawer_header"] {
-  padding: $space_sm;
-}
-
-[class*="drawer_footer"] {
-  padding: $space_sm;
-}
-
-//styles specific to rails version of kit
-// rails version has own wrapper because of the way the overlay functions for the HTML drawer used to create this
-.pb_drawer_wrapper_rails {
-  $medium: 500px;
-  $large: 800px;
-  $xlarge: 1150px;
-
-  &[class*="full_height"] {
-    &[class*="_left"]{
-      .pb_drawer_rails {
-        margin: unset !important;
-        margin-right: auto !important;
-      }
-    }
-
-    &[class*="_center"]{
-      justify-content: center;
-    }
-
-    &[class*="_right"]{
-      .pb_drawer_rails {
-        margin: unset !important;
-        margin-left: auto !important;
-      }
-    }
-
-    .pb_drawer {
-      height: 100% !important;
-      max-height: 100% !important;
-      max-width: 100%;
-      // This empty div only has height when drawer is full height.
-      // Fix for drawer body content disappearing behind sticky footer
-      .drawer-pseudo-footer {
-        height: $space_xl * 2;
-      }
-      .drawer_footer {
-        position:fixed;
-        bottom: 0;
-        background-color: $white;
-        max-width: 100%;
-      }
-      &[class*="_sm"] {
-        width: $medium;
-        .drawer_footer {
-          width: $medium;
-        }
-      }
-      &[class*="_md"] {
-        width: $large;
-        .drawer_footer {
-          width: $large;
-        }
-      }
-      &[class*="_lg"] {
-        width: $xlarge;
-        .drawer_footer {
-          width: $xlarge;
-        }
-      }
-    }
-  }
-
-  // Fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE.
-  // Conflicts were only apparent in nitro, not in playbook local env
-  .pb_drawer_rails {
-    position: fixed !important;
-    top: 0 !important;
-    padding: unset !important;
-    margin: auto;
-
-  }
-
-  // Overlay for rails kit
-  drawer::backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba($bg_dark, $opacity_4);
-    animation-name: overlayFade;
-    animation-duration: 0.2s;
-  }
-
-  .drawer-button-class {
-    background-color: unset;
-    border: none;
-    cursor: pointer;
-  }
-}
-}