Como adicionar a sétima cor ao orderInput em brilhantejqui

Atualização: Implementada a sugestão de @Stéphane Laurent:

alterado .grey > buttoncom #grey > .btn removido library(shinyjs)e useShinyjs() aumento de 50 para 75

A função orderInput() do brilhantejqui foi projetada com as classes de botão Bootstrap em mente. Se a função não oferece suporte nativo a classes personalizadas, talvez seja necessário aplicar um hack para contornar isso.

Você definiu a classe .grey corretamente, mas se orderInput() não oferecer suporte direto a classes personalizadas, um método seria usar JavaScript para modificar o atributo de classe dos elementos HTML renderizados depois de terem sido criados pelo Shiny.

Talvez você possa tentar esta solução alternativa para corrigir seu problema:

Inclui uma shinyjsfunção para executar JS personalizado. Execute um pequeno script JS para adicionar sua classe personalizada aos elementos desejados após eles serem renderizados. Agora você pode modificar seu código existente para conseguir isso:

library(shiny)
library(shinyjqui)

ui <- fluidPage(
  tags$head(
    tags$style(
      HTML("
            .grey { background-color: grey; color: white; }
           ")
    )
  ),
  
  uiOutput("custom_orderInput"),
  
  # Add a JS script to add the 'grey' class to the appropriate elements
  tags$script(
    HTML("
         $(document).on('shiny:connected', function(event) {
           setTimeout(function(){
             $('#grey > .btn').addClass('grey');
           }, 75);
         });
         ")
  )
)

server <- function(input, output, session) {
  
  output$custom_orderInput <- renderUI({
    
    tagList(
      orderInput('default', 'default', items = 1:3, item_class = 'default'),
      orderInput('primary', 'primary', items = 1:3, item_class = 'primary'),
      orderInput('success', 'success', items = 1:3, item_class = 'success'),
      orderInput('info', 'info', items = 1:3, item_class = 'info'),
      orderInput('warning', 'warning', items = 1:3, item_class = 'warning'),
      orderInput('danger', 'danger', items = 1:3, item_class = 'danger'),
      orderInput('grey', 'grey', items = 7:9, item_class = 'default') # Use 'default' as a placeholder
    )
    
  })
  
}

shinyApp(ui, server)

Desta forma, utilizando o shinyjspacote para integrar JS customizado. Depois que o aplicativo Shiny se conecta, o JavaScript espera um pouco (50 ms neste caso, mas você pode ajustar conforme necessário) e então adiciona a classe .grey aos elementos do botão dentro do .greypai. Também definimos item_class como 'default' como espaço reservado, que será substituído por nosso JS.

A resposta de @ 0xe1λ7r é boa. Dito isto, você pode evitar o uso de setTimeoutwhich implica a escolha do atraso e usar setIntervale clearIntervalem vez disso:

    HTML("
         $(document).on('shiny:connected', function(event) {
            var interval = setInterval(function() {
              var $itemGroup = $('#grey > .btn');
              if($itemGroup.length) {
                $itemGroup.addClass('grey');
                clearInterval(interval);
              }
            }, 10);
         });
   ")

Com este código, a existência do grupo de itens é verificada a cada período de 10 ms após a conexão do Shiny, e uma vez detectada a nova classe é adicionada e então o código é destruído.