Button: Create collapsible buttons

[joiechang]

The problem
Currently, at smaller screen sizes, buttons with text labels take up a lot of space. There are many reasons to display buttons with labels when a user is at a larger breakpoint or on a desktop, but if a user resizes their window, these same buttons often end up cramped on the screen and create poor reflow. This is especially a problem when using multiple Pharos buttons in a row, such as in a table's action bar.

The solution
In order to have better mobile-first design, we need a way to manage our button size to be responsive to smaller screen sizes.

We want to add a property that would create dynamically collapsible buttons at breakpoints specified by the consumer. We "collapse" the button by removing the text label and making the button icon only. The icon only button should possess a tooltip on hover that displays the button's text label and the button should retain its aria label as well.

Buttons must possess an icon in order to collapse - buttons that are only text labels cannot collapse.

The styling rules are as follows:

• Primary buttons collapse to primary buttons
• Secondary and subtle buttons collapse to subtle buttons
• Overlay buttons collapse to overlay buttons

We want the consumer to make the choice of which breakpoint to collapse at, so that they can make a contextually appropriate choice depending on the design. For example, if a button is in a small panel situated on the page, it may need to collapse at a larger breakpoint because of the pre-existing constraints of panel size. However, we would recommend making intentional choices to avoid buttons close together collapsing at different breakpoints and thus creating a disorienting and staggered experience.

Alternatives considered
We considered making smaller button variant. However, even smaller buttons would still have similar problems handling text labels at mobile sizes. We are also cognizant we don't want to blend multiple button sizes in close proximity.

We also considered building this collapsible logic outside of the Pharos system. However, the management of buttons and having to add unique responsive logic to each page based on breakpoints seemed like it would be less scalable and consistent across large scale implementations.

Additional information
We'll also want to append this into the Button Pharos documentation under the Variants section.

**Collapsible**

Add the collapsible property to buttons to remove label text and create an icon-only button at smaller breakpoints. This should be used primarily to help improve responsiveness. Only buttons with icons can be collapsible. Label text for the collapsed button will move into the tooltip and must be visible on hover and focus. 

Make certain that your button iconography is universal enough so its function remains evident after collapse. Avoid collapsing buttons with complex labels, key actions, or unique functions. 

Ensure that the breakpoint selected is consistent for your buttons across your page to avoid disorienting the user with different buttons collapsing at different screen widths.