Toggle button

[mollykreis]

Pull Request

🤨 Rationale

Create a toggle button within nimble-components

👩‍💻 Implementation

The new toggle button is built on top of the FAST switch but styled like the nimble-button.

The nimble-toggle-button and the nimble-button share appearance modes and styles, which are now sourced within patterns/buttons.

🧪 Testing

• Manually tested the new buttons in storybook
• Added automated tests that are largely based on the FAST tests for the switch
• Verified there are no accessibility violations in story book for the new stories

✅ Checklist

• I have updated the project documentation to reflect my changes or determined no changes are needed.

[rajsite]

Can we use the pattern here: https://github.com/ni/nimble/blob/main/packages/nimble-components/docs/css-guidelines.md#prefer-cascade-for-state-changes

Some ideas:

• It looks like all of these styles are targeting the the .control element with aria-pressed='true' can we put that selector first?
• Can we avoid using the :not() operator? I think it's easier to understand the style when the state is spelled out explicitly. I don't have to evaluate the list of selectors associated with the same properties or evaluate not selectors. It becomes more of a look-up table for specific states. ie something like the following (I didn't check thoroughly for accuracy, may need to double check the logic. I also re-ordered it to make hover < focusVisible < active like the docs show, but dunno if that's the intention here):

    .control[aria-pressed='true'] {
        background-color: ${fillColorSelected};
        border-color: ${fillColorSelected};
    }

    .control[aria-pressed='true']:hover {
        background-color: ${fillColorSelected};
        border-color: ${borderColorHover};
    }

    .control[aria-pressed='true']${focusVisible} {
        background-color: ${fillColorSelected};
    }

    .control[aria-pressed='true']:active {
        background-color: ${fillColorSelected};
        border-color: ${fillColorSelected};
    }


    .control[aria-pressed='true'][disabled] {
        background-color: ${fillColorSelected};
        border-color: ${fillColorSelected};
    }

    .control[aria-pressed='true'][disabled]:hover {
        background-color: ${fillColorSelected};
        border-color: ${fillColorSelected};
    }

[rajsite]

When spelled out like that I wonder if background-color: ${fillColorSelected}; needs to be defined in each selector. Is it covered by the definition in the first .control[aria-pressed='true']? It could easily be due to other styles in buttonStyles that are being overriden in the cascade. Just thought I'd ask jic.

[mollykreis]

I reordered the styles and got rid of the :not() selector as you suggested. I confirmed that all the usages background-color: ${fillColorSelected} are required, but I was able to remove the hover border styling since it was duplicated from the underlying button styles.