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

fix(Popup): allow to 'detach' from trigger and RTL adjustments #612

Merged
merged 14 commits into from
Dec 18, 2018

Conversation

kuzhelov
Copy link
Contributor

@kuzhelov kuzhelov commented Dec 13, 2018

TODO

  • introduce unit tests for RTL transform logic
  • update changelog

This PR fixes the following issues: #606 (comment)

Allow to detach popup from trigger

Previously it was impossible - it was guaranteed by implementation logic that popup and trigger would always have at least single common point. Thus, even for the following example where user might intentionally would like to specify large offset value - even in that case rendered popup will be 'attached' to its trigger.

<Popup
  position='above'
  align='end'
  offset='-100%'
/>

image

with an extremely huge offset result had stayed the same:

<Popup
  position='above'
  align='end'
  offset='-10000%'
/>

image

Provided fix ensures that client's offset will be applied 'as is', without any additional heuristics being applied.

Ensure correct RTL transform for complex offset expressions

Previous RTL transform logic had implicitly assumed that it could be only single value passed as offset - however, offset also supports expressions syntax, so that the following value is absolutely correct:

<Popup 
  offset='100% - 100%p + 10'
  ...
/>

This PR addresses such limitation.

@kuzhelov kuzhelov changed the title fix(Popup): allow popup to 'detach' from trigger when large offset is speified fix(Popup): allow popup to 'detach' from trigger when large offset is specified Dec 13, 2018
@kuzhelov kuzhelov changed the title fix(Popup): allow popup to 'detach' from trigger when large offset is specified fix(Popup): allow to 'detach' from trigger and RTL adjustments Dec 13, 2018
expectOffsetTransformResult('100%', '-100%')
expectOffsetTransformResult(' 2000%p ', '-2000%p')
expectOffsetTransformResult('100 ', '-100')
expectOffsetTransformResult(' - 200vh', '200vh')
Copy link
Member

Choose a reason for hiding this comment

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

have intentionally selected this approach for the following reasons:

  • the jest.each() is less expressive than explicit name of the check
  • we are not interested in name arg that jest.each() might provide for each case under check
  • even given that this is more verbose, might argue that we will read these lines far more often than write them, so I'd better prefer expressiveness here
  • this approach is consistent with the one that is already taken for the rest of the tests in this file (which is, also, provide more readable tests code)

.replace(/<minus>/g, '-')
.trimLeft()
.replace(/^\+/, '')
}
Copy link
Member

Choose a reason for hiding this comment

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

This looks a complicated for me, but we have tests. Possibly, we can to add memoization there.

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, the tests were introduced exactly for this sake :) not sure about memoization, as all expressions used are of linear complexity - there shouldn't be any significant gain from it.

key={`${position}-${align}`}
/>
))}
<Grid columns="repeat(1, 80px)" variables={{ padding: '30px', gridGap: '30px' }}>
Copy link
Member

Choose a reason for hiding this comment

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

It seems that we don't repeat there more.

Copy link
Contributor Author

@kuzhelov kuzhelov Dec 18, 2018

Choose a reason for hiding this comment

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

absolutely, need to fix

Copy link
Member

@layershifter layershifter left a comment

Choose a reason for hiding this comment

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

I played with it locally and manually checked RTL offsets. Works fine 👍

@kuzhelov kuzhelov merged commit 98af14c into master Dec 18, 2018
@kuzhelov kuzhelov deleted the fix/popup-offset-values-range branch December 18, 2018 19:11
mnajdova pushed a commit that referenced this pull request Dec 19, 2018
* introduce offset prop

* correct description of supported values

* update changelog

* introduce fix

* ensure RTL is properly applied to complex offset expressions

* rename method to make logic more expressive

* add unit tests

* remove unnecessary grid props from offset example

* update changelog
mnajdova pushed a commit that referenced this pull request Dec 19, 2018
* feat(menuItem: add menu prop)

* Only one submenu open at a time

* Fix bug: submenu noe closes on clicking a menuItem with no submenu

* Code cleanup

* Remove the activeIndex prop passed to the menuItem

* Remove Popup and implement submenu without it

* initial keyboard support

* left/right arrow handling

* simplify keyboard handlers

* -fixed import in the MenuItem

* -added submenuIndicator
-small fixes in the styles and the way the submenu is generated

* -clicking on leaf element should close the submenus (the same should be done for enter/space)
-applied consistent (left-right) navigation for horizontal menu and (up-down) navigation for vertical menu

* -implemented outside click to close all menus
-implemented enter key on leaf menu item to close the menu

* -fixed import

* -refactored MenuItem handlers - fixed issues
-removed onClick handler for the Menu (not necessary for now)
-added onKeyDown in the creation of the MenuItem in the Menu component for handling the action prop

* -added setActiveIndex callback and removed onKeyDown in the creation of MenuItems in the Menu component

* -right arrow key is closing the submenus and goes to the next element if the menu is horizontal, or is focusing the first MenuItem if it is vertical

* -handled left arrow key

* -changed ref
-focus trap wip

* -added Ref component instead of using the itemRef on the ElementType
-removed subscription for focus

* -fixes

* -moved ref //TODO: figure out tests failing

* -close menu on outside focus

* -improved comments

* -fixed escape key not focusing the active element
-changed parentRef to inSubmenu boolean

* -fixing key problems
-added dependency for generating id

* -refactored submenuRef element

* fix broken tests

* -added comments in the tests
-changed the submenuDomElement so submenuRef

* -renamed inSubmenu to submenu prop in the Menu

* -fixed with the auto-controlled prop in the Menu

* -added state interface in the Menu
-improved menu variables' names

* -fixed variables in examples

* -remove state initialization in the MenuItem component

* -added new handler for escape
-changed submenu examples titles

* -refactored conditions using doesNodeContainClick

* -renamed submenu* props to menu in the MenuItem component
-changed setActiveIndex with onActiveChanged
-introduced different styles for the hovering vs active elements

* -improved example
-fixed issue with the condition for the active prop

* -exported MenuState
-added correct typings to the menuStyles

* -fixed underlined active + hovered style

* -fixed border corner clipped by adding custom styles for the first child menu items and the last child menu items in vertical menu

* -addressed comments on PR

* chore: prepare release 0.15.0 [ci skip]

* 0.15.0

* fix(Prototype): Fix Popover prototype after breaking changes (#623)

* chore: cache results of vulnerability scans (#621)

* implement caching strategy

* adjust file name of scan marker

* add yarn lock hash to marker file name

* add change to build config

* fix dir name in build config

* improve caching strategy

* just restore cache

* temporary remove lint and tests

* try

* fix caching strategy

* try

* try

* try

* try epoch

* create file on scan

* return lint and test steps

* introduce comment for the caching approach taken

* remove unnecessary function

* simplify expression for marker file name

* feat(text): color prop (#597)

* feat(text): color prop

* addressed comments

* changelog

* amended changelog

* made text color override other props that change color

* feat(header): header and header description color prop (#628)

* feat(header): header and header description color prop

* changelog

* fixed examples

* addressed PR comments

* fix(Popup): allow to 'detach' from trigger and RTL adjustments (#612)

* introduce offset prop

* correct description of supported values

* update changelog

* introduce fix

* ensure RTL is properly applied to complex offset expressions

* rename method to make logic more expressive

* add unit tests

* remove unnecessary grid props from offset example

* update changelog

* fix(SelectableList): Items in list should be selectable (#566)

* Reflect which item is selected in list

* Make list derived from autocontrolled component

* small fix

* Update ListExampleSelection.tsx

* Update ListExampleSelection.shorthand.tsx

* Small improvement

* Rename *ItemIndex -> *Index

* Names refactoring

* Minor improvements

* update changelog

* Add onSelectedIndexChange

* Add some tests

* Small improvements afer CR

* Small improvements afer CR

* Small improvements afer CR

* create focus handler when List is constructed

* fix changelog

* changelog

* docs(Examples): allow to use TS in examples (#617)

* docs(Examples): allow to use TS in examples

* add jsdoc

* fix typo

* rename file

* add comment

* `createExample` to `createExampleSourceCode`

* rework with `path.relative()`

* remove JSON files on remove tsx

* create getRelativePathToSource function

* -updated changelog

* -updated changelog

* -updated changelog with breaking changes
-removed TODO comment

* -fixed imports in examples
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants