fix(Sticky): preserve item height (#3500)

* Preserve sticky item height fixes(3499) * Add above content example * Update StickyExampleAboveContent.js
Semantic-Org · Mar 20, 2019 · 6eefe00 · 6eefe00
1 parent 9aff7ea
commit 6eefe00
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 2 deletions.
diff --git a/docs/src/examples/modules/Sticky/Usage/StickyExampleAboveContent.js b/docs/src/examples/modules/Sticky/Usage/StickyExampleAboveContent.js
@@ -0,0 +1,36 @@
+import React, { Component, createRef } from 'react'
+import { Image, Input, Menu, Segment, Sticky } from 'semantic-ui-react'
+import _ from 'lodash'
+
+export default class StickyExampleAboveContent extends Component {
+  contextRef = createRef()
+
+  render() {
+    return (
+      <div ref={this.contextRef}>
+        <Sticky context={this.contextRef}>
+          <Menu
+            attached='top'
+            tabular
+            style={{ backgroundColor: '#fff', paddingTop: '1em' }}
+          >
+            <Menu.Item as='a' active name='bio' />
+            <Menu.Item as='a' active={false} name='photos' />
+            <Menu.Menu position='right'>
+              <Menu.Item>
+                <Input
+                  transparent
+                  icon={{ name: 'search', link: true }}
+                  placeholder='Search users...'
+                />
+              </Menu.Item>
+            </Menu.Menu>
+          </Menu>
+        </Sticky>
+        <Segment attached='bottom'>
+          {_.times(5, i => <Image key={i} src='/images/wireframe/paragraph.png' />)}
+        </Segment>
+      </div>
+    )
+  }
+}
diff --git a/docs/src/examples/modules/Sticky/Usage/index.js b/docs/src/examples/modules/Sticky/Usage/index.js
@@ -10,6 +10,11 @@ const StickyUsageExamples = () => (
       description='Define the offset from the top/bottom of the screen when fixing element to viewport.'
       examplePath='modules/Sticky/Usage/StickyExampleOffset'
     />
+    <ComponentExample
+      title='Above Content'
+      description='Sticky content that is above other content'
+      examplePath='modules/Sticky/Usage/StickyExampleAboveContent'
+    />
   </ExampleSection>
 )
 

diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types'
 import React, { Component, createRef } from 'react'
 
 import {
-  eventStack,
   customPropTypes,
+  eventStack,
   getElementType,
   getUnhandledProps,
   isBrowser,
@@ -316,10 +316,11 @@ export default class Sticky extends Component {
       sticky && !bound && (bottom === null ? 'top' : 'bottom'),
       'sticky',
     )
+    const triggerStyles = sticky && this.stickyRect ? { height: this.stickyRect.height } : {}
 
     return (
       <ElementType {...rest} className={containerClasses}>
-        <div ref={this.triggerRef} />
+        <div ref={this.triggerRef} style={triggerStyles} />
         <div className={elementClasses} ref={this.stickyRef} style={this.computeStyle()}>
           {children}
         </div>

diff --git a/test/specs/modules/Sticky/Sticky-test.js b/test/specs/modules/Sticky/Sticky-test.js
@@ -199,6 +199,20 @@ describe('Sticky', () => {
         .childAt(1)
         .should.have.style('bottom', '0px')
     })
+
+    it('should preserve sticky element height', () => {
+      mockContextEl()
+      mockPositions({ bottomOffset: 0, height: 100, offset: 0 })
+      wrapperMount(<Sticky {...positions} context={contextEl} />)
+
+      // Scroll after trigger
+      scrollAfterTrigger()
+
+      wrapper
+        .childAt(0)
+        .childAt(0)
+        .should.have.style('height', '100px')
+    })
   })
   describe('onBottom', () => {
     it('is called with (e, data) when is on bottom', () => {