search

moj-analytical-services / shinyGovstyle

Now up to GDS frontend version v4.0.0
37 stars 6 forks source link

Updating file upload to be consistent with GDS #91

Open rmbielby opened 1 week ago

rmbielby commented 1 week ago

Some notes on this one

The reason that it's not picking up the GDS styling is that shiny implements it's own tailored upload input that's different from the standard html method that the GDS assumes:

Shiny

      shiny::tags$label(label, class="govuk-label"),
      shiny::div(id = paste0(inputId,"file_div"), class = "input-group",
          shiny::tags$label(class = "input-group-btn",
                     shiny::span(class = "btn btn-default btn-file",
                          buttonLabel,
                          inputTag
                     )
          ),
          shiny::tags$input(type = "text", class = "form-control",
                     placeholder = placeholder, readonly = "readonly"
          )
      )

You can see that uses the css hierarchical classes input-group, input-group-btn, btn, btn-default, btn-file and form-control. These are all standard in bootstrap.css.

GDS

The GDS html method would translate to something like the following using htmltools::tags():

      shiny::tags$label(label, class="govuk-label"),
      shiny::tags$input(class = "govuk-file-upload", id="inputId", type="file")

So the elements to be styled are just different types of things - Shiny creates it's own button and text input, whilst GDS assumes the standard file upload html input. So it either needs some entirely new css writing I think or the file upload function overhauling to use the tag input(...,file="type").