From aaa8cd98d4cb0f217154b4661a9b929134c1d3ac Mon Sep 17 00:00:00 2001
From: Jelena <jelena.durovic@powerhrg.com>
Date: Mon, 31 Jan 2022 14:22:51 -0500
Subject: [PATCH] Fixed soze bug

---
 playbook/app/pb_kits/playbook/pb_image/_image.jsx    | 2 +-
 playbook/app/pb_kits/playbook/pb_image/_image.scss   | 6 +++---
 playbook/app/pb_kits/playbook/pb_image/image.rb      | 2 +-
 playbook/app/pb_kits/playbook/pb_image/image.test.js | 2 +-
 playbook/spec/pb_kits/playbook/kits/image_spec.rb    | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_image/_image.jsx b/playbook/app/pb_kits/playbook/pb_image/_image.jsx
index 8c4d0f19d4..bf933e5ec4 100755
--- a/playbook/app/pb_kits/playbook/pb_image/_image.jsx
+++ b/playbook/app/pb_kits/playbook/pb_image/_image.jsx
@@ -34,7 +34,7 @@ const Image = (props: ImageProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_image_kit', size),
+    buildCss('pb_image_kit', size ? `size_${size}` : null),
     'lazyload',
     transition,
     { rounded },
diff --git a/playbook/app/pb_kits/playbook/pb_image/_image.scss b/playbook/app/pb_kits/playbook/pb_image/_image.scss
index 3dce31ced7..95172d33b9 100755
--- a/playbook/app/pb_kits/playbook/pb_image/_image.scss
+++ b/playbook/app/pb_kits/playbook/pb_image/_image.scss
@@ -14,7 +14,7 @@ $image-sizes: (
   object-fit: cover;
 
   @each $name, $size in $image-sizes {
-    &[class*=_#{$name}] {
+    &[class*=size_#{$name}] {
       width: $size;
       height: $size;
       object-fit: cover;
@@ -35,7 +35,7 @@ $image-sizes: (
         transition: opacity 300ms ease-in;
       }
     }
-    
+
     &.blur {
       filter: blur(5px);
       &.lazyloaded {
@@ -44,7 +44,7 @@ $image-sizes: (
         transition: filter 300ms ease-in;
       }
     }
-    
+
     &.scale {
       opacity: 0;
       transform: scale(0.9);
diff --git a/playbook/app/pb_kits/playbook/pb_image/image.rb b/playbook/app/pb_kits/playbook/pb_image/image.rb
index 9cee82f151..0add8ceaeb 100755
--- a/playbook/app/pb_kits/playbook/pb_image/image.rb
+++ b/playbook/app/pb_kits/playbook/pb_image/image.rb
@@ -27,7 +27,7 @@ def rounded_class
       end
 
       def size_class
-        size == "none" ? nil : "_#{size}"
+        size == "none" ? nil : "_size_#{size}"
       end
 
       def transition_class
diff --git a/playbook/app/pb_kits/playbook/pb_image/image.test.js b/playbook/app/pb_kits/playbook/pb_image/image.test.js
index 29d086420e..e4278906e1 100644
--- a/playbook/app/pb_kits/playbook/pb_image/image.test.js
+++ b/playbook/app/pb_kits/playbook/pb_image/image.test.js
@@ -26,7 +26,7 @@ test('default classname', () => {
 
 test('size = xs', () => {
   const kit = renderKit(Image, props, { size: 'xs' })
-  expect(kit).toHaveClass('pb_image_kit_xs lazyload')
+  expect(kit).toHaveClass('pb_image_kit_size_xs lazyload')
 })
 
 test('transition = blur', () => {
diff --git a/playbook/spec/pb_kits/playbook/kits/image_spec.rb b/playbook/spec/pb_kits/playbook/kits/image_spec.rb
index 465542a286..c17c7663b6 100644
--- a/playbook/spec/pb_kits/playbook/kits/image_spec.rb
+++ b/playbook/spec/pb_kits/playbook/kits/image_spec.rb
@@ -15,7 +15,7 @@
   describe "#classname" do
     it "returns namespaced class name", :aggregate_failures do
       expect(subject.new({}).classname).to eq "pb_image_kit fade lazyload"
-      expect(subject.new({ size: "xs" }).classname).to eq "pb_image_kit_xs fade lazyload"
+      expect(subject.new({ size: "xs" }).classname).to eq "pb_image_kit_size_xs fade lazyload"
       expect(subject.new({ rounded: true }).classname).to eq "pb_image_kit fade lazyload rounded"
     end
   end