valueBox class not always being cleared

[davidski]

When setting the color attribute based upon the value of the input to valueBox when using the Shiny runtime, the valuebox div does not always have the previous class removed and winds up with two bg-* classes applied (and the wrong value taking precedence).

To reproduce:

1. Run the following example (or check out the live running version on Shinnyapps)
2. Choose danger and see the color change as expected
3. Choose success and see the color change as expected
4. Choose danger again and see the color not change. Inspecting the HTML shows two classes now applied.

Example code as follows:

```
---
title: "Shiny testbed"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
library(tidyverse)
```

Column {data-width=650}
-----------------------------------------------------------------------

### Chart A

```{r}
data(mtcars)
ggplot(mtcars, aes(mpg, cyl)) + geom_point()
```

Column {data-width=350}
-----------------------------------------------------------------------

### Input Selection

```{r}
class_color <- c("warning", "danger", "success")
selectInput("input_value", "Choose Color", class_color)
```

### Datatable

```{r}
options(DT.fillContainer = FALSE)
options(DT.autoHideNavigation = FALSE)
DT::renderDataTable({
 dat <- mtcars
 DT::datatable(dat, options = list(
    scrollY = "200px"
  ))
})
```

### Valuebox
```{r}
renderValueBox({
  dat <- input$input_value
  valueBox(dat,
           caption = "Testing colors", icon = "fa-pencil", 
           color = dat)
})
```
```

[jjallaire]

I've seen this bug before but had hard time reproing it -- this drove me crazy! Thanks so much, I'll see if I can get it fixed based on your example.

[Felixmil]

@jjallaire This bug seems to be back.

I reused the the example presented here and got the behavior described by @davidski above.

I thinks it's because the value box class are now value-box-danger and not bg-danger .

I tried to fork the repo and modify the lines that changed in 5bd738c but couldn't find the file inst/rmarkdown/templates/flex_dashboard/resources/flexdashboard.js. How does it work now ?

[Felixmil]

Looks like I found a way to fix it with these modifications by adding:
valueBox.removeClass('value-box-danger value-box-primary value-box-info value-box-warning value-box-danger value-box-success'); at lines 1626 & 1638 in flexdashboard.js

Result:

      if (dataColorAccent) {
        valueBox.removeClass('value-box-danger value-box-primary value-box-info value-box-warning value-box-danger value-box-success');
        valueBox.addClass('value-box-' + dataColorAccent);
      }

      // If valueBox(color=) was a CSS color, these other data-color-*
      // attrs will be populated
      var dataColor = valueOutput.attr('data-color');
      if (dataColor) {
        valueBox.removeClass('value-box-danger value-box-primary value-box-info value-box-warning value-box-danger value-box-success');
        valueBox.css('background-color', dataColor);
      }

I'll make a PR !