# Recipes

## Introduction

This vignette walks the user through some applications of linne.

## Shiny Inputs

Shiny developers often want to customise how shiny inputs look and feel, which can be a bother. Let’s say we want to change the label color of the `textInput` shiny input.

    shiny::textInput(inputId = "text", "Label")

    cat(as.character(shiny::textInput(inputId = "text", "Label")))
    #> <div class="form-group shiny-input-container">
    #>   <label class="control-label" for="text">Label</label>
    #>   <input id="text" type="text" class="form-control" value=""/>
    #> </div>

One might be tempted to only use `sel_id('text')`, as demonstrated above, this would not work. We could instead use on of the infix operators select the child tag “label” of the input.

    Linne$new()$
      rule(
        sel_id("text") %child% sel_tag("label"),
        color = "#f4a717"
      )$show_css()
    #> #text label{
    #>  color:#f4a717;
    #> }

Now, just to demonstrate what is possible with CSS, say we want to change the font size of a specific option in a `selectInput`.

    shiny::selectInput("select", "Select one:", choices = letters[1:3])

    cat(as.character(shiny::selectInput("select", "Select one:", choices = letters[1:3])))
    #> <div class="form-group shiny-input-container">
    #>   <label class="control-label" for="select">Select one:</label>
    #>   <div>
    #>     <select id="select"><option value="a" selected>a</option>
    #> <option value="b">b</option>
    #> <option value="c">c</option></select>
    #>     <script type="application/json" data-for="select" data-nonempty="">{}</script>
    #>   </div>
    #> </div>

We can again use a combination of selectors to select say, option “b”, to a different size.

    Linne$new()$
      rule(
        sel_id("select") # inputId = "select"
          %child%
          sel_attr("value", "b"), # value = 'b'
        color = "#f4a717"
      )$show_css()
    #> #select [value='b']{
    #>  color:#f4a717;
    #> }

> A good way to conceptualise the `%child%` operator is to think of it like one uses the pipe in the rvest package or how one might use the pipe in purrr: to gradually but surely go down the tree until the right node is selected.