diff --git a/src/components/containers/Section.js b/src/components/containers/Section.js index a04c36c09..9a6a5ad03 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,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 = ( + + {_( + 'Trace opacity is not supported for a scatter trace with fill ' + + 'or for a scatter trace that gets filled by another scatter trace.' + )} + + ); + 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); 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', () => { ).find('[name="test-section"]'); - expect(wrapper.children().length).toBe(1); + expect(wrapper.children().length).toBe(2); expect(wrapper.find('.extra').text()).toBe('special extra'); }); 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); } } }