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 >}}
+{{< tabs title="hello." >}}
-{{% tab title="python" %}}
+{{% 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 */>}}
+{{</* tabs title="hello." */>}}
-{{%/* tab title="python" */%}}
+{{%/* 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
@@ -203,7 +222,7 @@ In case you want to nest tabs, the parent tab that contains the subtabs needs to
 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;