From 56f4f451bb02d86fb8b661dfe9aae820ea2d456b Mon Sep 17 00:00:00 2001
From: Pierre <pierredureau@yahoo.fr>
Date: Sat, 15 Feb 2025 00:12:16 +0100
Subject: [PATCH] Issue #3351677 by pdureau: Rename "Tabs" to "Tab bar"
---
components/card/card.preview.story.yml | 3 +-
components/card/card.with_header.story.yml | 3 +-
components/tab/tab.twig | 4 +-
components/tab_bar/tab_bar.component.yml | 2 +
templates/system/menu-local-task.html.twig | 4 +-
templates/system/pager.html.twig | 8 +++-
ui_suite_material.theme | 12 ------
ui_suite_material.ui_examples.yml | 50 +++++++++++++---------
8 files changed, 43 insertions(+), 43 deletions(-)
diff --git a/components/card/card.preview.story.yml b/components/card/card.preview.story.yml
index 6da5e4f..e383595 100644
--- a/components/card/card.preview.story.yml
+++ b/components/card/card.preview.story.yml
@@ -1,4 +1,5 @@
name: Preview
+library_wrapper: '<div style="max-width: 480px">{{ _story }}</div>'
slots:
media_content:
type: component
@@ -31,7 +32,5 @@ slots:
props:
icon: search
props:
- attributes:
- style: "max-width: 480px"
media_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAECCAYAAACR5fw7AAADLklEQVR42u3VQREAMAgEsVL/Lk4oKMAAk0jYz1aSfgDA6ksAAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBw3wAq6QTsJXMX3wAAAABJRU5ErkJggg=="
media_scale: 16-9
diff --git a/components/card/card.with_header.story.yml b/components/card/card.with_header.story.yml
index ad25fb2..b488dfa 100644
--- a/components/card/card.with_header.story.yml
+++ b/components/card/card.with_header.story.yml
@@ -1,4 +1,5 @@
name: With header
+library_wrapper: '<div style="max-width: 480px">{{ _story }}</div>'
slots:
header:
type: html_tag
@@ -37,7 +38,5 @@ slots:
props:
icon: search
props:
- attributes:
- style: "max-width: 480px"
media_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAECCAYAAACR5fw7AAADLklEQVR42u3VQREAMAgEsVL/Lk4oKMAAk0jYz1aSfgDA6ksAAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBw3wAq6QTsJXMX3wAAAABJRU5ErkJggg=="
media_scale: 16-9
diff --git a/components/tab/tab.twig b/components/tab/tab.twig
index 560d36f..0cd7bbc 100644
--- a/components/tab/tab.twig
+++ b/components/tab/tab.twig
@@ -2,7 +2,7 @@
{% set attributes = attributes.addClass('mdc-tab--' ~ variant) %}
{% endif %}
-<span{{ attributes.addClass('mdc-tab').setAttribute('aria-selected', 'true').setAttribute('role', 'tab').setAttribute('tabindex', '0') }}>
+<a{{ attributes.addClass('mdc-tab').setAttribute('aria-selected', 'true').setAttribute('role', 'tab').setAttribute('tabindex', '0') }}>
<span class="mdc-tab__content">
{% if icon %}
<span class="mdc-tab__icon material-icons" aria-hidden="true">{{ icon }}</span>
@@ -19,4 +19,4 @@
</span>
{% endif %}
<span class="mdc-tab__ripple"></span>
-</span>
+</a>
diff --git a/components/tab_bar/tab_bar.component.yml b/components/tab_bar/tab_bar.component.yml
index 318aace..b6830e8 100644
--- a/components/tab_bar/tab_bar.component.yml
+++ b/components/tab_bar/tab_bar.component.yml
@@ -10,3 +10,5 @@ slots:
libraryOverrides:
js:
tab_bar_init.js: {}
+ dependencies:
+ - ui_suite_material/material
diff --git a/templates/system/menu-local-task.html.twig b/templates/system/menu-local-task.html.twig
index 8febde7..5a5d01e 100644
--- a/templates/system/menu-local-task.html.twig
+++ b/templates/system/menu-local-task.html.twig
@@ -19,6 +19,6 @@
{% set variant = is_active ? 'active' : '' %}
{{ include('ui_suite_material:tab', {
variant: variant,
- attributes: attributes,
- text: link,
+ attributes: attributes.setAttribute('href', link['#url'].toString()),
+ text: link['#title'],
}, with_context: false) }}
diff --git a/templates/system/pager.html.twig b/templates/system/pager.html.twig
index ba4acf1..7359d3e 100644
--- a/templates/system/pager.html.twig
+++ b/templates/system/pager.html.twig
@@ -35,6 +35,10 @@
{% if items.pages|length %}
{{ include('ui_suite_material:pagination', {
total: '@current of @total'|t({'@current': current, '@total': items.pages|length}),
- controls: controls,
-}, with_context: false) }}
+ controls: [
+ items.first|default({title: 'First'}),
+ items.previous|default({title: 'Previous'}),
+ items.next|default({title: 'Next'}),
+ items.last|default({title: 'Last'}),
+ ]}, with_context: false) }}
{% endif %}
diff --git a/ui_suite_material.theme b/ui_suite_material.theme
index 8f87ac9..2beaeab 100644
--- a/ui_suite_material.theme
+++ b/ui_suite_material.theme
@@ -17,15 +17,3 @@ function ui_suite_material_preprocess_image(array &$variables): void {
$variables["attributes"]["src"] = base_path() . $variables["directory"] . "/" . $uri;
}
}
-
-/**
- * Implements hook_preprocess_HOOK() for 'pager'.
- */
-function ui_suite_material_preprocess_pager(array &$variables): void {
- $variables["controls"] = array_merge(
- $variables["items"]["first"] ?? [],
- $variables["items"]["previous"] ?? [],
- $variables["items"]["next"] ?? [],
- $variables["items"]["last"] ?? [],
- );
-}
diff --git a/ui_suite_material.ui_examples.yml b/ui_suite_material.ui_examples.yml
index 620be83..85c5002 100644
--- a/ui_suite_material.ui_examples.yml
+++ b/ui_suite_material.ui_examples.yml
@@ -16,31 +16,33 @@ fortnightly:
slots:
icon: search
url: "#"
- additional:
+ - type: component
+ component: "ui_suite_material:tab_bar"
+ slots:
+ tabs:
+ - type: component
+ component: "ui_suite_material:tab"
+ props:
+ variant: active
+ slots:
+ text: "#Headlines"
+ - type: component
+ component: "ui_suite_material:tab"
+ slots:
+ text: "#Opinion"
+ - type: component
+ component: "ui_suite_material:tab"
+ slots:
+ text: "#Health"
- type: component
- component: "ui_suite_material:tab_bar"
+ component: "ui_suite_material:tab"
slots:
- tabs:
- - type: component
- component: "ui_suite_material:tab"
- props:
- variant: active
- slots:
- text: "#Headlines"
- - type: component
- component: "ui_suite_material:tab"
- slots:
- text: "#Opinion"
- - type: component
- component: "ui_suite_material:tab"
- slots:
- text: "#Health"
- - type: component
- component: "ui_suite_material:tab"
- slots:
- text: "#Food"
+ text: "#Food"
- type: component
component: "ui_suite_material:grid_row"
+ props:
+ attributes:
+ style: "max-width: 1480px;"
slots:
content:
- type: component
@@ -48,28 +50,34 @@ fortnightly:
story: preview
props:
variant: outlined
+ media_url: https://cdn.glitch.com/62e2261a-7e39-4dae-832f-57566e5fe6b2%2Fstock-photo-barcelona-poblenou-by-michseixas-143329895.jpg?v=1581723642934
- type: component
component: "ui_suite_material:card"
story: preview
props:
variant: outlined
+ media_url: https://cdn.glitch.com/62e2261a-7e39-4dae-832f-57566e5fe6b2%2Fstock-photo-tel-aviv-lev-hair-by-studio-zooz-144342493.jpg?v=1581723620380
- type: component
component: "ui_suite_material:card"
story: preview
props:
variant: outlined
+ media_url: https://cdn.glitch.me/62e2261a-7e39-4dae-832f-57566e5fe6b2%2Fstock-photo-tel-aviv-tzafon-yashan-by-studio-zooz-144438341%20%281%29.jpg
- type: component
component: "ui_suite_material:card"
story: preview
props:
variant: outlined
+ media_url: https://cdn.glitch.com/62e2261a-7e39-4dae-832f-57566e5fe6b2%2Fstock-photo-berlin-mitte-by-alexandercoggin-145568969.jpg?v=1581723585163
- type: component
component: "ui_suite_material:card"
story: preview
props:
variant: outlined
+ media_url: https://cdn.glitch.me/62e2261a-7e39-4dae-832f-57566e5fe6b2%2Fstock-photo-buenos-aires-belgrano-by-nickg-144798999.jpg
- type: component
component: "ui_suite_material:card"
story: preview
props:
variant: outlined
+ media_url: https://cdn.glitch.com/62e2261a-7e39-4dae-832f-57566e5fe6b2%2Fstock-photo-austin-old-west-austin-by-austin-hansen-146837833.jpg?v=1583452978404
--
GitLab