Refactor buttons and pagination to fix alignment issues

[anselmbradford]

Refactor buttons to have less reliance on markup structure and classes, to simplify markup and fix alignment issues.

Removals

• a-btn__icon--on-left and a-btn__icon--on-right classes.

Changes

• Refactor buttons to fix alignment issues
• Remove a-btn__text and a-btn__icon classes and instead target the text and icon with .a-btn span and .a-btn svg.
• Update buttons to use flexbox and pagination to use grid and flexbox.

Testing

1. Compare https://deploy-preview-2091--cfpb-design-system.netlify.app/design-system/components/pagination and https://deploy-preview-2091--cfpb-design-system.netlify.app/design-system/components/buttons to production.

Screenshots

Before

Note that the "Back" is too close to the divider.

After

^ Practically, this shouldn't show up. It's showing up here because the container for the pagination can be very narrow on the DS. This should probably use a container query, but for now, this just fixes the clipping that happens in the current version.

Notes

• There's a current a11y error on the pagination page where the label has a for attribute and shouldn't. This PR fixes that.

[netlify]

✅ Thanks for the improvements! Browse a preview of your changes using the link below.

Name	Link
🔨 Latest commit	f936fe7
🔍 Latest deploy log	https://app.netlify.com/sites/cfpb-design-system/deploys/672baa163eeb110008a6c845
😎 Deploy Preview	https://deploy-preview-2091--cfpb-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[contolini]

Looks so much better 👍