[PLAY-52]Remove div wrapping Image kit (#1737)

* Removed div and adjusted React docs * Tweaked pb image docs
powerhome · Feb 1, 2022 · 940dbfa · 940dbfa
1 parent 7ff56ff
commit 940dbfa
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 84 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_image/_image.jsx b/playbook/app/pb_kits/playbook/pb_image/_image.jsx
@@ -44,20 +44,18 @@ const Image = (props: ImageProps) => {
   const dataProps = buildDataProps(data)
 
   return (
-    <div>
-      <img
-          {...ariaProps}
-          {...dataProps}
-          alt={alt}
-          className={classes}
-          data-src={url}
-          id={id}
-          onError={onError}
-          rounded={+rounded}
-          src={url}
-          transition={transition}
-      />
-    </div>
+    <img
+        {...ariaProps}
+        {...dataProps}
+        alt={alt}
+        className={classes}
+        data-src={url}
+        id={id}
+        onError={onError}
+        rounded={+rounded}
+        src={url}
+        transition={transition}
+    />
   )
 }
 

diff --git a/playbook/app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb b/playbook/app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
@@ -49,6 +49,7 @@
   props: {
     alt: "This is the alt text!",
     on_error: "this.classList.add('image-error')",
+    padding_x: "none",
     rounded: true,
     size: "xs",
     url: "not_a_picture"

diff --git a/playbook/app/pb_kits/playbook/pb_image/docs/_default_image.jsx b/playbook/app/pb_kits/playbook/pb_image/docs/_default_image.jsx
@@ -5,41 +5,54 @@ import Image from '../_image'
 const DefaultImage = (props) => {
   return (
     <>
-      <Image
-          alt="picture of a misty forest"
-          size="xs"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt="picture of a misty forest"
-          size="sm"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt="picture of a misty forest"
-          size="md"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt="picture of a misty forest"
-          size="lg"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt="picture of a misty forest"
-          size="xl"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt="picture of a misty forest"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
+      <br />
+      <div>
+        <Image
+            alt="picture of a misty forest"
+            size="xs"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt="picture of a misty forest"
+            size="sm"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt="picture of a misty forest"
+            size="md"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt="picture of a misty forest"
+            size="lg"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt="picture of a misty forest"
+            size="xl"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt="picture of a misty forest"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
     </>
   )
 }

diff --git a/playbook/app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx b/playbook/app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx
@@ -5,41 +5,52 @@ import Image from '../_image'
 const RoundedImage = (props) => {
   return (
     <>
-      <Image
-          alt=""
-          rounded
-          size="xs"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt=""
-          rounded
-          size="sm"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt=""
-          rounded
-          size="md"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt=""
-          rounded
-          size="lg"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
-      <Image
-          alt=""
-          rounded
-          size="xl"
-          url="https://unsplash.it/500/400/?image=634"
-          {...props}
-      />
+      <br />
+      <div>
+        <Image
+            alt=""
+            rounded
+            size="xs"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt=""
+            rounded
+            size="sm"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt=""
+            rounded
+            size="md"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt=""
+            rounded
+            size="lg"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
+      <div>
+        <Image
+            alt=""
+            rounded
+            size="xl"
+            url="https://unsplash.it/500/400/?image=634"
+            {...props}
+        />
+      </div>
     </>
   )
 }