From 47761a455ef5a92a9122bb75895aa394ce542d16 Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Wed, 22 Mar 2017 10:31:48 -0600
Subject: [PATCH] Support class property on overlay decorations

---
 spec/text-editor-component-spec.js | 13 ++++++++++++-
 src/text-editor-component.js       | 10 ++++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/spec/text-editor-component-spec.js b/spec/text-editor-component-spec.js
index 21cabb6ea..161c843a2 100644
--- a/spec/text-editor-component-spec.js
+++ b/spec/text-editor-component-spec.js
@@ -900,10 +900,11 @@ describe('TextEditorComponent', () => {
       overlayElement.style.margin = '3px'
       overlayElement.style.backgroundColor = 'red'
 
-      editor.decorateMarker(marker, {type: 'overlay', item: overlayElement})
+      const decoration = editor.decorateMarker(marker, {type: 'overlay', item: overlayElement, class: 'a'})
       await component.getNextUpdatePromise()
 
       const overlayWrapper = overlayElement.parentElement
+      expect(overlayWrapper.classList.contains('a')).toBe(true)
       expect(overlayWrapper.getBoundingClientRect().top).toBe(clientTopForLine(component, 5))
       expect(overlayWrapper.getBoundingClientRect().left).toBe(clientLeftForCharacter(component, 4, 25))
 
@@ -939,6 +940,16 @@ describe('TextEditorComponent', () => {
       overlayElement.style.height = 80 + 'px'
       await component.getNextUpdatePromise()
       expect(overlayWrapper.getBoundingClientRect().top).toBe(clientTopForLine(component, 5))
+
+      // Can update overlay wrapper class
+      decoration.setProperties({type: 'overlay', item: overlayElement, class: 'b'})
+      await component.getNextUpdatePromise()
+      expect(overlayWrapper.classList.contains('a')).toBe(false)
+      expect(overlayWrapper.classList.contains('b')).toBe(true)
+
+      decoration.setProperties({type: 'overlay', item: overlayElement})
+      await component.getNextUpdatePromise()
+      expect(overlayWrapper.classList.contains('b')).toBe(false)
     })
   })
 
diff --git a/src/text-editor-component.js b/src/text-editor-component.js
index 627b323d8..ccaffc0bc 100644
--- a/src/text-editor-component.js
+++ b/src/text-editor-component.js
@@ -2355,6 +2355,7 @@ class OverlayComponent {
   constructor (props) {
     this.props = props
     this.element = document.createElement('atom-overlay')
+    if (this.props.className != null) this.element.classList.add(this.props.className)
     this.element.appendChild(this.props.element)
     this.element.style.position = 'fixed'
     this.element.style.zIndex = 4
@@ -2363,10 +2364,15 @@ class OverlayComponent {
     getElementResizeDetector().listenTo(this.element, this.props.didResize)
   }
 
-  update (props) {
-    this.props = props
+  update (newProps) {
+    const oldProps = this.props
+    this.props = newProps
     if (this.props.pixelTop != null) this.element.style.top = this.props.pixelTop + 'px'
     if (this.props.pixelLeft != null) this.element.style.left = this.props.pixelLeft + 'px'
+    if (newProps.className !== oldProps.className) {
+      if (oldProps.className != null) this.element.classList.remove(oldProps.className)
+      if (newProps.className != null) this.element.classList.add(newProps.className)
+    }
   }
 }