Merge pull request #198 from plotly/add-opacity-message

Add info message for area trace opacity

Author: VeraZab

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,22 @@ export default class Section extends Component {
       let newProps = {};
       if (child.plotProps) {
         plotProps = child.plotProps;
+      } else if (
+        fullContainer &&
+        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 +115,4 @@ Section.propTypes = {
 };
 
 Section.contextTypes = containerConnectedContextTypes;
+export default localize(Section);

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');
   });
 

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,

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);
         }
       }
     }