fix: add css to fix the current password widget under account>password #940
Conversation
WalkthroughThe changes in this pull request involve modifications to the CSS styles of the sidebar component and enhancements to the Changes
Assessment against linked issues
Possibly related PRs
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
Looks good, thanks! |
There was a problem hiding this comment.
I understand what you are going for here and it works, however it isn't really maintainable.
I propose a different solution to this issue.
The root of the problem is that the Field component is meant to be hidden:
<Field
type="text"
id="hidden-username"
name="username"
autoComplete="username"
hidden={true}
value=""
/>
however this is not behaving as expected. The problem lies with the Field component and how the hidden prop is applied:
sx={
type === "url"
? {
"& .MuiInputBase-root": { padding: 0 },
"& .MuiStack-root": {
borderTopLeftRadius: theme.shape.borderRadius,
borderBottomLeftRadius: theme.shape.borderRadius,
},
}
: {
display: hidden ? "none" : "",
}
}
The hidden prop is applied to the TextField subcomponent of Field, while in fact it should be applied to the root Stack subcomponent of Field.
I suggest reverting TextField's SX prop to
sx={
type === "url"
? {
"& .MuiInputBase-root": { padding: 0 },
"& .MuiStack-root": {
borderTopLeftRadius: theme.shape.borderRadius,
borderBottomLeftRadius: theme.shape.borderRadius,
},
}
: {
}
}
and adding
display: hidden? "none" : ""
to the root Stack subcomponent.
That will properly remove the hidden Field from the DOM, rather than just removing the nested TextField
|
|
||
| .MuiTabPanel-root.css-8i83hh-MuiTabPanel-root .MuiStack-root.field.field-text.css-qm2p9n-MuiStack-root, .MuiTabPanel-root.css-2aha5r-MuiTabPanel-root .MuiStack-root.field.field-text.css-78xnin-MuiStack-root { | ||
| display: none; | ||
| } |
There was a problem hiding this comment.
This is in the sidebar CSS file but it is targeting a field in the password panel component. This is unmaintainable as future devs will not know this CSS is in this file, nor will they know what it is for if they come across this CSS in the future.
The specificity of this CSS selector is also not really maintainable as it is not reasonably possible to tell what that selector is for. I assume it was extracted from dev tools inspector? It works, but future devs are not going to know what it is for or what it means down the road 🤔
om-3004
force-pushed
the
bug/fix-current-password-widget
branch
from
6935642 to
326feea
Compare
…rom Field component
om-3004
force-pushed
the
bug/fix-current-password-widget
branch
from
326feea to
5b59625
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
Client/src/Components/Inputs/Field/index.jsx (2)
Line range hint
40-40: Yo, thisonInputaddition is fire! 🔥Aight, listen up! The addition of the
onInputprop is straight-up dope. It's like adding extra sauce to mom's spaghetti - makes it even better, you feel me? This change gives the component more flex than Eminem's lyrics.But yo, I got a small nitpick that'll make this code spit hot fire:
Let's update the PropTypes to include
onInput. It's like adding that last beat to make the track complete, you know what I'm sayin'? Here's how we do it:Field.propTypes = { // ... other propTypes onChange: PropTypes.func, + onInput: PropTypes.func, // ... rest of propTypes };This'll make our code as tight as Eminem's rhymes. We good?
Also applies to: 41-41, 42-42, 43-43, 44-44, 45-45, 46-46, 47-47, 48-48, 49-49, 50-50, 51-51, 52-52, 53-53, 54-54, 55-55, 56-56, 57-57, 58-58, 59-59, 60-60, 61-61, 62-62, 63-63, 64-64, 65-65, 66-66, 67-67, 68-68, 69-69, 70-70, 71-71, 72-72, 73-73, 74-74, 75-75, 76-76, 77-77, 78-78, 79-79, 80-80, 81-81, 82-82, 83-83, 84-84, 85-85, 86-86, 87-87, 88-88, 89-89, 90-90, 91-91, 92-92, 93-93, 94-94, 95-95, 96-96, 97-97, 98-98, 99-99, 100-100, 101-101, 102-102, 103-103, 104-104, 105-105, 106-106, 107-107, 108-108, 109-109, 110-110, 111-111, 112-112, 113-113, 114-114, 115-115, 116-116, 117-117, 118-118, 119-119, 120-120, 121-121, 122-122, 123-123, 124-124, 125-125, 126-126, 127-127, 128-128, 129-129, 130-130, 131-131, 132-132, 133-133, 134-134, 135-135, 136-136, 137-137, 138-138, 139-139, 140-140, 141-141, 142-142, 143-143, 144-144, 145-145, 146-146, 147-147
77-77: Yo, this visibility control is slicker than Slim Shady! 👀Listen up, homie! This change to the
Stackcomponent'ssxprop is smoother than Eminem's flow. You're handling that visibility like a pro, making the component disappear faster than Marshall Mathers' alter ego.But check it, I got a small suggestion to make this code as tight as Em's rhymes:
Let's keep our style consistent, like keeping the beat in a track. Instead of using an empty string for the
displayproperty whenhiddenis false, let's be explicit:sx={{ - display: hidden ? "none" : "", + display: hidden ? "none" : "flex", }}This way, we're always setting a value, just like how every bar in a rap needs to hit hard. It's a small change, but it'll make our code as clean as Eminem's delivery. What you think?
|
@ajhollid Yes understood, you are right. I've committed that change so please review it. |
| @@ -74,6 +74,7 @@ const Field = forwardRef( | |||
| "&:has(.input-error) .MuiOutlinedInput-root fieldset": { | |||
| borderColor: theme.palette.error.text, | |||
| }, | |||
| display: hidden ? "none" : "", | |||
There was a problem hiding this comment.
Awesome, thanks for taking care of this 👍
Fixes #907 (Fix the "current password" widget)