"html": "<div class=\"pf-v6-c-tree-view pf-m-compact\"><ul class=\"pf-v6-c-tree-view__list\" role=\"tree\" aria-multiselectable=\"false\" aria-label=\"Tree View compact example\"><li id=\"example9-apiVersion\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\" tabindex=\"0\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">apiVersion</span><span class=\"pf-v6-c-tree-view__node-text\">APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.</span></span></span></button></div></li><li id=\"example9-kind\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">kind</span><span class=\"pf-v6-c-tree-view__node-text\">Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:</span></span></span></button></div></li><li id=\"example9-metadata\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">metadata</span><span class=\"pf-v6-c-tree-view__node-text\">Standard metadata object</span></span></span></button></div></li><li id=\"example9-spec\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-toggle\" tabindex=\"-1\"><span class=\"pf-v6-c-tree-view__node-toggle-icon\"><svg class=\"pf-v6-svg\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\"><path d=\"M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z\"></path></svg></span></span><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">spec</span><span class=\"pf-v6-c-tree-view__node-text\">Standard metadata object</span></span></span></button></div><ul class=\"pf-v6-c-tree-view__list\" role=\"group\" inert=\"\"><li id=\"example9-minReadySeconds\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">minReadySeconds</span><span class=\"pf-v6-c-tree-view__node-text\">Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).</span></span></span></button></div></li><li id=\"example9-paused\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">paused</span><span class=\"pf-v6-c-tree-view__node-text\">Indicates that the deployment is paused</span></span></span></button></div></li><li id=\"example9-progressDeadlineSeconds\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-toggle\" tabindex=\"-1\"><span class=\"pf-v6-c-tree-view__node-toggle-icon\"><svg class=\"pf-v6-svg\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\"><path d=\"M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z\"></path></svg></span></span><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">progressDeadlineSeconds</span><span class=\"pf-v6-c-tree-view__node-text\">The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.</span></span></span></button></div><ul class=\"pf-v6-c-tree-view__list\" role=\"group\" inert=\"\"><li id=\"example9-revisionHistoryLimit\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-toggle\" tabindex=\"-1\"><span class=\"pf-v6-c-tree-view__node-toggle-icon\"><svg class=\"pf-v6-svg\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\"><path d=\"M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z\"></path></svg></span></span><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">revisionHistoryLimit</span><span class=\"pf-v6-c-tree-view__node-text\">The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.</span></span></span></button></div><ul class=\"pf-v6-c-tree-view__list\" role=\"group\" inert=\"\"><li id=\"example9-matchLabels\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">matchLabels</span><span class=\"pf-v6-c-tree-view__node-text\">Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is \"key\", the operator is \"In\" and the values array contains only \"value\". The requirements are ANDed.</span></span></span></button></div></li></ul></li></ul></li></ul></li></ul></div>"
},
{
"slug": "compact-no-background",
"title": "Compact, no background",
"html": "<div class=\"pf-v6-c-tree-view pf-m-compact pf-m-no-background\"><ul class=\"pf-v6-c-tree-view__list\" role=\"tree\" aria-multiselectable=\"false\" aria-label=\"Tree View compact no background example\"><li id=\"example10-apiVersion\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\" tabindex=\"0\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">apiVersion</span><span class=\"pf-v6-c-tree-view__node-text\">APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.</span></span></span></button></div></li><li id=\"example10-kind\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">kind</span><span class=\"pf-v6-c-tree-view__node-text\">Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:</span></span></span></button></div></li><li id=\"example10-metadata\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">metadata</span><span class=\"pf-v6-c-tree-view__node-text\">Standard metadata object</span></span></span></button></div></li><li id=\"example10-spec\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-toggle\" tabindex=\"-1\"><span class=\"pf-v6-c-tree-view__node-toggle-icon\"><svg class=\"pf-v6-svg\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\"><path d=\"M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z\"></path></svg></span></span><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">spec</span><span class=\"pf-v6-c-tree-view__node-text\">Standard metadata object</span></span></span></button></div><ul class=\"pf-v6-c-tree-view__list\" role=\"group\" inert=\"\"><li id=\"example10-minReadySeconds\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">minReadySeconds</span><span class=\"pf-v6-c-tree-view__node-text\">Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).</span></span></span></button></div></li><li id=\"example10-paused\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">paused</span><span class=\"pf-v6-c-tree-view__node-text\">Indicates that the deployment is paused</span></span></span></button></div></li><li id=\"example10-progressDeadlineSeconds\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-toggle\" tabindex=\"-1\"><span class=\"pf-v6-c-tree-view__node-toggle-icon\"><svg class=\"pf-v6-svg\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\"><path d=\"M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z\"></path></svg></span></span><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">progressDeadlineSeconds</span><span class=\"pf-v6-c-tree-view__node-text\">The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.</span></span></span></button></div><ul class=\"pf-v6-c-tree-view__list\" role=\"group\" inert=\"\"><li id=\"example10-revisionHistoryLimit\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-toggle\" tabindex=\"-1\"><span class=\"pf-v6-c-tree-view__node-toggle-icon\"><svg class=\"pf-v6-svg\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\"><path d=\"M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z\"></path></svg></span></span><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">revisionHistoryLimit</span><span class=\"pf-v6-c-tree-view__node-text\">The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.</span></span></span></button></div><ul class=\"pf-v6-c-tree-view__list\" role=\"group\" inert=\"\"><li id=\"example10-matchLabels\" class=\"pf-v6-c-tree-view__list-item\" aria-expanded=\"false\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"><div class=\"pf-v6-c-tree-view__content\"><button class=\"pf-v6-c-tree-view__node\" type=\"button\"><span class=\"pf-v6-c-tree-view__node-container\"><span class=\"pf-v6-c-tree-view__node-content\"><span class=\"pf-v6-c-tree-view__node-title\">matchLabels</span><span class=\"pf-v6-c-tree-view__node-text\">Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is \"key\", the operator is \"In\" and the values array contains only \"value\". The requirements are ANDed.</span></span></span></button></div></li></ul></li></ul></li></ul></li></ul></div>"
"description": "PFJ renders the <ul> directly; PF wraps it in a <div class=\"pf-v6-c-tree-view\">. This wrapper is needed for the pf-m-guides modifier and overall component styling.",
"category": "dom_differences",
"variations": [
"Single selectable",
"Guides"
]
},
{
"number": 2,
"type": "add_variation",
"priority": "P1",
"title": "Add Multiselectable variation",
"description": "PF supports multi-selection (aria-multiselectable=\"true\") where multiple tree items can be selected simultaneously.",
"category": "missing_sections",
"variations": [
"Multiselectable"
]
},
{
"number": 3,
"type": "add_variation",
"priority": "P1",
"title": "Add With search variation",
"description": "PF has a built-in search/filter variant with a text input above the tree that filters visible items.",
"category": "missing_sections",
"variations": [
"With search"
]
},
{
"number": 4,
"type": "add_variation",
"priority": "P1",
"title": "Add With badges variation",
"description": "PF supports displaying badges next to tree item text.",
"category": "missing_sections",
"variations": [
"With badges"
]
},
{
"number": 5,
"type": "add_variation",
"priority": "P1",
"title": "Add With custom badges variation",
"description": "PF supports custom badge content alongside tree items.",
"category": "missing_sections",
"variations": [
"With custom badges"
]
},
{
"number": 6,
"type": "add_variation",
"priority": "P1",
"title": "Add With action items variation",
"description": "PF supports action buttons (kebab menus, action icons) on individual tree items.",
"category": "missing_sections",
"variations": [
"With action items"
]
},
{
"number": 7,
"type": "add_variation",
"priority": "P1",
"title": "Add Compact variation",
"description": "PF has a compact variant (pf-m-compact) with reduced spacing.",
"category": "missing_sections",
"variations": [
"Compact"
]
},
{
"number": 8,
"type": "add_variation",
"priority": "P1",
"title": "Add Compact, no background variation",
"description": "PF has a compact variant without background styling (pf-m-compact + pf-m-no-background).",
"category": "missing_sections",
"variations": [
"Compact, no background"
]
},
{
"number": 9,
"type": "fix_css",
"priority": "P2",
"title": "Fix guides modifier",
"description": "PF applies pf-m-guides on the div.pf-v6-c-tree-view wrapper. PFJ must verify that guide lines are properly rendered via this modifier on the wrapper element.",
"category": "dom_differences",
"variations": [
"Guides"
]
},
{
"number": 10,
"type": "fix_attribute",
"priority": "P3",
"title": "Add aria-multiselectable on tree",
"description": "PF sets aria-multiselectable on the tree <ul> element. PFJ does not set this attribute.",
"category": "dom_differences",
"variations": [
"Single selectable",
"With separate selection and expansion",
"With icons",
"Guides"
]
},
{
"number": 11,
"type": "fix_attribute",
"priority": "P3",
"title": "Add aria-label on tree",
"description": "PF sets aria-label on the tree <ul> element. PFJ does not set this.",
"category": "dom_differences",
"variations": [
"Single selectable",
"With separate selection and expansion",
"With icons",
"Guides"
]
},
{
"number": 12,
"type": "fix_attribute",
"priority": "P3",
"title": "Add aria-selected on tree items",
"description": "PF sets aria-selected=\"false\" on each <li> treeitem. PFJ omits this attribute.",
"category": "dom_differences",
"variations": [
"Single selectable",
"With separate selection and expansion",
"With icons",
"Guides"
]
},
{
"number": 13,
"type": "fix_attribute",
"priority": "P3",
"title": "Add type=\"button\" on node button",
"description": "PF sets type=\"button\" on <button class=\"pf-v6-c-tree-view__node\">. PFJ omits the type attribute.",
"category": "dom_differences",
"variations": [
"Single selectable",
"With icons",
"Guides"
]
},
{
"number": 14,
"type": "fix_attribute",
"priority": "P3",
"title": "Add tabindex=\"-1\" on toggle span",
"description": "PF sets tabindex=\"-1\" on <span class=\"pf-v6-c-tree-view__node-toggle\">. PFJ omits this.",
"category": "dom_differences",
"variations": [
"Single selectable",
"Guides"
]
},
{
"number": 15,
"type": "fix_attribute",
"priority": "P3",
"title": "Add aria-checked on checkbox tree items",
"description": "PF sets aria-checked=\"false\" on <li> elements in the checkboxes variant. PFJ omits this.",
"category": "dom_differences",
"variations": [
"With checkboxes"
]
},
{
"number": 16,
"type": "fix_icon",
"priority": "P4",
"title": "Toggle icon uses different icon set",
"description": "PF uses viewBox=\"0 0 20 20\" (FontAwesome angle-down), PFJ uses viewBox=\"0 0 32 32\" (Red Hat caret-right). Both are valid toggle indicators but differ visually.",