Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

feat(carousel): adding actionable items into carousel #2271

Merged
merged 13 commits into from
Jan 29, 2020

Conversation

kolaps33
Copy link
Collaborator

@kolaps33 kolaps33 commented Jan 24, 2020

Adding actionable items into the carousel.
Trying to add button, buttons and toolbar to carousel slide.

If user is inside the carousel item and press right/left arrow key, then rotation of carousel was still working. This is fix with stopPropagation.

BE CAREFUL carousel is not fully accessible, related bugs reported in the ticket:
#2272

root: {},
},
root: {
stopPropagation: {
Copy link
Contributor

Choose a reason for hiding this comment

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

This looks like a strange name for keyAction. Can we use something related to the fact that navigation happend?

@DustyTheBot
Copy link
Collaborator

DustyTheBot commented Jan 29, 2020

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.61 0.44 1.39:1 2000 1224
🔧 Button.Fluent 1.29 0.17 7.59:1 1000 1289
🔧 Checkbox.Fluent 1.41 0.28 5.04:1 1000 1408
🔧 Dialog.Fluent 0.33 0.17 1.94:1 5000 1637
🔧 Dropdown.Fluent 3.68 0.37 9.95:1 1000 3677
🔧 Icon.Fluent 0.25 0.04 6.25:1 5000 1241
🔧 Image.Fluent 0.11 0.08 1.38:1 5000 530
🔧 Slider.Fluent 2.04 0.32 6.38:1 1000 2043
🦄 Text.Fluent 0.05 0.2 0.25:1 5000 265
🦄 Tooltip.Fluent 0.38 19.14 0.02:1 5000 1886

🔧 Needs work     🎯 On target     🦄 Amazing

Generated by 🚫 dangerJS

Copy link
Collaborator

@silviuaavram silviuaavram left a comment

Choose a reason for hiding this comment

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

Done :)

@@ -16,7 +17,11 @@ const carouselItemBehavior: Accessibility<CarouselItemProps> = props => ({
},

keyActions: {
root: {},
root: {
arrowKeysNavigationStopPropagation: {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Let's add a unit test for this.

It should check that left/right arrows sent to a child of the container (the visible item for instance, or a child of that visible item) should not move the slides.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

thanks :) for this catch. Tests added, as well a specification line in the top of file.

Copy link
Collaborator

@silviuaavram silviuaavram left a comment

Choose a reason for hiding this comment

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

address the last comment. otherwise lgtm!

@kolaps33 kolaps33 merged commit cbe7db9 into master Jan 29, 2020
@kolaps33 kolaps33 deleted the mituron/carousel-focusable-elements branch January 29, 2020 18:54
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants