Add appearances and update inc/dec for number field

[m-akinc]

Pull Request

🤨 Rationale

Fixes #361

👩‍💻 Implementation

• Replaced inc/dec arrow glyphs with plus/minus
• Added hover effect for inc/dec
• Added appearance attribute and implemented missing outline and block appearances
• Updated Storybook with new appearances

Note that the following are still incomplete/does not match the design doc:

• Implement the invalid styling. This is not straightforward, since there isn't a slot for us to insert the exclamation icon.
• Show the inc/dec buttons in disabled mode. The design doc says we should show them dimmed when disabled, but the FAST foundation number field's template hides them when disabled.

🧪 Testing

Tested in Storybook

✅ Checklist

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

[mollykreis]

Similar to the combobox, I would have expected these "button" to be actual buttons with a pressed state & potentially to also be focusable. I'm guessing that is also difficult given the FAST template?

[m-akinc]

Similar to the combobox, I would have expected these "button" to be actual buttons with a pressed state & potentially to also be focusable. I'm guessing that is also difficult given the FAST template?

@mollykreis I think we can actually pass an html template (using Nimble buttons) for the "step-up" and "step-down" glyphs, so I think we could do what you suggest. Do we really want that? I'm not sure it's useful to have the inc/dec "buttons" be keyboard focusable, since you can do the same with the up/down arrows when the input itself is focused. Also, the inc/dec buttons are smaller than the standard button height/width, but I guess we could just size them down.

[mollykreis]

Similar to the combobox, I would have expected these "button" to be actual buttons with a pressed state & potentially to also be focusable. I'm guessing that is also difficult given the FAST template?

@mollykreis I think we can actually pass an html template (using Nimble buttons) for the "step-up" and "step-down" glyphs, so I think we could do what you suggest. Do we really want that? I'm not sure it's useful to have the inc/dec "buttons" be keyboard focusable, since you can do the same with the up/down arrows when the input itself is focused. Also, the inc/dec buttons are smaller than the standard button height/width, but I guess we could just size them down.

@m-akinc, my thought is, yes, that is what we want, but I'm not necessarily the person to officially make that decision. Looking at the XD doc, though, it seems like Brandon used buttons within the component. They have a pressed state in XD. I think we'd want it to be consistent with the combobox, which also uses a smaller-than-standard button.

[mollykreis]

I agree with Milan's feedback and don't have anything additional to add.