feat(blocksAntd): Skeleton add block property to button sekeleton.

packages/blocks/blocksAntd/demo/examples/Skeleton.yaml

@@ -4,54 +4,59 @@
   type: Skeleton
   properties:
     active: true
-- id: "properties.title boolean"
+- id: 'properties.title boolean'
   type: Skeleton
   properties:
     title: false
-- id: "properties.title object"
+- id: 'properties.title object'
   type: Skeleton
   properties:
     title:
       width: 250
-- id: "properties.avatar boolean"
+- id: 'properties.avatar boolean'
   type: Skeleton
   properties:
     avatar: true
-- id: "properties.avatar object circle"
+- id: 'properties.avatar object circle'
   type: Skeleton
   properties:
     avatar:
       shape: circle
       size: large
-- id: "properties.avatar object square"
+- id: 'properties.avatar object square'
   type: Skeleton
   properties:
     avatar:
       shape: square
       size: small
-- id: "properties.button object circle"
+- id: 'properties.button object circle'
   type: Skeleton
   properties:
     button:
       shape: circle
       size: large
-- id: "properties.button object round"
+- id: 'properties.button object round'
   type: Skeleton
   properties:
     button:
       shape: round
       size: small
-- id: "properties.paragraph boolean"
+- id: 'properties.block block true'
+  type: Skeleton
+  properties:
+    button:
+      block: true
+- id: 'properties.paragraph boolean'
   type: Skeleton
   properties:
     paragraph: false
-- id: "properties.paragraph object width all"
+- id: 'properties.paragraph object width all'
   type: Skeleton
   properties:
     paragraph:
       rows: 3
       width: 300
-- id: "properties.paragraph object width array"
+- id: 'properties.paragraph object width array'
   type: Skeleton
   properties:
     paragraph:

packages/blocks/blocksAntd/src/blocks/Skeleton/Skeleton.js

@@ -23,11 +23,12 @@ const SkeletonBlock = ({ blockId, events, properties, methods }) => {
     return (
       <Skeleton.Button
         id={blockId}
+        active={properties.active || properties.button.active}
+        block={properties.block || properties.button.block}
         className={methods.makeCssClass(properties.style)}
         events={events}
-        active={properties.active || properties.button.active}
-        size={properties.size || properties.button.size}
         shape={properties.shape || properties.button.shape}
+        size={properties.size || properties.button.size}
       />
     );
   }

packages/blocks/blocksAntd/src/blocks/Skeleton/Skeleton.json

@@ -80,6 +80,11 @@
                   "enum": ["small", "default", "large"],
                   "default": "large",
                   "description": "The size of the button."
+                },
+                "block": {
+                  "type": "boolean",
+                  "default": false,
+                  "description": "Option to fit button Skeleton width to its parent width."
                 }
               }
             }

packages/blocks/blocksAntd/tests/__snapshots__/Skeleton.mock.test.js.snap

@@ -114,6 +114,29 @@ exports[`Mock render - properties.avatar object square - value[0] - Input 1`] =
 
 exports[`Mock render - properties.avatar object square - value[0] - default 1`] = `Array []`;
 
+exports[`Mock render - properties.block block true - value[0] - Avatar 1`] = `Array []`;
+
+exports[`Mock render - properties.block block true - value[0] - Button 1`] = `
+Array [
+  Array [
+    Object {
+      "active": undefined,
+      "block": true,
+      "className": "{}",
+      "events": Object {},
+      "id": "properties.block block true",
+      "shape": undefined,
+      "size": undefined,
+    },
+    Object {},
+  ],
+]
+`;
+
+exports[`Mock render - properties.block block true - value[0] - Input 1`] = `Array []`;
+
+exports[`Mock render - properties.block block true - value[0] - default 1`] = `Array []`;
+
 exports[`Mock render - properties.button object circle - value[0] - Avatar 1`] = `Array []`;
 
 exports[`Mock render - properties.button object circle - value[0] - Button 1`] = `
@@ -121,6 +144,7 @@ Array [
   Array [
     Object {
       "active": undefined,
+      "block": undefined,
       "className": "{}",
       "events": Object {},
       "id": "properties.button object circle",
@@ -143,6 +167,7 @@ Array [
   Array [
     Object {
       "active": undefined,
+      "block": undefined,
       "className": "{}",
       "events": Object {},
       "id": "properties.button object round",

packages/blocks/blocksAntd/tests/__snapshots__/Skeleton.test.js.snap

@@ -121,6 +121,17 @@ exports[`Render properties.avatar object square - value[0] 1`] = `
 </div>
 `;
 
+exports[`Render properties.block block true - value[0] 1`] = `
+<div
+  className="ant-skeleton ant-skeleton-element ant-skeleton-block {}"
+>
+  <span
+    className="ant-skeleton-button {}"
+    style={Object {}}
+  />
+</div>
+`;
+
 exports[`Render properties.button object circle - value[0] 1`] = `
 <div
   className="ant-skeleton ant-skeleton-element {}"
@@ -343,6 +354,10 @@ exports[`Test Schema properties.avatar object square 1`] = `true`;
 
 exports[`Test Schema properties.avatar object square 2`] = `null`;
 
+exports[`Test Schema properties.block block true 1`] = `true`;
+
+exports[`Test Schema properties.block block true 2`] = `null`;
+
 exports[`Test Schema properties.button object circle 1`] = `true`;
 
 exports[`Test Schema properties.button object circle 2`] = `null`;