From 0f7a32743123b682e6b5136f375d69d3d844da84 Mon Sep 17 00:00:00 2001
From: VeraZab <vera.zabeida@gmail.com>
Date: Wed, 3 Jan 2018 12:23:46 -0500
Subject: [PATCH 1/2] Add message to traces with no opacity

---
 src/components/containers/Section.js     | 27 +++++++++++++++++++++---
 src/lib/index.js                         |  5 ++++-
 src/styles/components/fields/_field.scss | 16 +++++++-------
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/components/containers/Section.js b/src/components/containers/Section.js
index a04c36c09..2f5c91db7 100644
--- a/src/components/containers/Section.js
+++ b/src/components/containers/Section.js
@@ -2,10 +2,13 @@ import Info from '../fields/Info';
 import MenuPanel from './MenuPanel';
 import React, {Component, cloneElement} from 'react';
 import PropTypes from 'prop-types';
-import unpackPlotProps from 'lib/unpackPlotProps';
-import {containerConnectedContextTypes} from 'lib/connectToContainer';
+import {
+  containerConnectedContextTypes,
+  localize,
+  unpackPlotProps,
+} from '../../lib';
 
-export default class Section extends Component {
+class Section extends Component {
   constructor(props, context) {
     super(props, context);
 
@@ -21,6 +24,8 @@ export default class Section extends Component {
   }
 
   processAndSetChildren(nextProps, nextContext) {
+    const {fullContainer} = nextContext;
+    const {localize: _} = nextProps;
     this.sectionVisible = false;
 
     const children = React.Children.toArray(nextProps.children);
@@ -47,6 +52,21 @@ export default class Section extends Component {
       let newProps = {};
       if (child.plotProps) {
         plotProps = child.plotProps;
+      } else if (
+        fullContainer.type === 'scatter' &&
+        !fullContainer.opacity &&
+        child.props.attr === 'opacity'
+      ) {
+        this.sectionVisible = true;
+        const child = (
+          <Info>
+            {_(
+              'Trace opacity is not supported for a scatter trace with fill ' +
+                'or for a scatter trace that gets filled by another scatter trace.'
+            )}
+          </Info>
+        );
+        this.children.push(child);
       } else if (isAttr) {
         if (child.type.supplyPlotProps) {
           plotProps = child.type.supplyPlotProps(child.props, nextContext);
@@ -94,3 +114,4 @@ Section.propTypes = {
 };
 
 Section.contextTypes = containerConnectedContextTypes;
+export default localize(Section);
diff --git a/src/lib/index.js b/src/lib/index.js
index d4ccc8324..45e485d80 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -2,7 +2,9 @@ import bem from './bem';
 import connectAnnotationToLayout from './connectAnnotationToLayout';
 import connectAxesToLayout from './connectAxesToLayout';
 import connectLayoutToPlot, {getLayoutContext} from './connectLayoutToPlot';
-import connectToContainer from './connectToContainer';
+import connectToContainer, {
+  containerConnectedContextTypes,
+} from './connectToContainer';
 import connectTraceToPlot from './connectTraceToPlot';
 import dereference from './dereference';
 import findFullTraceIndex from './findFullTraceIndex';
@@ -37,6 +39,7 @@ export {
   connectLayoutToPlot,
   connectToContainer,
   connectTraceToPlot,
+  containerConnectedContextTypes,
   customTraceToPlotlyTrace,
   dereference,
   findFullTraceIndex,
diff --git a/src/styles/components/fields/_field.scss b/src/styles/components/fields/_field.scss
index 293a9ae83..944b5779c 100644
--- a/src/styles/components/fields/_field.scss
+++ b/src/styles/components/fields/_field.scss
@@ -53,24 +53,24 @@
     }
   }
 
-  &__delete{
+  &__delete {
     display: flex;
     align-items: center;
     justify-content: center;
     padding-left: var(--spacing-quarter-unit);
     opacity: 0.5;
-    svg{
+    svg {
       display: block;
-      path{
-        fill: var(--color-text-base)
+      path {
+        fill: var(--color-text-base);
       }
     }
-    &:hover{
+    &:hover {
       cursor: pointer;
       opacity: 1;
-      svg{
-        path{
-          fill: var(--color-sienna)
+      svg {
+        path {
+          fill: var(--color-sienna);
         }
       }
     }

From e7e9f030ab54fd7525aa8a4848d7d4f6ccb3e0a0 Mon Sep 17 00:00:00 2001
From: VeraZab <vera.zabeida@gmail.com>
Date: Thu, 4 Jan 2018 21:57:21 -0500
Subject: [PATCH 2/2] Fix tests

---
 src/components/containers/Section.js                | 1 +
 src/components/containers/__tests__/Section-test.js | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/containers/Section.js b/src/components/containers/Section.js
index 2f5c91db7..9a6a5ad03 100644
--- a/src/components/containers/Section.js
+++ b/src/components/containers/Section.js
@@ -53,6 +53,7 @@ class Section extends Component {
       if (child.plotProps) {
         plotProps = child.plotProps;
       } else if (
+        fullContainer &&
         fullContainer.type === 'scatter' &&
         !fullContainer.opacity &&
         child.props.attr === 'opacity'
diff --git a/src/components/containers/__tests__/Section-test.js b/src/components/containers/__tests__/Section-test.js
index 8e85b01ef..7a6cedf93 100644
--- a/src/components/containers/__tests__/Section-test.js
+++ b/src/components/containers/__tests__/Section-test.js
@@ -55,7 +55,7 @@ describe('Section', () => {
       </TestEditor>
     ).find('[name="test-section"]');
 
-    expect(wrapper.children().length).toBe(1);
+    expect(wrapper.children().length).toBe(2);
     expect(wrapper.find('.extra').text()).toBe('special extra');
   });