-
Notifications
You must be signed in to change notification settings - Fork 203
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
Add rounded corners to all components #5938
Conversation
@@ -69,6 +69,7 @@ export default function SidebarPanel({ | |||
onClose={closePanel} | |||
transitionComponent={Slider} | |||
variant={variant} | |||
scrollable={false} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Need to check why, but making the Dialog scrollable messes with the bottom corners and makes them non-rounded.
This specific Dialog does not have a fixed height, so the scroll does not add any value here and we can just disable it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This would fix it hypothesis/frontend-shared#1352
lg: '0.5rem', | ||
}, | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This makes annotator components be always rounded.
This was their behavior already, but it was set via hardcoded border radius rounded-[4px]
.
Those classes have been replaced by rounded
, and this config ensures they keep looking the same regardless the feature being enabled or not, while it becomes ready for the future, when we just use tailwind defaults.
borderRadius: { | ||
// Equivalent to tailwind default `rounded-sm` size | ||
DEFAULT: '0.125rem', | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We now use the config defined in frontend-shared's tailwind preset.
76ae2a4
to
0066570
Compare
src/sidebar/components/ShareDialog/test/ExportAnnotations-test.js
Outdated
Show resolved
Hide resolved
Codecov Report
@@ Coverage Diff @@
## main #5938 +/- ##
=======================================
Coverage 99.44% 99.44%
=======================================
Files 257 257
Lines 9887 9888 +1
Branches 2362 2363 +1
=======================================
+ Hits 9832 9833 +1
Misses 55 55
📣 Codecov offers a browser extension for seamless coverage viewing on GitHub. Try it in Chrome or Firefox today! |
0066570
to
86e0166
Compare
86e0166
to
beafb12
Compare
@@ -130,9 +130,10 @@ export default function ClusterToolbar({ | |||
} | |||
|
|||
return ( | |||
<Card> | |||
<Card classes="overflow-hidden"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -107,11 +107,11 @@ export default function AutocompleteList<Item>({ | |||
)} | |||
data-testid="autocomplete-list-container" | |||
> | |||
<Card width="auto"> | |||
<Card width="auto" classes="overflow-hidden"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -239,7 +239,7 @@ export default function MenuItem({ | |||
const wrapperClasses = classnames( | |||
'focus-visible-ring ring-inset', | |||
'w-full min-w-[150px] flex items-center select-none', | |||
'border-b', | |||
'border-b rounded-none cursor-pointer', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This addresses inconsistencies in which link menu items were being rendered with rounded corners on hover, while non-links were not rounded.
I took the opportunity to address other inconsistencies between link vs non-link menu items, like hover color and cursor type.
// appropriate times. | ||
const withSaveMessage = saveCount > 0 && !loading; | ||
|
||
return ( | ||
<Card data-testid="profile-container"> | ||
<Card data-testid="profile-container" classes="overflow-hidden"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
beafb12
to
d835a04
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Overall I think this PR is good except for the extra scrollbar gutters that have appeared. I mentioned a couple of other minor issues.
'right-0': align === 'right', | ||
// Adding negative right distance so that the menu arrow does | ||
// not overlap with the top-right corner when it's rounded | ||
'-right-1': align === 'right', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm wondering whether we should remove the up arrow for menus where the up-arrow was previously aligned with either the right or left edge of its toggle button. This seems to be the pattern that several web properties (eg. GitHub) use.
d835a04
to
6aaaa6c
Compare
@robertknight I have pushed some changes:
Done
Fixed
As discussed in slack, I'm deferring this to a follow-up PR where I will review the usage of arrow in menus in general.
I think this is not something introduced by this PR 🤔 I see the sidebar has |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
This PR adds preliminary support for rounded corners in the client, disabled behind a feature flag.
The changes include:
rounded-[4px]
) to use standard rounded corner sizes.Testing steps
h
instance is up to date. Go to http://localhost:5000/admin/features and enable therounded_corners
feature flag.Closes #5602