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(ui5-rating-indicator): initial implementation #1729

Merged
merged 18 commits into from
Jun 8, 2020
Merged

Conversation

fifoosid
Copy link
Contributor

@fifoosid fifoosid commented Jun 3, 2020

Fixes #1717

packages/main/src/RatingIndicator.js Outdated Show resolved Hide resolved
packages/main/src/RatingIndicator.js Show resolved Hide resolved
packages/main/src/RatingIndicator.js Show resolved Hide resolved
packages/main/src/BusyIndicator.js Outdated Show resolved Hide resolved
packages/main/src/RatingIndicator.js Show resolved Hide resolved
packages/main/src/themes/RatingIndicator.css Outdated Show resolved Hide resolved
packages/main/src/themes/RatingIndicator.css Outdated Show resolved Hide resolved
packages/main/test/specs/RatingIndicator.spec.js Outdated Show resolved Hide resolved
packages/main/test/specs/RatingIndicator.spec.js Outdated Show resolved Hide resolved
}

const down = isDown(event) || isLeft(event);
const up = isRight(event) || isUp(event) || isSpace(event) || isEnter(event);
Copy link
Member

Choose a reason for hiding this comment

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

With Space and Enter, after the values reaches the maxValue (all starts are active) it starts over, it is cycling behaviour basically. This is how in openui5 works at least.

With Up/Left and Down/Right it is like currently works.

packages/main/src/RatingIndicator.js Outdated Show resolved Hide resolved
packages/main/src/RatingIndicator.js Outdated Show resolved Hide resolved
}

:host([_focused]) {
outline: 1px dotted var(--sapContent_FocusColor);
Copy link
Member

Choose a reason for hiding this comment

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

The focus should be just around the stars:

Screenshot 2020-06-05 at 10 48 54 AM

currently is:

Screenshot 2020-06-05 at 10 49 03 AM

The problem is not with the css for the outline, but the stars itself or the wrapper.

packages/main/src/RatingIndicator.js Outdated Show resolved Hide resolved
packages/main/src/RatingIndicator.js Outdated Show resolved Hide resolved
Copy link
Member

@ilhan007 ilhan007 left a comment

Choose a reason for hiding this comment

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

The component looks good, I left few comments
and just one more thing to check, when I open the test page of the RI in IE I am able to focus multiple instances:

Screenshot 2020-06-05 at 11 24 53 AM

Copy link
Contributor

@vladitasev vladitasev left a comment

Choose a reason for hiding this comment

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

@ilhan007 has already noted most of the things I noticed as well, so I'll just go over the more important ones to me:

  • Disabled state: the desired opacity is 0.4
  • Focus should be around the stars
  • In OpenUI5 the size is dynamic, you can give it in rems. Explore this option for us - both here and maybe busy indicator

@ilhan007 ilhan007 dismissed their stale review June 8, 2020 12:58

the major issues are resolved

@vladitasev vladitasev merged commit a28f201 into master Jun 8, 2020
@vladitasev vladitasev deleted the rating-indicator branch June 8, 2020 13:03
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.

Rating Indicator control feature request
3 participants