Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(bn-file-input): change default style #29

Merged
merged 3 commits into from
Aug 22, 2023
Merged

Conversation

gmq
Copy link
Member

@gmq gmq commented Aug 21, 2023

Context

  • Banano is a component library for use in platanus projects.
  • The file input component had a provisional style.

Changes

  • The style has been updated, moving the button to the right and making the border slightly lighter.
  • At some point the component stopped being able to truncate filenames, overflowing its parent. A fix is added to make flex work with text truncation.
  • BnBtn rounded variant is reduced slightly to fit style.

Before:
image

After:
image

@gmq gmq requested a review from difernandez August 21, 2023 21:36
@gmq
Copy link
Member Author

gmq commented Aug 21, 2023

@gmq gmq changed the title feat(bn-btn): reduce default rounded value feat(bn-file-input): change default style Aug 21, 2023
},
'&__label': {
'@apply w-full overflow-hidden text-sm text-banano-text-foreground': {},
},
'&__file-list': {
'@apply flex w-full items-center': {},
'@apply flex w-0 min-w-full max-w-full items-center': {},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

where did you get this w-0 min-w-full max-w-full idea 😮

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trial and error 😅 This sort of thing can usually be fixed using min-width: 0 but it didn't work in this case.
Flexbox + truncated text gets weird, I think the wrapper is maybe interfering with how it should work. There's probably a better solution but it works for now.

@gmq gmq merged commit 4def7d3 into master Aug 22, 2023
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants