-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
BREAKING CHANGE: remove `nodeWidth` prop support * renamed regression and fixed wrong Dom nesting * do not prettify package.json * added FPS measurement to example page * slightly improved node width regression demo * fixed the node width regression * further improved regression demo * fixed default position * added same width regression * fixed same width regression * crucial perf optimization * added inline examples * flow type fixes & code cleanup * fixed all flow type annotations and added prop types * fix broken english * added first test for node width * improved node width calculation for StickPortal by adding an extra ref problem before was: as we determined the anchor width by looking at containerRef we relied on the portaled container node to have already a calculated width set * added more node width tests * fix lint error * trial to fix test on ci * use scrollWidth instead of clientWidth * fixed test for devices with scrollbars * fixed linter errors * added some more tests to increase coverage * props docs * fixed lint errors * submit pr comment with release not preview * circle syntax fix * simplified ci github access * test ci * use correct gh token in publish deme script * fix host authenticity for github.com * fixed a bug when page is scrolled horizontally
- Loading branch information
Showing
24 changed files
with
837 additions
and
259 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
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 @@ | ||
| package.json |
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
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 was deleted.
Oops, something went wrong.
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,15 +1,17 @@ | ||
| import React from 'react' | ||
|
|
||
| import ButtonOverlay from './ButtonOverlay' | ||
| import OverlaySize from './OverlaySize' | ||
| import SameWidth from './SameWidth' | ||
| import StickNodeWidth from './StickNodeWidth' | ||
|
|
||
| export default function Regressions() { | ||
| return ( | ||
| <div> | ||
| <h1>Regressions</h1> | ||
|
|
||
| <ButtonOverlay /> | ||
| <OverlaySize /> | ||
| <SameWidth /> | ||
| <StickNodeWidth /> | ||
| </div> | ||
| ) | ||
| } |
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,64 @@ | ||
| import React from 'react' | ||
|
|
||
| import Stick from '../../../src' | ||
|
|
||
| import Regression from './Regression' | ||
|
|
||
| const Anchor = ({ width, children }) => ( | ||
| <div | ||
| style={{ | ||
| height: 18, | ||
| color: 'white', | ||
| width, | ||
| backgroundColor: 'rgb(24, 170, 177)', | ||
| }} | ||
| > | ||
| {children} | ||
| </div> | ||
| ) | ||
|
|
||
| const Node = ({ children }) => ( | ||
| <div | ||
| style={{ | ||
| backgroundColor: '#ae0d5c', | ||
| color: 'white', | ||
| minHeight: 18, | ||
| }} | ||
| > | ||
| {children} | ||
| </div> | ||
| ) | ||
|
|
||
| export default function SameWidth() { | ||
| return ( | ||
| <Regression | ||
| allBrowsers | ||
| fixed | ||
| title="Same width" | ||
| description="Stick node must have the same width as the anchor element, if `sameWidth` prop is set" | ||
| > | ||
| <div | ||
| style={{ | ||
| display: 'flex', | ||
| justifyContent: 'space-around', | ||
| alignItems: 'center', | ||
| height: 200, | ||
| marginRight: 250, | ||
| }} | ||
| > | ||
| <Stick sameWidth position="bottom center" node={<Node />}> | ||
| <Anchor>The stick node below should have the same width</Anchor> | ||
| </Stick> | ||
| <Stick | ||
| position="bottom center" | ||
| sameWidth | ||
| node={ | ||
| <Node>This text should break to respect the anchor's width</Node> | ||
| } | ||
| > | ||
| <Anchor width={100} /> | ||
| </Stick> | ||
| </div> | ||
| </Regression> | ||
| ) | ||
| } |
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,84 @@ | ||
| import React from 'react' | ||
|
|
||
| import Stick from '../../../src' | ||
|
|
||
| import Regression from './Regression' | ||
|
|
||
| const Anchor = ({ width }) => ( | ||
| <div | ||
| style={{ | ||
| height: 15, | ||
| width, | ||
| backgroundColor: 'rgb(24, 170, 177)', | ||
| }} | ||
| /> | ||
| ) | ||
|
|
||
| const Node = ({ children }) => ( | ||
| <div | ||
| style={{ | ||
| backgroundColor: '#ae0d5c', | ||
| color: 'white', | ||
| }} | ||
| > | ||
| {children} | ||
| </div> | ||
| ) | ||
|
|
||
| const Examples = ({ inline }) => ( | ||
| <div | ||
| style={{ | ||
| display: 'flex', | ||
| justifyContent: 'space-around', | ||
| alignItems: 'center', | ||
| height: 100, | ||
| marginRight: 250, | ||
| }} | ||
| > | ||
| <Stick | ||
| inline={inline} | ||
| position="middle right" | ||
| node={<Node>This text should stay on one line</Node>} | ||
| > | ||
| <Anchor width={15} /> | ||
| </Stick> | ||
|
|
||
| <Stick | ||
| inline={inline} | ||
| position="middle right" | ||
| node={<Node>This text should stay on one line</Node>} | ||
| > | ||
| <Anchor width={150} /> | ||
| </Stick> | ||
|
|
||
| <div style={{ position: 'absolute', right: 150 }}> | ||
| <Stick | ||
| inline={inline} | ||
| position="middle right" | ||
| node={ | ||
| <Node> | ||
| This text must line-break as it would reach off-screen otherwise | ||
| </Node> | ||
| } | ||
| > | ||
| <Anchor width={100} /> | ||
| </Stick> | ||
| </div> | ||
| </div> | ||
| ) | ||
|
|
||
| export default function StickNodeWidth() { | ||
| return ( | ||
| <Regression | ||
| allBrowsers | ||
| fixed | ||
| version="1.0.0" | ||
| title="Stick node width" | ||
| description="The stick node should not line-break just because the anchor node is small. The stick node must only line-break if it would not fit onto the screen otherwise." | ||
| > | ||
| <Examples /> | ||
| <p>with `inline` prop:</p> | ||
| <Examples inline /> | ||
| </Regression> | ||
| ) | ||
| } |
Oops, something went wrong.