-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(react/tooltip): resolve tooltip misalignment issue with popup mod…
…al items for V1 (#925) * fix(react/tooltip): resolve tooltip misalignment issue with popup menu items * chore: add a common pixelize function * refactor(react/OverflowTooltip): dynamically adjust disabled based on the isOverflow state * refactor(react/tree): replace ensureNumber with ensureFiniteNumber * docs: update tooltip and overflow-tooltip examples * fix(react/tooltip): resolve tooltip misalignment issue with popup menu items * chore: add a common pixelize function * refactor(react/OverflowTooltip): dynamically adjust disabled based on the isOverflow state * refactor(react/tree): replace ensureNumber with ensureFiniteNumber * docs: update tooltip and overflow-tooltip examples * fix: use the Icon component instead of react-icons for v1 * fix: resolve eslint errors * chore: update yarn.lock file * Create tonic-ui-893-v1.md * feat!: update default values for `OverflowTooltip` component props * feat: disable placement enforcement when `followCursor` or `nextToCursor` prop is enabled * Update tonic-ui-893-v1.md --------- Co-authored-by: cheton <cheton@gmail.com> Co-authored-by: Cheton Wu <447801+cheton@users.noreply.github.com>
- Loading branch information
3 people
authored
Sep 19, 2024
1 parent
5072b31
commit 393843a
Showing
17 changed files
with
519 additions
and
1,651 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@tonic-ui/react": minor | ||
| --- | ||
|
|
||
| fix(react/tooltip): resolve tooltip misalignment issue with popup modal items |
87 changes: 87 additions & 0 deletions
87
packages/react-docs/pages/components/overflow-tooltip/faq-misalignment-with-menu-items.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import { | ||
| Menu, | ||
| MenuButton, | ||
| MenuList, | ||
| MenuItem, | ||
| OverflowTooltip, | ||
| Scrollbar, | ||
| } from '@tonic-ui/react'; | ||
| import React from 'react'; | ||
|
|
||
| const CustomOverflowTooltip = ({ children }) => { | ||
| return ( | ||
| <OverflowTooltip | ||
| label={children} | ||
| PopperProps={{ usePortal: true }} | ||
| > | ||
| {children} | ||
| </OverflowTooltip> | ||
| ); | ||
| }; | ||
|
|
||
| const App = () => { | ||
| const shortText = 'This text string is not truncated'; | ||
| const longText = 'This text string will be truncated when exceeding its container width'; | ||
|
|
||
| return ( | ||
| <Menu width={240}> | ||
| <MenuButton>Options</MenuButton> | ||
| <MenuList width="100%"> | ||
| <Scrollbar maxHeight={200} overflowX="hidden" overflowY="auto"> | ||
| <MenuItem> | ||
| <CustomOverflowTooltip> | ||
| {longText} | ||
| </CustomOverflowTooltip> | ||
| </MenuItem> | ||
| <MenuItem> | ||
| <CustomOverflowTooltip> | ||
| {shortText} | ||
| </CustomOverflowTooltip> | ||
| </MenuItem> | ||
| <MenuItem> | ||
| <CustomOverflowTooltip> | ||
| {shortText} | ||
| </CustomOverflowTooltip> | ||
| </MenuItem> | ||
| <MenuItem> | ||
| <CustomOverflowTooltip> | ||
| {shortText} | ||
| </CustomOverflowTooltip> | ||
| </MenuItem> | ||
| <MenuItem> | ||
| <CustomOverflowTooltip> | ||
| {shortText} | ||
| </CustomOverflowTooltip> | ||
| </MenuItem> | ||
| <MenuItem> | ||
| <CustomOverflowTooltip> | ||
| {shortText} | ||
| </CustomOverflowTooltip> | ||
| </MenuItem> | ||
| <MenuItem> | ||
| <CustomOverflowTooltip> | ||
| {longText} | ||
| </CustomOverflowTooltip> | ||
| </MenuItem> | ||
| <MenuItem> | ||
| <CustomOverflowTooltip> | ||
| {shortText} | ||
| </CustomOverflowTooltip> | ||
| </MenuItem> | ||
| <MenuItem> | ||
| <CustomOverflowTooltip> | ||
| {shortText} | ||
| </CustomOverflowTooltip> | ||
| </MenuItem> | ||
| <MenuItem> | ||
| <CustomOverflowTooltip> | ||
| {shortText} | ||
| </CustomOverflowTooltip> | ||
| </MenuItem> | ||
| </Scrollbar> | ||
| </MenuList> | ||
| </Menu> | ||
| ); | ||
| }; | ||
|
|
||
| export default App; |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
132 changes: 125 additions & 7 deletions
132
packages/react-docs/pages/components/tooltip/positioning-follow-cursor.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,128 @@ | ||
| import { Text, Tooltip } from '@tonic-ui/react'; | ||
| import React from 'react'; | ||
| import { | ||
| Box, | ||
| Divider, | ||
| Flex, | ||
| Icon, | ||
| Menu, | ||
| MenuButton, | ||
| MenuItem, | ||
| MenuList, | ||
| Text, | ||
| TextLabel, | ||
| Tooltip, | ||
| useColorStyle, | ||
| } from '@tonic-ui/react'; | ||
| import React, { useState } from 'react'; | ||
|
|
||
| const App = () => ( | ||
| <Tooltip label="This is a tooltip" followCursor> | ||
| <Text display="inline-block">Hover Me</Text> | ||
| </Tooltip> | ||
| const FormGroup = (props) => ( | ||
| <Box mb="4x" {...props} /> | ||
| ); | ||
|
|
||
| export default App; | ||
| const useSelection = (defaultValue) => { | ||
| const [value, setValue] = useState(defaultValue); | ||
| const changeBy = (value) => () => setValue(value); | ||
| return [value, changeBy]; | ||
| }; | ||
|
|
||
| const App = () => { | ||
| const [colorStyle] = useColorStyle(); | ||
| const [placement, changePlacementBy] = useSelection('bottom-end'); | ||
| const [skidding, setSkidding] = useState(8); | ||
| const [distance, setDistance] = useState(12); | ||
|
|
||
| return ( | ||
| <> | ||
| <FormGroup> | ||
| <Box mb="2x"> | ||
| <TextLabel> | ||
| placement | ||
| </TextLabel> | ||
| </Box> | ||
| <Menu> | ||
| <MenuButton | ||
| variant="secondary" | ||
| minWidth={150} | ||
| > | ||
| {placement} | ||
| </MenuButton> | ||
| <MenuList | ||
| width="max-content" | ||
| minWidth={150} | ||
| > | ||
| {[ | ||
| 'top', 'top-start', 'top-end', | ||
| 'bottom', 'bottom-start', 'bottom-end', | ||
| 'left', 'left-start', 'left-end', | ||
| 'right', 'right-start', 'right-end', | ||
| ].map(_placement => ( | ||
| <MenuItem | ||
| key={_placement} | ||
| onClick={changePlacementBy(_placement)} | ||
| > | ||
| <Flex columnGap="2x"> | ||
| {placement === _placement ? <Icon icon="check-s" /> : <Box width="4x" />} | ||
| {_placement} | ||
| </Flex> | ||
| </MenuItem> | ||
| ))} | ||
| </MenuList> | ||
| </Menu> | ||
| </FormGroup> | ||
| <FormGroup> | ||
| <Box mb="2x"> | ||
| <TextLabel>skidding</TextLabel> | ||
| </Box> | ||
| <Flex columnGap="4x"> | ||
| <input | ||
| type="range" | ||
| name="skidding" | ||
| min={-48} | ||
| max={48} | ||
| value={skidding} | ||
| onChange={(e) => setSkidding(Number(e.target.value))} | ||
| /> | ||
| <Text>{skidding}</Text> | ||
| </Flex> | ||
| </FormGroup> | ||
| <FormGroup> | ||
| <Box mb="2x"> | ||
| <TextLabel>distance</TextLabel> | ||
| </Box> | ||
| <Flex columnGap="4x"> | ||
| <input | ||
| type="range" | ||
| name="distance" | ||
| min={-48} | ||
| max={48} | ||
| value={distance} | ||
| onChange={(e) => setDistance(Number(e.target.value))} | ||
| /> | ||
| <Text>{distance}</Text> | ||
| </Flex> | ||
| </FormGroup> | ||
| <Divider my="4x" /> | ||
| <Tooltip | ||
| label="This is a tooltip" | ||
| followCursor | ||
| offset={[skidding, distance]} | ||
| placement={placement} | ||
| > | ||
| <Flex | ||
| sx={{ | ||
| border: 1, | ||
| backgroundColor: colorStyle.background.secondary, | ||
| borderColor: colorStyle.divider, | ||
| width: 240, | ||
| height: 180, | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| }} | ||
| > | ||
| Hover Me | ||
| </Flex> | ||
| </Tooltip> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default App; |
Oops, something went wrong.