F7Fab "plus" icon always displayed

[jpiaskowski]

Even when an F7Icon is chosen, it is overlaid over the f7 "plus" icon. It looks like the intent of this function is to allow a text label, but not an icon.

library(shiny)
library(shinyMobile)

ui <- f7Page(
  f7SingleLayout(
    navbar = f7Navbar(
      title = "F7 test"),
    f7Fabs(
      position = "right-top", sideOpen = "left",
      label = f7Icon("capsule"),
      f7Fab(inputId = "filter_trial", label = "Filter data", width = '300px')
    ),
  )
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

[DivadNojnarg]

Exact, according to the doc:

extended: If TRUE, the FAB will be wider. This allows to use a label (see below).
label: Container label. Only if extended is TRUE.

label only works if extended is TRUE. label could theoretically accept icon but this would not render well with the existing icon:

f7Fabs(
      extended = TRUE,
      label = "Menu",
      position = "center-top",
      color = "yellow",
      sideOpen = "right",
      lapply(1:4, function(i) f7Fab(paste0("btn", i), i))
    )

If you want to use another set of icon than + and x, you can modify f7Fabs, replacing <ICON_1> and <ICON_2> by whatever relevant. :

f7Fabs <- function (..., id = NULL, position = c("right-top", "right-center", 
    "right-bottom", "left-top", "left-center", "left-bottom", 
    "center-center", "center-top", "center-bottom"), color = NULL, 
    extended = FALSE, label = NULL, sideOpen = c("left", "right", 
        "top", "bottom", "center"), morph = FALSE, morphTarget = NULL) 
{
    position <- match.arg(position)
    fabCl <- paste0("fab fab-", position, if (!is.null(color)) 
        " color-", color)
    if (extended) 
        fabCl <- paste0(fabCl, " fab-extended")
    if (morph) 
        fabCl <- paste0(fabCl, " fab-morph")
    sideOpen <- match.arg(sideOpen)
    shiny::tags$div(class = fabCl, id = id, `data-morph-to` = if (morph) 
        morphTarget
    else NULL, shiny::a(href = "#", f7Icon(<ICON_1>), f7Icon(<ICON_2>), 
        if (!is.null(label)) {
            shiny::tags$div(class = "fab-text", label)
        }), if (length(list(...)) > 0) {
        shiny::tags$div(class = paste0("fab-buttons fab-buttons-", 
            sideOpen), ...)
    })
}

Below I used f7Icon("hand_thumbsup") and f7Icon("hand_thumbsdown"). If you think that's important to add, I might include it in the next release as a parameter option. However, icons must be chosen so that the rotation animation does not look weird.

Screen.Recording.2022-08-27.at.14.06.35.mov

[jpiaskowski]

Thank you for explaining the thinking behind this. I don't have a strong preference for the thumbs up/down icons, but if possible, if might make sense to add some error catching to prevent users from trying to add their own icon and be clear that label = ... is for text only. Or perhaps it is possible to implement FABs without the icon rotation, that would give users some flexibility (the vertical ellipses and gear icons are two common options for opening these). "X" is a great universally understood icon for closing a pop-ups.

[DivadNojnarg]

I would be more in favor of option 1. Changing the rotation animation could easily break if Framework7 gets updated.