playbook_ui 17.1.0.pre.rc.3 → 17.1.0.pre.rc.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 02b1ea72561f3498a21c3cf0595c72212fd2e04ba63539688d7239ba7261d6f9
-  data.tar.gz: 412dec4b2daa3b7371785dd21701dec9872a188e36418ac13c969025f7c49812
+  metadata.gz: f2e1ded496c095c99e8ee8e474bb7609582dc8953949549e7e3fe5ef93e4de2b
+  data.tar.gz: df2ce1c6ae5c85a67a961aebe95b1981f836ad605fa6886411d8043d8f64fdcf
 SHA512:
-  metadata.gz: b4ba91e8ba28694803157c76d2cf93d1e204de9bebe3cd02c470889a38e6e38f78f57f8d0f9019c1e864f4d20fefd0873a051b7e6e90bf0124e1a93125b98d24
-  data.tar.gz: d1a34a60dbb2f1b2ce9125e08773d9176d23a4208d57dfbd0a35a1983df2920702fe17343cfed9510b82d1e7ceaf2d2207b91c9d6cb4a10945c364e7578405d4
+  metadata.gz: 4b367423e0711ecbca373b4d3e195ba2f36997bfb3fc00f3c7477eceb2fa0a4bb76ecbb6a169f09d3fe865a343f1eaedef1547f1a12539670d05c0474d531a99
+  data.tar.gz: 547658843ad64464e8a86c74447bf63b4746181c668042e6ad8027b57eb9b184a392bc954184d29449ce2e21c137db066f88f2f6a46f2b0c41a616fcab744a56

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -24,7 +24,6 @@ test('loads the given image url and name', () => {
 
   expect(kit).toHaveClass('pb_avatar_kit_size_md')
   expect(kit).toHaveAttribute('data-initials', initials)
-  expect(image).toHaveAttribute('data-src', imageUrl)
   expect(image).toHaveAttribute('src', imageUrl)
   expect(image).toHaveAttribute('alt', imageAlt)
 })

data/app/pb_kits/playbook/pb_background/_background.scss

@@ -30,30 +30,15 @@ $background_colors: map-merge($additional_colors, $merge_kits7);
   }
 
   &.fade {
-    opacity: 0;
-    &.lazyloaded {
-      opacity: 1;
-      transition: opacity 400ms ease-in;
-    }
+    animation: pb_background_fade 400ms ease-in forwards;
   }
 
   &.blur {
-    filter: blur(5px);
-    &.lazyloaded {
-      -webkit-filter: blur(0);
-      filter: blur(0);
-      transition: filter 400ms ease-in;
-    }
+    animation: pb_background_blur 400ms ease-in forwards;
   }
 
   &.scale {
-    opacity: 0;
-    transform: scale(0.9);
-    &.lazyloaded {
-      opacity: 1;
-      transform: scale(1);
-      transition: 700ms ease-in;
-    }
+    animation: pb_background_scale 700ms ease-in forwards;
   }
 
   &.imageoverlay {
@@ -82,3 +67,24 @@ $background_colors: map-merge($additional_colors, $merge_kits7);
     }
   }
 }
+
+@keyframes pb_background_fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes pb_background_blur {
+  from { filter: blur(5px); }
+  to { filter: blur(0); }
+}
+
+@keyframes pb_background_scale {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -127,7 +127,6 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   // Build CSS classes and styles using responsive values.
   const classes = classnames(
     buildCss('pb_background_kit'),
-    'lazyload',
     globalProps(props),
     transition,
     {

data/app/pb_kits/playbook/pb_background/background.rb

@@ -115,7 +115,7 @@ module Playbook
 
       def image_classname
         background_class = custom_color.present? ? "pb_background_custom_color" : "pb_background_color_#{background_color}"
-        background_class_lazy = image_url.present? ? " lazyload #{transition}" : ""
+        background_class_lazy = image_url.present? && transition.present? ? " #{transition}" : ""
         "#{background_class}#{background_class_lazy}"
       end
     end

data/app/pb_kits/playbook/pb_background/docs/_background_image.html.erb

@@ -51,8 +51,9 @@
 
         const updateTransition = (transition) => {
           const imageTransition = document.querySelector('.background-image')
-            imageTransition.classList.remove("fade", "blur", "scale", "lazyloaded")
-            imageTransition.classList.add(transition, "lazyload")   
+            imageTransition.classList.remove("fade", "blur", "scale")
+            void imageTransition.offsetWidth
+            imageTransition.classList.add(transition)
         } 
         (transitionDropdown).addEventListener('change', function() {
           updateTransition(option)

data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx

@@ -29,7 +29,7 @@ const BackgroundImage = (props) => {
     <>
       <Background
           alt="colorful background"
-          className="background lazyload"
+          className="background"
           imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
           transition={transition}
           {...props}

data/app/pb_kits/playbook/pb_background/docs/_background_image.md

@@ -1 +1 @@
-To add a lazyload on the background image simply use the `transition` prop and one of the three string options `"fade"`, `"blur"`, or `"scale"`.
+To add a transition on the background image, use the `transition` prop with `"fade"`, `"blur"`, or `"scale"`.

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx

@@ -9,7 +9,7 @@ const BackgroundOverlay = (props) => {
     <Background
         alt="colorful background"
         backgroundColor="category_21"
-        className="background lazyload"
+        className="background"
         imageOverlay="opacity_2"
         imageUrl="https://unsplash.it/500/400/?image=633"
         {...props}

data/app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx

@@ -6,14 +6,14 @@ const BackgroundResponsive = (props) => (
     <Background
         alt="colorful background"
         backgroundColor={{ xs: "primary", sm: "warning", md: "success", lg: "error", xl: "category_1" }}
-        className="background lazyload"
+        className="background"
         padding="xl"
         {...props}
     />
     <br/>
     <Background
         alt="colorful background"
-        className="background lazyload"
+        className="background"
         imageUrl={{
           xs: "https://unsplash.it/500/400/?image=633",
           sm: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",

data/app/pb_kits/playbook/pb_background/docs/_background_size.jsx

@@ -6,7 +6,7 @@ const BackgroundSize = (props) => (
     <Background
         alt="colorful background"
         backgroundSize="auto"
-        className="background lazyload"
+        className="background"
         imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
         padding="xl"
         {...props}
@@ -15,7 +15,7 @@ const BackgroundSize = (props) => (
     <Background
         alt="colorful background"
         backgroundSize="cover"
-        className="background lazyload"
+        className="background"
         imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
         padding="xl"
         {...props}
@@ -25,7 +25,7 @@ const BackgroundSize = (props) => (
         alt="colorful background"
         backgroundRepeat="no-repeat"
         backgroundSize="contain"
-        className="background lazyload"
+        className="background"
         imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
         padding="xl"
         {...props}

data/app/pb_kits/playbook/pb_image/_image.scss

@@ -23,30 +23,36 @@ $image-sizes: (
   }
 
   &.fade {
-    opacity: 0;
-    &.lazyloaded {
-      opacity: 1;
-      transition: opacity 300ms ease-in;
-    }
+    animation: pb_image_fade 300ms ease-in forwards;
   }
 
   &.blur {
-    filter: blur(5px);
-    &.lazyloaded {
-      -webkit-filter: blur(0);
-      filter: blur(0);
-      transition: filter 300ms ease-in;
-    }
+    animation: pb_image_blur 300ms ease-in forwards;
   }
 
   &.scale {
+    animation: pb_image_scale 700ms ease-in forwards;
+  }
+}
+
+@keyframes pb_image_fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes pb_image_blur {
+  from { filter: blur(5px); }
+  to { filter: blur(0); }
+}
+
+@keyframes pb_image_scale {
+  from {
     opacity: 0;
     transform: scale(0.9);
-    &.lazyloaded {
-      opacity: 1;
-      transform: scale(1);
-      transition: 700ms ease-in;
-    }
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
   }
 }
 

data/app/pb_kits/playbook/pb_image/_image.tsx

@@ -35,7 +35,6 @@ const Image = (props: ImageType): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
     buildCss('pb_image_kit', size ? `size_${size}` : null),
-    'lazyload',
     transition,
     { rounded },
     globalProps(props),
@@ -53,7 +52,6 @@ const Image = (props: ImageType): React.ReactElement => {
         {...htmlProps}
         alt={alt}
         className={classes}
-        data-src={url}
         id={id}
         onError={onError}
         src={url}

data/app/pb_kits/playbook/pb_image/docs/_playground.json

@@ -80,7 +80,7 @@
     },
     "blur_transition": {
       "presetName": "Blur Transition",
-      "message": "Use the transition prop to select the lazyload transition class: fade, blur, or scale.",
+      "message": "Use the transition prop to select fade, blur, or scale.",
       "type": "info"
     },
     "custom_error_handler": {

data/app/pb_kits/playbook/pb_image/docs/_playground.overrides.json

@@ -142,7 +142,7 @@
     },
     "blur_transition": {
       "presetName": "Blur Transition",
-      "message": "Use the transition prop to select the lazyload transition class: fade, blur, or scale.",
+      "message": "Use the transition prop to select fade, blur, or scale.",
       "type": "info"
     },
     "custom_error_handler": {

data/app/pb_kits/playbook/pb_image/docs/_transition_image.html.erb

@@ -42,9 +42,10 @@
         const updateTransition = (transition) => {
           const imageTransition = document.querySelector('.transition-image')
             imageTransition.removeAttribute("style")
-            imageTransition.classList.remove("fade", "blur", "scale", "lazyloaded")
-            imageTransition.classList.add(transition, "lazyload")
+            imageTransition.classList.remove("fade", "blur", "scale")
             imageTransition.src = "https://unsplash.it/500/400/?image=634"
+            void imageTransition.offsetWidth
+            imageTransition.classList.add(transition)
         }
       
         button.addEventListener('click', function() {

data/app/pb_kits/playbook/pb_image/docs/_transition_image.jsx

@@ -12,15 +12,14 @@ const TransitionImage = (props) => {
     url: '',
     transition: '',
   })
+  const [playKey, setPlayKey] = useState(0)
 
   const loadImage = () => {
-    document.querySelector('.image').classList.remove(transition, 'lazyloaded')
     setApply({
       url: 'https://unsplash.it/500/400/?image=634',
       transition: transition,
-    },
-    document.querySelector('.image').classList.add(transition, 'lazyload')
-    )
+    })
+    setPlayKey((key) => key + 1)
   }
 
   const handleTransition = ({ target }) => {
@@ -65,6 +64,7 @@ const TransitionImage = (props) => {
         <Image
             alt="picture of a misty forest"
             className="image"
+            key={playKey}
             transition={apply.transition}
             url={apply.url}
             {...props}

data/app/pb_kits/playbook/pb_image/image.html.erb

@@ -1,6 +1,6 @@
 <%= tag(:img,
     id: object.id,
-    data: object.data.merge(src: object.url),
+    data: object.data,
     class: object.classname,
     aria: object.aria,
     src: object.url,

data/app/pb_kits/playbook/pb_image/image.rb

@@ -17,7 +17,7 @@ module Playbook
       prop :url
 
       def classname
-        generate_classname("pb_image_kit#{size_class} #{transition_class} lazyload") + rounded_class
+        generate_classname("pb_image_kit#{size_class} #{transition_class}") + rounded_class
       end
 
     private

data/app/pb_kits/playbook/pb_image/image.test.js

@@ -21,20 +21,20 @@ test('alt attribute', () => {
 
 test('default classname', () => {
   const kit = renderKit(Image, props)
-  expect(kit).toHaveClass('pb_image_kit lazyload')
+  expect(kit).toHaveClass('pb_image_kit')
 })
 
 test('size = xs', () => {
   const kit = renderKit(Image, props, { size: 'xs' })
-  expect(kit).toHaveClass('pb_image_kit_size_xs lazyload')
+  expect(kit).toHaveClass('pb_image_kit_size_xs')
 })
 
 test('transition = blur', () => {
   const kit = renderKit(Image, props, { transition: 'blur' })
-  expect(kit).toHaveClass('pb_image_kit lazyload blur')
+  expect(kit).toHaveClass('pb_image_kit blur')
 })
 
 test('rounded = true', () => {
   const kit = renderKit(Image, props, { rounded: true })
-  expect(kit).toHaveClass('pb_image_kit lazyload rounded')
+  expect(kit).toHaveClass('pb_image_kit rounded')
 })