feat(menu-button): support dynamic type

[brandyscarney]

Issue number: N/A

---

What is the current behavior?

Menu buttons do not support dynamic type.

What is the new behavior?

• Adds support for dynamic type by converting font-size to use rem units
• Adds test for scaling the font which checks the menu button at 310%

Does this introduce a breaking change?

• Yes
• No

Other information

I looked into how this should behave on iOS and here's what I found:

• This is not a standard paradigm in iOS. Native iOS apps typically use lists & tabs for navigation. I checked the following native apps and they do not have a menu button:
  • App Store, Books, Calendar, Contacts, Files, Fitness, Freeform, Mail, Maps, Messages, Music, Notes, Phone, Podcasts, Reminders, Safari, Settings
• The only two apps I found with menu buttons were Discord and Lyft
  • Both of these apps do not scale the menu button at all. Discord is built with React Native and Lyft is built with Swift.
• I recreated it in a native Swift app by placing a button in a toolbar with a hamburger icon and got the following. I used this in order to set the min and max font-size in ios.

SwiftUI Code

import SwiftUI

struct HomeView: View {
  var body: some View {
    NavigationView {
      VStack{
        Spacer()
        Text("Home View")
        Spacer()
      }
      .toolbar {
        Button {
        } label: {
          HStack {
            Image(systemName: "line.3.horizontal")
          }
        }
        .buttonStyle(.borderless)
      }
      .padding(.horizontal, 24)
    }
  }
}

80%	100%	310%

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[thetaPC]

LGTM