-
Notifications
You must be signed in to change notification settings - Fork 364
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
upcoming: [M3-7980] - Update PlacementGroups linodes tooltip and SelectPlacementGroup option label #10408
Conversation
…SelectPlacementGroup option label
Coverage Report: ✅ |
const optionLabel = (placementGroup: PlacementGroup, selected?: boolean) => ( | ||
<Stack | ||
alignItems="center" | ||
direction="row" | ||
flex={1} | ||
position="relative" | ||
width="100%" | ||
> | ||
<Stack component="span">{placementGroup.label}</Stack>{' '} | ||
<Stack | ||
sx={{ | ||
position: 'absolute', | ||
right: selected ? 14 : 34, | ||
whiteSpace: 'nowrap', | ||
}} | ||
component="span" | ||
> | ||
({AFFINITY_TYPES[placementGroup.affinity_type]}) | ||
</Stack> | ||
</Stack> | ||
); |
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.
Does this need to live here? Could it just be baked into PlacementGroupSelectOption
? If so, I think it could clean things up a lot.
Is the absolute positioning needed? I think I was able to create a similar UI with a lot less one-off styling and positioning.
const optionLabel = (placementGroup: PlacementGroup, selected: boolean) => (
<Stack
alignItems="center"
direction="row"
flexGrow={1}
justifyContent="space-between"
pr={selected ? 2 : undefined}
>
<Stack>{placementGroup.label}</Stack>{' '}
<Stack>({AFFINITY_TYPES[placementGroup.affinity_type]})</Stack>
</Stack>
)
I didn't thoroughly test that code, just quickly looked for ways to clean up. Absolute positioning feels a bit scary to me
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.
Did you have to deal with the "selected" icon when doing so?
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.
and yeah, i'll move 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.
FWIW 'absolute' really isn't bad if your immediate parent is 'relative'. it's quite safe
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 was pretty proud of how clean I was able to get the ImageOptionv2
component if you're looking for something to compare to., although, your select has the special "max capacity tooltip" which will definitely add some complexity.
Good to know about absolute
+ relative
. That stuff is foreign to me
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.
Improved things a bit around there, still had some dynamic positioning to do but it "looks" cleaner. Using quotes here cause yeah, the code may look cleaner to you, but sometimes I also care more about the output, and in those cases using a <Stack flexGrow={1} />
(aka adding another useless div) to achieve some basic spacing feels quite worse than using good ol' CSS done well.
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.
Confirmed the two changes. Left a suggestion about the PG select.
Unrelated to this PR, I did notice some spacing issues when the Region field shows an error. (I am assuming that the error is intended at this point, also.) Not sure if an existing ticket exists for this -- and maybe it should be a Gecko one.
Edit: It looks like in M3-7949, which is paused but part of Gecko GA, we intend to get rid of the Edge icon anyway and separate out the region select into two tabs, so I don't think we'll need to worry about this long-term, though I will mention it to Hana.
packages/manager/src/components/PlacementGroupsSelect/PlacementGroupsSelect.tsx
Outdated
Show resolved
Hide resolved
packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsRow.tsx
Show resolved
Hide resolved
packages/manager/.changeset/pr-10408-upcoming-features-1714066606151.md
Outdated
Show resolved
Hide resolved
@@ -123,12 +123,16 @@ export const PlacementGroupsDetailPanel = (props: Props) => { | |||
mb: 1, | |||
width: '100%', | |||
}} | |||
textFieldProps={{ | |||
tooltipClasses: 'poo', |
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.
Is this class used? 💩
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.
🤣 you have found my one debugging secret
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.
Description 📝
Small PR to bring a couple UI updates to the Placement Groups
Changes 🔄
List any change relevant to the reviewer.
Preview 📷
How to test 🧪
Verification steps
ℹ️ Perform these verifications in Alpha
As an Author I have considered 🤔
Check all that apply