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

feat(web-core): added UiDropdownButton component #8076

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

J0ris-K
Copy link
Contributor

@J0ris-K J0ris-K commented Oct 28, 2024

Description

added UiDropdownButton component

Screenshot

image

Checklist

  • Commit
    • Title follows commit conventions
    • Reference the relevant issue (Fixes #007, See xoa-support#42, See https://...)
    • If bug fix, add Introduced by
  • Changelog
    • If visible by XOA users, add changelog entry
    • Update "Packages to release" in CHANGELOG.unreleased.md
  • PR
    • If UI changes, add screenshots
    • If not finished or not tested, open as Draft

Review process

This 2-passes review process aims to:

  • develop skills of junior reviewers
  • limit the workload for senior reviewers
  • limit the number of unnecessary changes by the author
  1. The author creates a PR.
  2. Review process:
    1. The author assigns the junior reviewer.
    2. The junior reviewer conducts their review:
      • Resolves their comments if they are addressed.
      • Adds comments if necessary or approves the PR.
    3. The junior reviewer assigns the senior reviewer.
    4. The senior reviewer conducts their review:
      • If there are no unresolved comments on the PR → merge.
      • Otherwise, we continue with 3.
  3. The author responds to comments and/or makes corrections, and we go back to 2.

Notes:

  1. The author can request a review at any time, even if the PR is still a Draft.
  2. In theory, there should not be more than one reviewer at a time.
  3. The author should not make any changes:
    • When a reviewer is assigned.
    • Between the junior and senior reviews.

@J0ris-K J0ris-K self-assigned this Oct 28, 2024
@J0ris-K J0ris-K force-pushed the xo6/dropdown-button branch 2 times, most recently from 7ae0578 to f25a126 Compare October 28, 2024 14:56
@J0ris-K J0ris-K force-pushed the xo6/dropdown-button branch 2 times, most recently from af3a8d4 to 1e604ab Compare October 30, 2024 13:58
defineProps<{
disabled?: boolean
selected?: boolean
leftIcon?: IconDefinition
Copy link
Contributor

Choose a reason for hiding this comment

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

Since it's the only possible prop icon, I'd suggest renaming leftIcon to icon.

Suggested change
leftIcon?: IconDefinition
icon?: IconDefinition

Comment on lines 42 to 48
position: relative;

.label,
.right-icon,
.left-icon {
color: var(--color-normal-txt-base);
}
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think it's necessary to target specific sub-items.

Suggested change
position: relative;
.label,
.right-icon,
.left-icon {
color: var(--color-normal-txt-base);
}
position: relative;
color: var(--color-normal-txt-base);

Comment on lines 52 to 58
background-color: var(--color-normal-background-hover);

.label,
.right-icon,
.left-icon {
color: var(--color-normal-txt-hover);
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
background-color: var(--color-normal-background-hover);
.label,
.right-icon,
.left-icon {
color: var(--color-normal-txt-hover);
}
background-color: var(--color-normal-background-hover);
color: var(--color-normal-txt-hover);

Comment on lines 63 to 69
background-color: var(--color-normal-background-active);

.label,
.right-icon,
.left-icon {
color: var(--color-normal-txt-active);
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
background-color: var(--color-normal-background-active);
.label,
.right-icon,
.left-icon {
color: var(--color-normal-txt-active);
}
background-color: var(--color-normal-background-active);
color: var(--color-normal-txt-active);

Comment on lines 92 to 98
background-color: var(--color-neutral-background-disabled);

.label,
.right-icon,
.left-icon {
color: var(--color-neutral-txt-secondary);
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
background-color: var(--color-neutral-background-disabled);
.label,
.right-icon,
.left-icon {
color: var(--color-neutral-txt-secondary);
}
background-color: var(--color-neutral-background-disabled);
color: var(--color-neutral-txt-secondary);

Comment on lines 72 to 60
&.selected {
border: 0.2rem solid var(--color-normal-txt-base);
background-color: var(--color-normal-background-selected);
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Is it expected that .selected has no color setting?

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 because according to the DS the color of .selected is the same as idle

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

Successfully merging this pull request may close these issues.

3 participants