RubyGems - playbook_ui_docs - Versions diffs - 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469 - Mend

playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (226) hide show

data/app/pb_kits/playbook/pb_online_status/docs/_playground.overrides.json CHANGED Viewed

@@ -15,26 +15,30 @@
       "props": { "status": "online", "size": "md" }
     },
     {
-      "name": "Offline",
-      "props": { "status": "offline", "size": "md" }
-    },
-    {
-      "name": "Away",
-      "props": { "status": "away", "size": "md" }
-    },
-    {
-      "name": "Online · sm",
+      "name": "Size sm",
       "props": { "status": "online", "size": "sm" }
     },
-    {
-      "name": "Online · lg",
-      "props": { "status": "online", "size": "lg" }
-    },
     {
       "name": "No border",
       "props": { "status": "online", "size": "md", "noBorder": true }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "status": {
+      "when": {},
+      "message": "status controls the dot color; semantic statuses like online, offline, error, warning, success, info, primary, and neutral are supported.",
+      "type": "info"
+    },
+    "size_sm": {
+      "presetName": "Size sm",
+      "message": "size changes the rendered indicator diameter. Use sm, md, or lg.",
+      "type": "info"
+    },
+    "no_border": {
+      "presetName": "No border",
+      "message": "noBorder removes the white ring around the status indicator.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_overlay/docs/_playground.json CHANGED Viewed

@@ -4,35 +4,154 @@
   "defaults": {
     "color": "card_light",
     "dynamic": false,
-    "scrollBarNone": false
+    "scrollBarNone": false,
+    "gradient": true,
+    "layout": {
+      "bottom": "full"
+    },
+    "opacity": "opacity_6",
+    "fullScreen": false
   },
   "children": {
     "editable": true,
-    "default": "Overlay content"
+    "default": "<Card padding=\"md\">\n  <Body text=\"Overlay content\" />\n</Card>"
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Appearance",
       "props": [
         "color",
-        "dynamic",
-        "gradient",
-        "position",
-        "size",
-        "scrollBarNone",
-        "fullScreen",
+        "opacity",
+        "gradient"
+      ]
+    },
+    {
+      "name": "Layout",
+      "props": [
         "layout",
-        "opacity"
+        "fullScreen",
+        "scrollBarNone"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {},
-      "children": "Overlay content"
+      "props": {
+        "color": "card_light",
+        "layout": {
+          "bottom": "full"
+        }
+      },
+      "children": "<Card padding=\"md\">\n  <Body text=\"Overlay content\" />\n</Card>"
+    },
+    {
+      "name": "Black Gradient",
+      "structureMode": "standard",
+      "props": {
+        "color": "black",
+        "opacity": "opacity_6",
+        "layout": {
+          "bottom": "full"
+        }
+      },
+      "children": "<Background\n    alt=\"Colorful abstract background\"\n    backgroundPosition=\"center\"\n    imageUrl=\"https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80\"\n    minHeight=\"320px\"\n    width=\"100%\"\n>\n  <Flex minHeight=\"320px\" orientation=\"column\" padding=\"lg\" vertical=\"center\">\n    <Title dark size={3} text=\"Gradient Overlay\" />\n    <Body color=\"light\" text=\"Full-width Background kit image with Overlay gradient.\" />\n  </Flex>\n</Background>"
+    },
+    {
+      "name": "No Gradient",
+      "structureMode": "standard",
+      "props": {
+        "color": "black",
+        "gradient": false,
+        "opacity": "opacity_4",
+        "layout": {
+          "bottom": "full"
+        }
+      },
+      "children": "<Background\n    alt=\"Colorful abstract background\"\n    backgroundPosition=\"center\"\n    imageUrl=\"https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80\"\n    minHeight=\"320px\"\n    width=\"100%\"\n>\n  <Flex minHeight=\"320px\" orientation=\"column\" padding=\"lg\" vertical=\"center\">\n    <Title dark size={3} text=\"Flat Overlay\" />\n    <Body color=\"light\" text=\"gradient={false} removes the fade treatment.\" />\n  </Flex>\n</Background>"
+    },
+    {
+      "name": "Horizontal",
+      "props": {
+        "color": "card_light",
+        "layout": {
+          "x": "xl"
+        }
+      },
+      "children": "<Flex columnGap=\"lg\" orientation=\"row\" overflowX=\"auto\">\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 1'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 2'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 3'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 4'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 5'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 6'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 7'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 8'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 9'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 10'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 11'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 12'}</Card></FlexItem>\n</Flex>"
+    },
+    {
+      "name": "Full Screen",
+      "structureMode": "fullscreen",
+      "props": {
+        "color": "bg_dark",
+        "fullScreen": true,
+        "gradient": false,
+        "opacity": "opacity_4"
+      },
+      "children": "<FixedConfirmationToast\n    closeable\n    horizontal=\"center\"\n    onClose={handleClose}\n    open={open}\n    status=\"tip\"\n    text=\"Fullscreen overlay content\"\n    vertical=\"top\"\n/>"
+    },
+    {
+      "name": "Hide Scrollbar",
+      "props": {
+        "color": "card_light",
+        "layout": {
+          "x": "xl"
+        },
+        "scrollBarNone": true
+      },
+      "children": "<Flex columnGap=\"lg\" orientation=\"row\" overflowX=\"auto\">\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 1'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 2'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 3'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 4'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 5'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 6'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 7'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 8'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 9'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 10'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 11'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 12'}</Card></FlexItem>\n</Flex>"
     }
   ],
-  "conditionals": {},
-  "hints": {}
+  "conditionals": {
+    "opacity": {
+      "requires": {
+        "gradient": false
+      }
+    }
+  },
+  "hints": {
+    "layout": {
+      "when": {},
+      "message": "layout controls overlay direction and size. Use keys like bottom, top, x, or y with token values like full, xl, or percentages.",
+      "type": "info"
+    },
+    "gradient": {
+      "presetName": "No Gradient",
+      "message": "gradient={false} removes the default gradient treatment and uses a flatter color overlay.",
+      "type": "info"
+    },
+    "fullscreen": {
+      "presetName": "Full Screen",
+      "message": "fullScreen changes the overlay to a fixed viewport layer; pair it with content that can close or explain the state.",
+      "type": "info"
+    },
+    "scrollbar": {
+      "presetName": "Hide Scrollbar",
+      "message": "scrollBarNone hides the scrollbar while preserving scrollable overflow content.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "standard",
+    "modes": {
+      "standard": {
+        "label": "Standard",
+        "template": "<Overlay{{props}}>\n  {{children}}\n</Overlay>"
+      },
+      "fullscreen": {
+        "label": "Fullscreen",
+        "template": "<>\n  <Button\n      onClick={() => setOpen(true)}\n      text=\"Open Fullscreen Overlay\"\n      variant=\"secondary\"\n  />\n  {open && (\n    <Overlay{{props}}>\n      {{children}}\n    </Overlay>\n  )}\n</>",
+        "wrapper": "const FullscreenOverlayExample = () => {\n  const [open, setOpen] = useState(true)\n  const handleClose = () => setOpen(false)\n\n  return {{component}}\n}\n\n<FullscreenOverlayExample />",
+        "externalImports": [
+          "import React, { useState } from 'react'"
+        ]
+      }
+    }
+  },
+  "hiddenProps": [
+    "dynamic",
+    "position",
+    "size"
+  ]
 }

data/app/pb_kits/playbook/pb_overlay/docs/_playground.overrides.json ADDED Viewed

@@ -0,0 +1,154 @@
+{
+  "structureModes": {
+    "default": "standard",
+    "modes": {
+      "standard": {
+        "label": "Standard",
+        "template": "<Overlay{{props}}>\n  {{children}}\n</Overlay>"
+      },
+      "fullscreen": {
+        "label": "Fullscreen",
+        "template": "<>\n  <Button\n      onClick={() => setOpen(true)}\n      text=\"Open Fullscreen Overlay\"\n      variant=\"secondary\"\n  />\n  {open && (\n    <Overlay{{props}}>\n      {{children}}\n    </Overlay>\n  )}\n</>",
+        "wrapper": "const FullscreenOverlayExample = () => {\n  const [open, setOpen] = useState(true)\n  const handleClose = () => setOpen(false)\n\n  return {{component}}\n}\n\n<FullscreenOverlayExample />",
+        "externalImports": [
+          "import React, { useState } from 'react'"
+        ]
+      }
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": "<Card padding=\"md\">\n  <Body text=\"Overlay content\" />\n</Card>"
+  },
+  "hiddenProps": [
+    "dynamic",
+    "position",
+    "size"
+  ],
+  "defaults": {
+    "color": "card_light",
+    "gradient": true,
+    "layout": {
+      "bottom": "full"
+    },
+    "opacity": "opacity_6",
+    "scrollBarNone": false,
+    "fullScreen": false
+  },
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": [
+        "color",
+        "opacity",
+        "gradient"
+      ]
+    },
+    {
+      "name": "Layout",
+      "props": [
+        "layout",
+        "fullScreen",
+        "scrollBarNone"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "color": "card_light",
+        "layout": {
+          "bottom": "full"
+        }
+      },
+      "children": "<Card padding=\"md\">\n  <Body text=\"Overlay content\" />\n</Card>"
+    },
+    {
+      "name": "Black Gradient",
+      "structureMode": "standard",
+      "props": {
+        "color": "black",
+        "opacity": "opacity_6",
+        "layout": {
+          "bottom": "full"
+        }
+      },
+      "children": "<Background\n    alt=\"Colorful abstract background\"\n    backgroundPosition=\"center\"\n    imageUrl=\"https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80\"\n    minHeight=\"320px\"\n    width=\"100%\"\n>\n  <Flex minHeight=\"320px\" orientation=\"column\" padding=\"lg\" vertical=\"center\">\n    <Title dark size={3} text=\"Gradient Overlay\" />\n    <Body color=\"light\" text=\"Full-width Background kit image with Overlay gradient.\" />\n  </Flex>\n</Background>"
+    },
+    {
+      "name": "No Gradient",
+      "structureMode": "standard",
+      "props": {
+        "color": "black",
+        "gradient": false,
+        "opacity": "opacity_4",
+        "layout": {
+          "bottom": "full"
+        }
+      },
+      "children": "<Background\n    alt=\"Colorful abstract background\"\n    backgroundPosition=\"center\"\n    imageUrl=\"https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80\"\n    minHeight=\"320px\"\n    width=\"100%\"\n>\n  <Flex minHeight=\"320px\" orientation=\"column\" padding=\"lg\" vertical=\"center\">\n    <Title dark size={3} text=\"Flat Overlay\" />\n    <Body color=\"light\" text=\"gradient={false} removes the fade treatment.\" />\n  </Flex>\n</Background>"
+    },
+    {
+      "name": "Horizontal",
+      "props": {
+        "color": "card_light",
+        "layout": {
+          "x": "xl"
+        }
+      },
+      "children": "<Flex columnGap=\"lg\" orientation=\"row\" overflowX=\"auto\">\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 1'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 2'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 3'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 4'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 5'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 6'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 7'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 8'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 9'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 10'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 11'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 12'}</Card></FlexItem>\n</Flex>"
+    },
+    {
+      "name": "Full Screen",
+      "structureMode": "fullscreen",
+      "props": {
+        "color": "bg_dark",
+        "fullScreen": true,
+        "gradient": false,
+        "opacity": "opacity_4"
+      },
+      "children": "<FixedConfirmationToast\n    closeable\n    horizontal=\"center\"\n    onClose={handleClose}\n    open={open}\n    status=\"tip\"\n    text=\"Fullscreen overlay content\"\n    vertical=\"top\"\n/>"
+    },
+    {
+      "name": "Hide Scrollbar",
+      "props": {
+        "color": "card_light",
+        "layout": {
+          "x": "xl"
+        },
+        "scrollBarNone": true
+      },
+      "children": "<Flex columnGap=\"lg\" orientation=\"row\" overflowX=\"auto\">\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 1'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 2'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 3'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 4'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 5'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 6'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 7'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 8'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 9'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 10'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 11'}</Card></FlexItem>\n  <FlexItem fixedSize=\"160px\"><Card>{'Card 12'}</Card></FlexItem>\n</Flex>"
+    }
+  ],
+  "conditionals": {
+    "opacity": {
+      "requires": {
+        "gradient": false
+      }
+    }
+  },
+  "hints": {
+    "layout": {
+      "when": {},
+      "message": "layout controls overlay direction and size. Use keys like bottom, top, x, or y with token values like full, xl, or percentages.",
+      "type": "info"
+    },
+    "gradient": {
+      "presetName": "No Gradient",
+      "message": "gradient={false} removes the default gradient treatment and uses a flatter color overlay.",
+      "type": "info"
+    },
+    "fullscreen": {
+      "presetName": "Full Screen",
+      "message": "fullScreen changes the overlay to a fixed viewport layer; pair it with content that can close or explain the state.",
+      "type": "info"
+    },
+    "scrollbar": {
+      "presetName": "Hide Scrollbar",
+      "message": "scrollBarNone hides the scrollbar while preserving scrollable overflow content.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_pagination/docs/_playground.json CHANGED Viewed

@@ -4,7 +4,8 @@
   "defaults": {
     "current": 1,
     "range": 5,
-    "total": 10
+    "total": 10,
+    "onChange": "(page) => console.log('Page changed', page)"
   },
   "groups": [
     {
@@ -48,22 +49,42 @@
       }
     },
     {
-      "name": "Last page",
+      "name": "Controlled",
+      "structureMode": "controlled",
       "props": {
-        "current": 12,
-        "total": 12,
-        "range": 5
-      }
-    },
-    {
-      "name": "Wide window",
-      "props": {
-        "current": 25,
-        "total": 50,
-        "range": 9
+        "range": 5,
+        "total": 10
       }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "range": {
+      "when": {},
+      "message": "range controls how many page numbers appear around the current page before first/last shortcuts are added.",
+      "type": "info"
+    },
+    "controlled": {
+      "presetName": "Controlled",
+      "message": "For React-controlled pagination, keep current in state and update it from onChange.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "static",
+    "modes": {
+      "static": {
+        "label": "Static",
+        "template": "<Pagination{{props}} />"
+      },
+      "controlled": {
+        "label": "Controlled",
+        "template": "<Pagination\n  current={currentPage}\n  onChange={setCurrentPage}{{props}}\n/>",
+        "wrapper": "const PaginationPlayground = () => {\n  const [currentPage, setCurrentPage] = useState(1)\n\n  return {{component}}\n}\n\n<PaginationPlayground />",
+        "externalImports": [
+          "import React, { useState } from 'react'"
+        ]
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_pagination/docs/_playground.overrides.json CHANGED Viewed

@@ -1,8 +1,26 @@
 {
+  "structureModes": {
+    "default": "static",
+    "modes": {
+      "static": {
+        "label": "Static",
+        "template": "<Pagination{{props}} />"
+      },
+      "controlled": {
+        "label": "Controlled",
+        "template": "<Pagination\n  current={currentPage}\n  onChange={setCurrentPage}{{props}}\n/>",
+        "wrapper": "const PaginationPlayground = () => {\n  const [currentPage, setCurrentPage] = useState(1)\n\n  return {{component}}\n}\n\n<PaginationPlayground />",
+        "externalImports": [
+          "import React, { useState } from 'react'"
+        ]
+      }
+    }
+  },
   "defaults": {
     "current": 1,
     "range": 5,
-    "total": 10
+    "total": 10,
+    "onChange": "(page) => console.log('Page changed', page)"
   },
   "groups": [
     {
@@ -40,22 +58,25 @@
       }
     },
     {
-      "name": "Last page",
-      "props": {
-        "current": 12,
-        "total": 12,
-        "range": 5
-      }
-    },
-    {
-      "name": "Wide window",
+      "name": "Controlled",
+      "structureMode": "controlled",
       "props": {
-        "current": 25,
-        "total": 50,
-        "range": 9
+        "range": 5,
+        "total": 10
       }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "range": {
+      "when": {},
+      "message": "range controls how many page numbers appear around the current page before first/last shortcuts are added.",
+      "type": "info"
+    },
+    "controlled": {
+      "presetName": "Controlled",
+      "message": "For React-controlled pagination, keep current in state and update it from onChange.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb CHANGED Viewed

@@ -2,7 +2,7 @@
 <%= pb_rails("progress_simple", props: { percent: 0, id: "bar_breached" }) %>
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_breached" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "caption_breached" }) %>
 <script>
     window.addEventListener("load", () => {

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb CHANGED Viewed

@@ -7,7 +7,7 @@
 <%= pb_rails("progress_simple", props: { percent: 0, id: "bar_common" }) %>
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_common" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "caption_common" }) %>
 <script>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb CHANGED Viewed

@@ -2,7 +2,7 @@
 <%= pb_rails("progress_simple", props: { percent: 0, id: "def_bar" }) %>
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "def_caption" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "def_caption" }) %>
 <%= pb_rails("text_input", props: { label: "Calculated Strength", value: "0", disabled: true, id: "calc_strength" }) %>
@@ -10,25 +10,25 @@
 <%= pb_rails("progress_simple", props: { percent: 0, id: "min_5_bar" }) %>
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "min_5_caption" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "min_5_caption" }) %>
 <%= pb_rails("passphrase", props: { label: "Min length = 30", classname: "min_30" }) %>
 <%= pb_rails("progress_simple", props: { percent: 0, id: "min_30_bar" }) %>
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "min_30_caption" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "min_30_caption" }) %>
 <%= pb_rails("passphrase", props: { label: "Average Threshold = 1", classname: "avg_1" }) %>
 <%= pb_rails("progress_simple", props: { percent: 0, id: "avg_1_bar" }) %>
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "avg_1_caption" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "avg_1_caption" }) %>
 <%= pb_rails("passphrase", props: { label: "Strong Threshold = 4", classname: "strong_4" }) %>
 <%= pb_rails("progress_simple", props: { percent: 0, id: "strong_4_bar" }) %>
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "strong_4_caption" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "strong_4_caption" }) %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb CHANGED Viewed

@@ -2,7 +2,7 @@
 <%= pb_rails("progress_simple", props: { percent: 0, id: "bar_change" }) %>
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_change" }) %>
+<%= pb_rails("caption", props: { size: 'xs', text: "", id: "caption_change" }) %>
 <%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>