Tab bar does not work as described

[bengolder]

The HTML in the Tab bar example, when implemented without customizations, does not style the selected tab.

The current scss looks like this:

%tab-is-selected {
  background-color: $color-background;
  color: $color-grey-darkest;
  font-weight: 600;
  z-index: 2;

  &:before {
    background-color: $color-background;
    content: '';
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
  }
}

DRAI had to customized this to get it to work properly https://github.com/codeforamerica/drai/blob/main/app/assets/stylesheets/partials/_customizations.scss#L28-L45

// In Honeycrisp, this is nested inside .template--styleguide
.tab-bar__tab.is-selected {
  background-color: $color-background;
  color: $color-grey-darkest;
  font-weight: 600;
  z-index: 2;

  &:before {
    background-color: $color-background;
    content: '';
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
  }
}