You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2024/02/09 14:18:45 UTC
(myfaces-tobago) 01/02: feature(badge): image attribute
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit c103772af7ec29854ca32c0be2a633acd8276a5e
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Fri Feb 9 13:30:06 2024 +0100
feature(badge): image attribute
* add an example
* implement an image attribute to add an image or an icon to a badge
* adjust tests
Issue: TOBAGO-2288
---
.../myfaces/tobago/internal/component/AbstractUIBadge.java | 2 ++
.../tobago/internal/renderkit/renderer/BadgeRenderer.java | 4 ++++
.../tobago/internal/taglib/component/BadgeTagDeclaration.java | 3 ++-
.../src/test/resources/renderer/badge/badge-data-attribute.html | 3 ++-
tobago-core/src/test/resources/renderer/badge/badge.html | 5 +++--
.../src/main/webapp/content/020-output/25-badge/Badge.xhtml | 7 +++++++
tobago-theme/src/main/scss/_tobago.scss | 9 +++++----
7 files changed, 25 insertions(+), 8 deletions(-)
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIBadge.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIBadge.java
index 127fdcbc8f..0f726fc740 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIBadge.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIBadge.java
@@ -25,5 +25,7 @@ import jakarta.faces.component.UIOutput;
public abstract class AbstractUIBadge extends UIOutput implements Visual {
+ public abstract String getImage();
+
public abstract String getTip();
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BadgeRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BadgeRenderer.java
index 82ba2571b2..fb0fbd7343 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BadgeRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BadgeRenderer.java
@@ -38,6 +38,7 @@ public class BadgeRenderer<T extends AbstractUIBadge> extends RendererBase<T> {
public void encodeBeginInternal(final FacesContext facesContext, final T component) throws IOException {
final TobagoResponseWriter writer = getResponseWriter(facesContext);
final Markup markup = component.getMarkup() != null ? component.getMarkup() : Markup.NULL;
+ final String image = component.getImage();
final String tip = component.getTip();
final String value = getCurrentValue(facesContext, component);
@@ -50,11 +51,14 @@ public class BadgeRenderer<T extends AbstractUIBadge> extends RendererBase<T> {
isInside(facesContext, HtmlElements.TOBAGO_BUTTONS) ? BootstrapClass.BTN : null,
component.getCustomClass());
HtmlRendererUtils.writeDataAttributes(facesContext, writer, component);
+ HtmlRendererUtils.encodeIconOrImage(writer, image);
if (tip != null) {
writer.writeAttribute(HtmlAttributes.TITLE, tip, true);
}
if (value != null) {
+ writer.startElement(HtmlElements.SPAN);
writer.writeText(value);
+ writer.endElement(HtmlElements.SPAN);
}
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/BadgeTagDeclaration.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/BadgeTagDeclaration.java
index 09a2179e12..f3ef93d732 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/BadgeTagDeclaration.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/BadgeTagDeclaration.java
@@ -24,6 +24,7 @@ import org.apache.myfaces.tobago.apt.annotation.Tag;
import org.apache.myfaces.tobago.apt.annotation.UIComponentTag;
import org.apache.myfaces.tobago.component.RendererTypes;
import org.apache.myfaces.tobago.internal.taglib.declaration.HasIdBindingAndRendered;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasImage;
import org.apache.myfaces.tobago.internal.taglib.declaration.HasTip;
import org.apache.myfaces.tobago.internal.taglib.declaration.HasValue;
import org.apache.myfaces.tobago.internal.taglib.declaration.IsVisual;
@@ -86,5 +87,5 @@ import jakarta.faces.component.UIOutput;
description = "Colorless badge."
)
})
-public interface BadgeTagDeclaration extends HasIdBindingAndRendered, HasTip, IsVisual, HasValue {
+public interface BadgeTagDeclaration extends HasIdBindingAndRendered, HasTip, IsVisual, HasValue, HasImage {
}
diff --git a/tobago-core/src/test/resources/renderer/badge/badge-data-attribute.html b/tobago-core/src/test/resources/renderer/badge/badge-data-attribute.html
index e8b53ba32f..388285a466 100644
--- a/tobago-core/src/test/resources/renderer/badge/badge-data-attribute.html
+++ b/tobago-core/src/test/resources/renderer/badge/badge-data-attribute.html
@@ -15,5 +15,6 @@
* limitations under the License.
-->
-<tobago-badge id='id' class='badge' data-color='#00ff00'>Text
+<tobago-badge id='id' class='badge' data-color='#00ff00'>
+ <span>Text</span>
</tobago-badge>
diff --git a/tobago-core/src/test/resources/renderer/badge/badge.html b/tobago-core/src/test/resources/renderer/badge/badge.html
index c01788ca8b..7ee968bdb8 100644
--- a/tobago-core/src/test/resources/renderer/badge/badge.html
+++ b/tobago-core/src/test/resources/renderer/badge/badge.html
@@ -15,5 +15,6 @@
* limitations under the License.
-->
-<tobago-badge id='id' class='badge'>Text
-</tobago-badge>
\ No newline at end of file
+<tobago-badge id='id' class='badge'>
+ <span>Text</span>
+</tobago-badge>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/020-output/25-badge/Badge.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/020-output/25-badge/Badge.xhtml
index c13ef20de2..2a5d8c7f09 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/020-output/25-badge/Badge.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/020-output/25-badge/Badge.xhtml
@@ -57,6 +57,13 @@
<tc:button image="bi-x-lg" markup="badge" tip="remove" omit="true"/>
</tc:buttons>
<p/>
+
+ <tc:separator/>
+ <p>Badges can have an icon.</p>
+ <demo-highlight language="markup"><tc:badge value="image" image="#{request.contextPath}/image/feather-leaf.png"/>
+<tc:badge value="icon" image="bi-airplane"/></demo-highlight>
+ <tc:badge value="image" image="#{request.contextPath}/image/feather-leaf.png"/>
+ <tc:badge value="icon" image="bi-airplane"/>
</tc:section>
<tc:section label="Markups">
diff --git a/tobago-theme/src/main/scss/_tobago.scss b/tobago-theme/src/main/scss/_tobago.scss
index bf7249f83a..c003a97b6a 100644
--- a/tobago-theme/src/main/scss/_tobago.scss
+++ b/tobago-theme/src/main/scss/_tobago.scss
@@ -84,7 +84,7 @@ $tobago-flex-layout-spacing: 0.5rem;
}
}
-@mixin buttonLinkImageTextSpacing() {
+@mixin imageTextSpacing() {
> img + span {
margin-left: .4em;
}
@@ -393,6 +393,7 @@ $tobago-flex-layout-spacing: 0.5rem;
tobago-badge {
@include badgeBtn();
+ @include imageTextSpacing();
&.btn {
cursor: initial; //revert cursor attribute on .btn class
@@ -465,7 +466,7 @@ tobago-box {
.tobago-button {
@include buttonLinkDisabledCursor();
- @include buttonLinkImageTextSpacing();
+ @include imageTextSpacing();
@include badgeBtn();
@include markupHideToggleIcon();
@@ -859,7 +860,7 @@ tobago-links {
/* link ----------------------------------------------------------- */
.tobago-link {
- @include buttonLinkImageTextSpacing();
+ @include imageTextSpacing();
@include markupHideToggleIcon();
white-space: nowrap;
@@ -1783,7 +1784,7 @@ tobago-tab.tobago-bar {
tobago-tab-group {
tobago-tab {
> .nav-link {
- @include buttonLinkImageTextSpacing();
+ @include imageTextSpacing();
}
}
}