tabs: add title and icon option #552

exampleSite/content/basics/migration/_index.en.md

@@ -20,9 +20,9 @@ This document shows you what's new in the latest release. For a detailed list of
 
 ## 5.16.0 (2023-06-05)
 
-- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`tabs` shortcode]({{% relref "shortcodes/tabs" %}}) and the [`tab` shortcode]({{% relref "shortcodes/tab" %}}) received some love and style, color and icon parameter similar to other shortcodes.
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`tabs` shortcode]({{% relref "shortcodes/tabs" %}}) and the [`tab` shortcode]({{% relref "shortcodes/tab" %}}) received some love and now align with their style, color, title and icon parameter to the other shortcodes.
 
-  If you now display a single code block in a tab, its default styling will adapt to that of a code block but with a tab handle at the top.
+  The visuals are now slightly different compared to previous versions. Most noteable, if you now display a single code block in a tab, its default styling will adapt to that of a code block but with a tab handle at the top.
 
   Additionally the `name` parameter was renamed to `title` but you don't need to change anything yet as the old name will be used as a fallback but you will get deprecation warnings while executing Hugo.
 

exampleSite/content/shortcodes/tabs.en.md

@@ -9,20 +9,27 @@ This comes in handy eg. for providing code snippets for multiple languages.
 
 If you just want a single tab you can instead call the [`tab` shortcode]({{% relref "shortcodes/tab" %}}) standalone.
 
-{{< tabs >}}
-{{% tab title="python" %}}
+{{< tabs title="hello." >}}
+{{% tab title="py" %}}
 
 ```python
 print("Hello World!")
 ```
 
 {{% /tab %}}
-{{% tab title="bash" %}}
+{{% tab title="sh" %}}
 
 ```bash
 echo "Hello World!"
 ```
 
+{{% /tab %}}
+{{% tab title="c" %}}
+
+```c
+printf("Hello World!");
+```
+
 {{% /tab %}}
 {{< /tabs >}}
 
@@ -36,17 +43,22 @@ See the [`tab` shortcode]({{% relref "shortcodes/tab" %}}) for a description of
 {{% tab title="shortcode" %}}
 
 ````go
-{{</* tabs */>}}
-{{%/* tab title="python" */%}}
+{{</* tabs title="hello." */>}}
+{{%/* tab title="py" */%}}
 ```python
 print("Hello World!")
 ```
 {{%/* /tab */%}}
-{{%/* tab title="bash" */%}}
+{{%/* tab title="sh" */%}}
 ```bash
 echo "Hello World!"
 ```
 {{%/* /tab */%}}
+{{%/* tab title="c" */%}}
+```c
+printf"Hello World!");
+```
+{{%/* /tab */%}}
 {{</* /tabs */>}}
 ````
 
@@ -56,15 +68,20 @@ echo "Hello World!"
 ````go
 {{ partial "shortcodes/tabs.html" (dict
   "context" .
+  "title" "hello."
   "content" (slice
     (dict
-      "title" "python"
+      "title" "py"
       "content" ("```python\nprint(\"Hello World!\")\n```" | .RenderString)
     )
     (dict
-      "title" "bash"
+      "title" "sh"
       "content" ("```bash\necho \"Hello World!\"\n```" | .RenderString)
     )
+    (dict
+      "title" "c"
+      "content" ("```c\nprintf(\"Hello World!\");\n```" | .RenderString)
+    )
   )
 )}}
 ````
@@ -79,6 +96,8 @@ echo "Hello World!"
 | **groupid**           | _&lt;random&gt;_     | Arbitrary name of the group the tab view belongs to.<br><br>Tab views with the same **groupid** sychronize their selected tab. The tab selection is restored automatically based on the `groupid` for tab view. If the selected tab can not be found in a tab group the first tab is selected instead.<br><br>This sychronization applies to the whole site! |
 | **style**             | _&lt;empty&gt;_      | Sets a default value for every contained tab. Can be overridden by each tab. See the [`tab` shortcode]({{% relref "shortcodes/tab#parameter" %}}) for possible values. |
 | **color**             | _&lt;empty&gt;_      | Sets a default value for every contained tab. Can be overridden by each tab. See the [`tab` shortcode]({{% relref "shortcodes/tab#parameter" %}}) for possible values. |
+| **title**             | _&lt;empty&gt;_      | Arbitrary title written in front of the tabs. |
+| **icon**              | _&lt;empty&gt;_      | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. |
 | _**&lt;content&gt;**_ | _&lt;empty&gt;_      | Arbitrary number of tabs defined with the `tab` sub-shortcode. |
 
 ## Examples
@@ -200,10 +219,10 @@ Hello = World
 
 In case you want to nest tabs, the parent tab that contains the subtabs needs to be declared with `{{</* tab */>}}` instead of `{{%/* tab */%}}`. Note, that in this case it is not possible to put markdown in the parent tab.
 
-You can also set various color parameter for all tabs or just selected ones. See the [`tab` shortcode]({{% relref "shortcodes/tab#parameter" %}}) for possible values. 
+You can also set various color parameter for all tabs or just selected ones. See the [`tab` shortcode]({{% relref "shortcodes/tab#parameter" %}}) for possible values.
 
 ````go
-{{</* tabs groupid="main" style="primary" */>}}
+{{</* tabs groupid="main" style="primary" title="Rationale" icon="thumbtack" */>}}
 {{</* tab title="Text" */>}}
   Simple text is possible here...
   {{</* tabs groupid="tabs-example-language" */>}}
@@ -219,7 +238,7 @@ You can also set various color parameter for all tabs or just selected ones. See
   {{</* /tabs */>}}
 {{</* /tab */>}}
 
-{{</* tab title="Code" style="default" color="fuchsia" */>}}
+{{</* tab title="Code" style="default" color="darkorchid" */>}}
   ...but no markdown
   {{</* tabs groupid="tabs-example-language" */>}}
   {{%/* tab title="python" */%}}
@@ -237,7 +256,7 @@ You can also set various color parameter for all tabs or just selected ones. See
 {{</* /tabs */>}}
 ````
 
-{{< tabs groupid="main" style="primary" >}}
+{{< tabs groupid="main" style="primary" title="Rationale" icon="thumbtack" >}}
 {{< tab title="Text" >}}
   Simple text is possible here...
   {{< tabs groupid="tabs-example-language" >}}
@@ -253,7 +272,7 @@ You can also set various color parameter for all tabs or just selected ones. See
   {{< /tabs >}}
 {{< /tab >}}
 
-{{< tab title="Code" style="default" color="fuchsia" >}}
+{{< tab title="Code" style="default" color="darkorchid" >}}
   ...but no markdown
   {{< tabs groupid="tabs-example-language" >}}
   {{% tab title="python" %}}

layouts/partials/shortcodes/tabs.html

@@ -54,6 +54,7 @@
 {{- with $context }}
 <div class="tab-panel" data-tab-group="{{ $groupid }}">
   <div class="tab-nav">
+    <div class="tab-nav-title">{{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | $context.RenderString }}{{ if (not $title) }}&#8203;{{ end }}</div>
   {{- range $idx, $tab := $tabs }}
     <button
       data-tab-item="{{ .itemid }}"

static/css/theme.css

@@ -1849,6 +1849,14 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
     flex-wrap: wrap;
 }
 
+#body .tab-nav-title{
+    font-size: .9rem;
+    font-weight: 500;
+    line-height: 1.42857143;
+    padding: .2rem 0;
+    margin-inline-start: .6rem;
+}
+
 #body .tab-nav-button{
     -webkit-appearance: none;
     appearance: none;