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

(fix) O3-3890 Help menu (and menu items) should use a standard Carbon… #1164

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

Samstar10
Copy link
Contributor

@Samstar10 Samstar10 commented Sep 26, 2024

Requirements

  • This PR has a title that briefly describes the work done including the ticket number. Ensure your PR title includes a conventional commit label (such as feat, fix, or chore, among others). See existing PR titles for inspiration.

For changes to apps

If applicable

  • My work includes tests or is validated by existing tests.
  • I have updated the esm-framework mock to reflect any API changes I have made.

Summary

I have updated the help menu to use standard carbon menu items. This PR is related to this PR openmrs/openmrs-esm-user-onboarding#21

Screenshots

Screenshot 2024-09-26 at 16 42 54

Related Issue

https://openmrs.atlassian.net/browse/O3-3890

Other

{t('docs', 'Docs')}
</Link>
label={t('documentation', 'Documentation')}
onClick={() => window.open('https://o3-docs.openmrs.org', '_blank')}
Copy link
Member

Choose a reason for hiding this comment

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

Can we move the onClick handler to a function that's wrapped in a useCallback hook?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Noted

Copy link
Member

Choose a reason for hiding this comment

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

I wouldn’t expect these changes to be included here. Bad rebase?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, a mistake on my end, I'll fix it

{t('communityforum', 'Community forum')}
</Link>
label={t('communityforum', 'Community forum')}
onClick={() => window.open('https://talk.openmrs.org', '_blank')}
Copy link
Member

@denniskigen denniskigen Oct 5, 2024

Choose a reason for hiding this comment

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

Can we wrap the onClick handlers in use callback hooks? Additionally, for security, it’s good to add noreferrer noopener to external links:

const handleClick = useCallback(() => {
  window.open('https://talk.openmrs.org', '_blank', 'noopener,noreferrer');
}, [url]);

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Noted

@denniskigen
Copy link
Member

One challenge with this approach is that we can't leverage the renderIcon prop of the MenuItem component. To leverage it, the MenuItem must have a Menu component as its direct parent, and Menu's mode prop should be set to basic.

@brandones
Copy link
Collaborator

@Samstar10 Are you planning on continuing work on this? When? Is it clear to you how to proceed?

@Samstar10
Copy link
Contributor Author

@Samstar10 Are you planning on continuing work on this? When? Is it clear to you how to proceed?

Hello @brandones , yes, I have already completed it actually, just having some troubles with pushing it, hoping to be helped during today's coffee break.

@denniskigen
Copy link
Member

denniskigen commented Oct 22, 2024

Mind resolving the conflicts, @Samstar10?

@Samstar10
Copy link
Contributor Author

Mind solving the conflicts, @Samstar10?

Yes, currently working on that.

import { Link } from '@carbon/react';

const ContactUs = () => {
const { t } = useTranslation();
return (
<Link
className={styles.helpButton}
style={{ textDecoration: 'none' }}
Copy link
Member

Choose a reason for hiding this comment

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

This should move to styles.scss.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@denniskigen for some reason whenever I move this to the styles.css it does not work. This is the only way it works.

import { Link } from '@carbon/react';

const Docs = () => {
const { t } = useTranslation();
return (
<Link
className={styles.helpButton}
style={{ textDecoration: 'none' }}
Copy link
Member

Choose a reason for hiding this comment

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

Ditto.

@@ -10,6 +10,7 @@ const ReleaseNotes = () => {
return (
<Link
className={styles.helpButton}
style={{ textDecoration: 'none' }}
Copy link
Member

Choose a reason for hiding this comment

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

Ditto

color: black !important;
&:focus {
outline: none;
}
}

.helpButton:hover {
background: #e8e8e8;
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
background: #e8e8e8;
background: colors.$white-hover;

https://carbon-elements.netlify.app/colors/examples/preview/

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@denniskigen this variable doesn't seem to exist

Copy link
Member

Choose a reason for hiding this comment

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

You can use colors.$gray-10-hover instead then:

CleanShot 2024-10-22 at 9  41 37@2x

@@ -6,8 +6,13 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0.5rem;
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
padding: 0.5rem 0.5rem;
padding: layout.$spacing-03;

nit: padding: layout.spacing-03 is shorthand for padding-top: 0.5rem; padding-right: 0.5rem; padding-bottom: 0.5rem; padding-left: 0.5rem;

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Noted.

Copy link
Member

Choose a reason for hiding this comment

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

Why are we deleting this file? Seems unrelated to whatever else we're doing.

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 was trying to sort out the bad rebase. Working on fixing it now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants