🐛 FIX: dropdown/tab-item :name: options (#91)

Ensure the ids are propagated to the final HTML

docs/snippets/myst/dropdown-options.txt

@@ -0,0 +1,13 @@
+:::{dropdown} Title
+:name: target
+:color: info
+:icon: alert
+:margin: 1
+:class-container: class-container
+:class-title: class-title
+:class-body: class-body
+
+Dropdown content
+:::
+
+{ref}`target`, {ref}`text <target>`

docs/snippets/myst/tab-options.txt

@@ -0,0 +1,16 @@
+::::{tab-set}
+:class: class-set
+
+:::{tab-item} Label
+:name: target
+:selected:
+:class-container: class-container
+:class-label: class-label
+:class-content: class-content
+
+Content
+:::
+
+::::
+
+{ref}`target`, {ref}`text <target>`

docs/snippets/rst/dropdown-options.txt

@@ -0,0 +1,12 @@
+.. dropdown:: Title
+    :name: target
+    :color: info
+    :icon: alert
+    :margin: 1
+    :class-container: class-container
+    :class-title: class-title
+    :class-body: class-body
+
+    Dropdown content
+
+:ref:`target`, :ref:`text <target>`

docs/snippets/rst/tab-options.txt

@@ -0,0 +1,13 @@
+.. tab-set::
+    :class: class-set
+
+    .. tab-item:: Label
+        :name: target
+        :selected:
+        :class-container: class-container
+        :class-label: class-label
+        :class-content: class-content
+
+        Content
+
+:ref:`target`, :ref:`text <target>`

sphinx_design/dropdown.py

@@ -119,10 +119,15 @@ def run(self):
         self.set_source_info(container)
         if self.arguments:
             textnodes, messages = self.state.inline_text(self.arguments[0], self.lineno)
-            container += nodes.rubric(self.arguments[0], "", *textnodes)
+            title_node = nodes.rubric(self.arguments[0], "", *textnodes)
+            container += title_node
             container += messages
+            # where possible we add the target to the title node,
+            # so that it can be used as the reference text
+            self.add_name(title_node)
+        else:
+            self.add_name(container)
         self.state.nested_parse(self.content, self.content_offset, container)
-        self.add_name(container)
         return [container]
 
 
@@ -142,7 +147,8 @@ class DropdownHtmlTransform(SphinxPostTransform):
 
     def run(self):
         """Run the transform"""
-        for node in self.document.traverse(lambda node: is_component(node, "dropdown")):
+        document: nodes.document = self.document
+        for node in document.traverse(lambda node: is_component(node, "dropdown")):
 
             # TODO option to not have card css (but requires more formatting)
             use_card = True
@@ -179,6 +185,8 @@ def run(self):
 
             if node["has_title"]:
                 title_children = node[0].children
+                if node[0].get("ids"):
+                    newnode["ids"] += node[0]["ids"]
                 body_children = node[1:]
             else:
                 title_children = [

sphinx_design/tabs.py

@@ -259,6 +259,8 @@ def run(self) -> None:
                     input_id=tab_item_identity,
                     classes=tab_label["classes"],
                 )
+                if tab_label.get("ids"):
+                    label_node["ids"] += tab_label["ids"]
                 if "sync_id" in tab_label:
                     label_node["sync_id"] = tab_label["sync_id"]
                 label_node.source, label_node.line = tab_item.source, tab_item.line

tests/test_snippets/snippet_post_dropdown-options.xml

@@ -0,0 +1,26 @@
+<document source="index">
+    <section ids="heading" names="heading">
+        <title>
+            Heading
+        <dropdown_main classes="sd-sphinx-override sd-dropdown sd-card sd-m-1 class-container" ids="target" opened="False">
+            <dropdown_title classes="sd-summary-title sd-card-header class-title sd-bg-info sd-bg-text-info">
+                <raw classes="sd-summary-icon" format="html" xml:space="preserve">
+                    <svg version="1.1" width="1.0em" height="1.0em" class="sd-octicon sd-octicon-alert" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path></svg>
+                Title
+                <container classes="sd-summary-down" design_component="dropdown-closed-marker" is_div="True">
+                    <raw format="html" xml:space="preserve">
+                        <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-down" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 8.72a.75.75 0 000 1.06l6.25 6.25a.75.75 0 001.06 0l6.25-6.25a.75.75 0 00-1.06-1.06L12 14.44 6.28 8.72a.75.75 0 00-1.06 0z"></path></svg>
+                <container classes="sd-summary-up" design_component="dropdown-open-marker" is_div="True">
+                    <raw format="html" xml:space="preserve">
+                        <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-up" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M18.78 15.28a.75.75 0 000-1.06l-6.25-6.25a.75.75 0 00-1.06 0l-6.25 6.25a.75.75 0 101.06 1.06L12 9.56l5.72 5.72a.75.75 0 001.06 0z"></path></svg>
+            <container classes="sd-summary-content sd-card-body class-body" design_component="dropdown-body" is_div="True">
+                <paragraph classes="sd-card-text">
+                    Dropdown content
+        <paragraph>
+            <reference internal="True" refid="target">
+                <inline classes="std std-ref">
+                    Title
+            , 
+            <reference internal="True" refid="target">
+                <inline classes="std std-ref">
+                    text

tests/test_snippets/snippet_post_tab-options.xml

@@ -0,0 +1,19 @@
+<document source="index">
+    <section ids="heading" names="heading">
+        <title>
+            Heading
+        <container classes="sd-tab-set class-set" design_component="tab-set" is_div="True">
+            <sd_tab_input checked="True" id="mock-uuid" set_id="mock-uuid" type="radio">
+            <sd_tab_label classes="sd-tab-label class-label" ids="target" input_id="mock-uuid">
+                Label
+            <container classes="sd-tab-content class-content" design_component="tab-content" is_div="True">
+                <paragraph>
+                    Content
+        <paragraph>
+            <reference internal="True" refid="target">
+                <inline classes="std std-ref">
+                    Label
+            , 
+            <reference internal="True" refid="target">
+                <inline classes="std std-ref">
+                    text

tests/test_snippets/snippet_pre_dropdown-options.xml

@@ -0,0 +1,17 @@
+<document source="index">
+    <section ids="heading" names="heading">
+        <title>
+            Heading
+        <container body_classes="class-body" container_classes="sd-m-1 class-container" design_component="dropdown" has_title="True" icon="alert" is_div="True" opened="False" title_classes="class-title sd-bg-info sd-bg-text-info" type="dropdown">
+            <rubric ids="target" names="target">
+                Title
+            <paragraph>
+                Dropdown content
+        <paragraph>
+            <pending_xref refdoc="index" refdomain="std" refexplicit="False" reftarget="target" reftype="ref" refwarn="True">
+                <inline classes="xref std std-ref">
+                    target
+            , 
+            <pending_xref refdoc="index" refdomain="std" refexplicit="True" reftarget="target" reftype="ref" refwarn="True">
+                <inline classes="xref std std-ref">
+                    text

tests/test_snippets/snippet_pre_tab-options.xml

@@ -0,0 +1,19 @@
+<document source="index">
+    <section ids="heading" names="heading">
+        <title>
+            Heading
+        <container classes="sd-tab-set class-set" design_component="tab-set" is_div="True">
+            <container classes="sd-tab-item class-container" design_component="tab-item" is_div="True" selected="True">
+                <rubric classes="sd-tab-label class-label" ids="target" names="target">
+                    Label
+                <container classes="sd-tab-content class-content" design_component="tab-content" is_div="True">
+                    <paragraph>
+                        Content
+        <paragraph>
+            <pending_xref refdoc="index" refdomain="std" refexplicit="False" reftarget="target" reftype="ref" refwarn="True">
+                <inline classes="xref std std-ref">
+                    target
+            , 
+            <pending_xref refdoc="index" refdomain="std" refexplicit="True" reftarget="target" reftype="ref" refwarn="True">
+                <inline classes="xref std std-ref">
+                    text