setting 100px as default width for buttons

[shanbady]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/4717

Description (What does it do?)

Sets a min width of 100px for buttons

How can this be tested?

Checkout this branch and ensure all buttons such as the login button have a minimum width of 100px

[jonkafton]

We probably don't want the min width on action and and icon only buttons (e.g. on the LearningResourceCards), though they could use separate treatment from the main Button component, maybe their own component.

The action buttons have their own widths, so minWidth: "auto" in the actionStyles around L305 should fix.

vs

[ChristopherChudzicki]

See Jon's comment.

Please also take a look at the relevant storybook pages... e.g.,

• http://localhost:6006/?path=/story/smoot-design-button--action-buttons-showcase
• http://localhost:6006/?path=/story/smoot-design-button--buttons-showcase

just to make sure things look reasonable.

[shanbady]

See Jon's comment.

Please also take a look at the relevant storybook pages... e.g.,

• http://localhost:6006/?path=/story/smoot-design-button--action-buttons-showcase
• http://localhost:6006/?path=/story/smoot-design-button--buttons-showcase

just to make sure things look reasonable.

thanks. I keep forgetting we have something like this

[shanbady]

@jonkafton

just pushed a fix with your suggestion

[ChristopherChudzicki]

There's a tab question for @steven-hatch.

@shanbady ... requested change: Could you fix the MenuButton to not use Button? Probably should just be a snowflake styled.button(...).

[ChristopherChudzicki]

Our tab component is based on Button (it uses tertiary buttons). So this increases the width, of tabs, too.

@steven-hatch Do we want tabs to have min-width 100px? I can see pros/cons

Really the only con is width on mobile screens.

Separate issue

In the screenshots above, you can see the mobile menu button in top-left corner now has wrong width.

@shanbady I'm sorry this came up... Button should not have been used for that in the first place. (Bright side: with your change, probably less likely to be used incorrectly for stuff like this.)

But, could you fix it so we don't regress? Probably that menu button should be a "Snowflake". I would just apply the relevant styles to it. See figma: https://www.figma.com/design/Eux3guSenAFVvNHGi1Y9Wm/MIT-Design-System?node-id=3852-51162&m=dev

The code is in frontends/mit-open/src/page-components/Header/MenuButton.tsx

[shanbady]

Should be addressed now @ChristopherChudzicki

[ChristopherChudzicki]

Could you remove these? They do nothing with borderStyle: "none".

In <Button /> they do have an effect, but then variant="text" set borderStyle to none, so they aren't relevant for that variant.

[ChristopherChudzicki]

👍 Looks good. I would suggest removing the borderWith and borderColor on the menu button, as noted.