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.

Sign up for GitHub

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

Jump to bottom

[MM-54367] Apply scope to the menu class #213

Merged
merged 5 commits into from
Sep 28, 2023
Merged

[MM-54367] Apply scope to the menu class #213

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b647dc5
apply scope to the menu class
kyeongsoosoo Sep 15, 2023
5f590c7
change error message
kyeongsoosoo Sep 27, 2023
7182d14
remove unused classnames
kyeongsoosoo Sep 27, 2023
72251f3
fix lint
kyeongsoosoo Sep 27, 2023
9f5404d
update branch
kyeongsoosoo Sep 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions webapp/src/widget/menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.status-dropdown-menu {
> .Menu {
> .TodoMenu {
Comment on lines 1 to +2
Copy link
Contributor

Choose a reason for hiding this comment

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

Unrelated to this PR, but it seems wrong to assume that the plugin's TodoMenu component will always be a next-level descendant of the element that has status-dropdown-menu class name

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I thought it would be okay because position is applied separately to the TodoMenu classname.
https://github.com/mattermost/mattermost-plugin-todo/blob/a309a7ab63f0ea0ec7b91e7f46b22045e84ee08e/webapp/src/widget/menu.scss#L7-L10

Copy link
Contributor

Choose a reason for hiding this comment

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

Right, but .status-dropdown-menu is managed by the core webapp. At any point, the webapp could restructure itsrlf and do one of:

  • Remove that class name altogether
  • Change its component structure to have a component in between .status-dropdown-menu and the plugin's component

Both of these would make it so our plugin styles don't get used. The alternative is to not have the > in the selector

position: inherit;
}
}

.Menu {
.TodoMenu {
display: flex;
flex-direction: column;
position: absolute;
Expand Down Expand Up @@ -125,8 +125,8 @@
}
}

.Menu,
.SubMenuOption .SubMenu {
.TodoMenu,
.SubTodoMenuOption .SubTodoMenu {
Copy link
Contributor

Choose a reason for hiding this comment

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

I see changes in the code for Menu->TodoMenu. Is there any change for SubMenuOption->SubTodoMenuOption needed?

Copy link
Contributor Author

@kyeongsoosoo kyeongsoosoo Sep 15, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

I think it's not needed now. I added it for the future use-case.

Copy link
Contributor

Choose a reason for hiding this comment

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

If there is no class name being used in the components SubTodoMenuOption or SubTodoMenu, then I think they should be removed from the scss file to avoid confusion. Likely, yagni

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@mickmister I removed the unused classnames.

@media screen and (max-width: 430px) {
position: fixed;
top: 0;
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/widget/menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default class Menu extends React.PureComponent<Props> {

return (
<div
className={'Menu noselect ' + (position || 'bottom')}
className={'TodoMenu noselect ' + (position || 'bottom')}
tabIndex={0}
>
<div className='menu-contents'>
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/widget/menuWrapper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.MenuWrapper {
.TodoMenuWrapper {
position: relative;

&.disabled {
Expand Down
4 changes: 2 additions & 2 deletions webapp/src/widget/menuWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const MenuWrapper = React.memo((props: Props) => {
const [open, setOpen] = useState(Boolean(props.isOpen));

if (!Array.isArray(props.children) || props.children.length !== 2) {
throw new Error('MenuWrapper needs exactly 2 children');
throw new Error('TodoMenuWrapper needs exactly 2 children');
Copy link
Contributor

Choose a reason for hiding this comment

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

The component should probably be renamed to TodoMenuWrapper if we change this error message

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I reverted it back to MenuWrapper to keep it the same as the other components.

}

const close = (): void => {
Expand Down Expand Up @@ -76,7 +76,7 @@ const MenuWrapper = React.memo((props: Props) => {
}, []);

const {children} = props;
let className = 'MenuWrapper';
let className = 'TodoMenuWrapper';
if (props.disabled) {
className += ' disabled';
}
Expand Down
Loading