Merge pull request #1882 from FormidableLabs/task/disable-more-inline…

…-styles

Disable inline styles

docs/src/content/common-props/common-props.md

@@ -165,9 +165,9 @@ _default:_ `containerComponent={<VictoryContainer/>}`
 
 Specify data via the `data` prop. By default, Victory components expect data as an array of objects with `x` and `y` properties. Use the [x][] and [y][] data accessor props to define a custom data format. The `data` prop must be given as an array. Data objects may also include information about ~~styles~~, labels, and props that may be applied to individual data components.
 
-*note:* All values stored on the data object will be interpolated during animation. Do not store functions on data objects.
+_note:_ All values stored on the data object will be interpolated during animation. Do not store functions on data objects.
 
-*note* As of `[email protected]` styles provided via the `data` prop are no longer automatically applied. To use styles from the data object, add functional styles as in the example below.
+_note_ As of `[email protected]` styles provided via the `data` prop are no longer automatically applied. To use styles from the data object, add functional styles as in the example below.
 
 ```playground
 <VictoryScatter
@@ -226,6 +226,65 @@ class App extends React.Component {
 ReactDOM.render(<App/>, mountNode);
 ```
 
+## disableInlineStyles
+
+`type: boolean`
+
+The `disableInlineStyles` prop allows Victory components to work better with CSS classes or styled-components. By default, Victory provides inline styles to chart components, which will override any conflicting CSS styles. This flag will remove the inline styles, making it easier to provide custom styling for components via CSS.
+
+If this prop is passed to a chart type (e.g. `VictoryBar`), it will apply to all data and label components for that chart.
+
+```playground_norender
+
+const StyledBar = styled(Bar)`
+  fill: purple;
+`
+
+const StyledLabel = styled(VictoryLabel)`
+  tspan {
+    fill: magenta;
+    font-family: Papyrus, fantasy;
+  }
+`
+
+function CustomStyledBarChart() {
+  return (
+    <VictoryChart>
+      <VictoryBar
+        disableInlineStyles
+        labels={[1, 2, 3, 4]}
+        dataComponent={<StyledBar />}
+        labelComponent={<StyledLabel />}
+      />
+    </VictoryChart>
+  )
+}
+
+ReactDOM.render(<CustomStyledBarChart/>, mountNode);
+```
+
+It can also be passed to individual data or label components to disable styles on a more granular level.
+
+```playground_norender
+
+const StyledBar = styled(Bar)`
+  fill: purple;
+`
+
+function CustomStyledBarChart() {
+  return (
+    <VictoryChart>
+      <VictoryBar
+        labels={[1, 2, 3, 4]}
+        dataComponent={<StyledBar disableInlineStyles />}
+      />
+    </VictoryChart>
+  )
+}
+
+ReactDOM.render(<CustomStyledBarChart/>, mountNode);
+```
+
 ## domain
 
 `type: array[low, high] || { x: [low, high], y: [low, high] }`
@@ -260,7 +319,7 @@ _examples:_
 - `domainPadding={20}`
 - `domainPadding={{x: [20, 0]}}`
 
-*note* Values supplied for `domainPadding` will be coerced so that padding a domain will never result in charts including an additional quadrant. For example, if an original domain included only positive values, `domainPadding` will be coerced so that the resulted padded domain will not include negative values.
+_note_ Values supplied for `domainPadding` will be coerced so that padding a domain will never result in charts including an additional quadrant. For example, if an original domain included only positive values, `domainPadding` will be coerced so that the resulted padded domain will not include negative values.
 
 ```playground
 <VictoryChart
@@ -344,10 +403,7 @@ externalEventMutations: PropTypes.arrayOf(
     childName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
     eventKey: PropTypes.oneOfType([
       PropTypes.array,
-      CustomPropTypes.allOfType([
-        CustomPropTypes.integer,
-        CustomPropTypes.nonNegative
-      ]),
+      CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),
       PropTypes.string
     ]),
     mutation: PropTypes.function,
@@ -824,11 +880,11 @@ style={{
 }}
 ```
 
-*note* The `style` prop used by `VictoryAxis` has a different format than the standard `style` prop.
+_note_ The `style` prop used by `VictoryAxis` has a different format than the standard `style` prop.
 
-*note* When a component is rendered as a child of another Victory component, or within a custom `<svg>` element with `standalone={false}` parent styles will be applied to the enclosing `<g>` tag. Many styles that can be applied to a parent `<svg>` will not be expressed when applied to a `<g>`.
+_note_ When a component is rendered as a child of another Victory component, or within a custom `<svg>` element with `standalone={false}` parent styles will be applied to the enclosing `<g>` tag. Many styles that can be applied to a parent `<svg>` will not be expressed when applied to a `<g>`.
 
-*note* custom `angle` and `verticalAnchor` properties maybe included in labels styles.
+_note_ custom `angle` and `verticalAnchor` properties maybe included in labels styles.
 
 _default (provided by default theme):_ See [grayscale theme][] for more detail
 

packages/victory-area/src/helper-methods.js

@@ -75,7 +75,8 @@ const getBaseProps = (props, fallbackProps) => {
     theme,
     width,
     labels,
-    name
+    name,
+    disableInlineStyles
   } = props;
   const initialChildProps = {
     parent: {
@@ -102,7 +103,8 @@ const getBaseProps = (props, fallbackProps) => {
         data,
         interpolation,
         groupComponent,
-        style: style.data
+        style: disableInlineStyles ? {} : style.data,
+        disableInlineStyles
       }
     }
   };

packages/victory-bar/src/bar.js

@@ -146,7 +146,6 @@ Bar.propTypes = {
     })
   ]),
   datum: PropTypes.object,
-  disableInlineStyles: PropTypes.bool,
   getPath: PropTypes.func,
   horizontal: PropTypes.bool,
   pathComponent: PropTypes.element,

packages/victory-bar/src/index.d.ts

@@ -30,7 +30,6 @@ export interface VictoryBarProps
         bottomLeft?: NumberOrCallback;
         bottomRight?: NumberOrCallback;
       };
-  disableInlineStyles?: boolean;
   events?: EventPropTypeInterface<VictoryBarTTargetType, number | string | number[] | string[]>[];
   eventKey?: StringOrNumberOrCallback;
   horizontal?: boolean;
@@ -59,7 +58,6 @@ export interface BarProps extends VictoryCommonPrimitiveProps {
         bottomRight?: NumberOrCallback;
       };
   datum?: any;
-  disableInlineStyles?: boolean;
   getPath?: Function;
   horizontal?: boolean;
   pathComponent?: React.ReactElement;

packages/victory-bar/src/victory-bar.js

@@ -68,7 +68,6 @@ class VictoryBar extends React.Component {
         bottomRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func])
       })
     ]),
-    disableInlineStyles: PropTypes.bool,
     getPath: PropTypes.func,
     horizontal: PropTypes.bool
   };

packages/victory-box-plot/src/helper-methods.js

@@ -148,6 +148,9 @@ const getLabelStyle = (props, styleObject, namespace) => {
 };
 
 const getStyles = (props, styleObject) => {
+  if (props.disableInlineStyles) {
+    return {};
+  }
   const style = props.style || {};
   styleObject = styleObject || {};
   const parentStyles = { height: "100%", width: "100%" };
@@ -206,7 +209,16 @@ const getCalculatedValues = (props) => {
 
 // eslint-disable-next-line complexity
 const getWhiskerProps = (props, type) => {
-  const { horizontal, style, boxWidth, whiskerWidth, datum, scale, index } = props;
+  const {
+    horizontal,
+    style,
+    boxWidth,
+    whiskerWidth,
+    datum,
+    scale,
+    index,
+    disableInlineStyles
+  } = props;
   const { min, max, q1, q3, x, y } = props.positions;
   const boxValue = type === "min" ? q1 : q3;
   const whiskerValue = type === "min" ? min : max;
@@ -227,12 +239,13 @@ const getWhiskerProps = (props, type) => {
       x2: horizontal ? whiskerValue : x + width / 2,
       y2: horizontal ? y + width / 2 : whiskerValue
     },
-    style: style[type] || style.whisker
+    style: disableInlineStyles ? {} : style[type] || style.whisker,
+    disableInlineStyles
   };
 };
 
 const getBoxProps = (props, type) => {
-  const { horizontal, boxWidth, style, scale, datum, index } = props;
+  const { horizontal, boxWidth, style, scale, datum, index, disableInlineStyles } = props;
   const { median, q1, q3, x, y } = props.positions;
   const defaultX = type === "q1" ? q1 : median;
   const defaultY = type === "q1" ? median : q3;
@@ -246,12 +259,13 @@ const getBoxProps = (props, type) => {
     y: horizontal ? y - boxWidth / 2 : defaultY,
     width: horizontal ? defaultWidth : boxWidth,
     height: horizontal ? boxWidth : defaultHeight,
-    style: style[type] || style.boxes
+    style: disableInlineStyles ? {} : style[type] || style.boxes,
+    disableInlineStyles
   };
 };
 
 const getMedianProps = (props) => {
-  const { boxWidth, horizontal, style, datum, scale, index } = props;
+  const { boxWidth, horizontal, style, datum, scale, index, disableInlineStyles } = props;
   const { median, x, y } = props.positions;
   return {
     datum,
@@ -261,7 +275,8 @@ const getMedianProps = (props) => {
     y1: horizontal ? y - boxWidth / 2 : median,
     x2: horizontal ? median : x + boxWidth / 2,
     y2: horizontal ? y + boxWidth / 2 : median,
-    style: style.median
+    style: disableInlineStyles ? {} : style.median,
+    disableInlineStyles
   };
 };
 
@@ -282,7 +297,17 @@ const getOrientation = (labelOrientation, type) =>
   (typeof labelOrientation === "object" && labelOrientation[type]) || labelOrientation;
 
 const getLabelProps = (props, text, type) => {
-  const { datum, positions, index, boxWidth, horizontal, labelOrientation, style, theme } = props;
+  const {
+    datum,
+    positions,
+    index,
+    boxWidth,
+    horizontal,
+    labelOrientation,
+    style,
+    theme,
+    disableInlineStyles
+  } = props;
   const orientation = getOrientation(labelOrientation, type);
   const namespace = `${type}Labels`;
   const labelStyle = style[namespace] || style.labels;
@@ -304,15 +329,16 @@ const getLabelProps = (props, text, type) => {
     datum,
     index,
     orientation,
-    style: labelStyle,
+    style: disableInlineStyles ? {} : labelStyle,
     y: horizontal ? positions.y : positions[type],
     x: horizontal ? positions[type] : positions.x,
     dy: horizontal ? getOffset("y") : 0,
     dx: horizontal ? 0 : getOffset("x"),
     textAnchor: labelStyle.textAnchor || defaultTextAnchors[orientation],
     verticalAnchor: labelStyle.verticalAnchor || defaultVerticalAnchors[orientation],
     angle: labelStyle.angle,
-    horizontal
+    horizontal,
+    disableInlineStyles
   };
 
   const component = props[`${type}LabelComponent`];

packages/victory-candlestick/src/helper-methods.js

@@ -49,6 +49,9 @@ const getLabelStyle = (props, styleObject, namespace) => {
 };
 
 const getStyles = (props, style, defaultStyles = {}) => {
+  if (props.disableInlineStyles) {
+    return {};
+  }
   const width = "100%";
   const height = "100%";
 
@@ -155,6 +158,9 @@ const isTransparent = (attr) => {
 };
 
 const getDataStyles = (datum, style, props) => {
+  if (props.disableInlineStyles) {
+    return {};
+  }
   style = style || {};
   const candleColor =
     datum._open > datum._close ? props.candleColors.negative : props.candleColors.positive;
@@ -322,7 +328,8 @@ const getBaseProps = (props, fallbackProps) => {
     labels,
     events,
     sharedEvents,
-    horizontal
+    horizontal,
+    disableInlineStyles
   } = props;
   const initialChildProps = {
     parent: {
@@ -373,7 +380,8 @@ const getBaseProps = (props, fallbackProps) => {
       open,
       close,
       horizontal,
-      labelOrientation
+      labelOrientation,
+      disableInlineStyles
     };
     dataProps.candleWidth = getCandleWidth(dataProps);
     const extendedProps = defaults(Object.assign({}, dataProps), props);

packages/victory-core/src/index.d.ts

@@ -171,6 +171,7 @@ export interface VictoryAxisCommonProps {
   axisLabelComponent?: React.ReactElement;
   axisValue?: number | string | object | Date;
   dependentAxis?: boolean;
+  disableInlineStyles?: boolean;
   gridComponent?: React.ReactElement;
   invertAxis?: boolean;
   style?: {
@@ -210,6 +211,7 @@ export interface VictoryLabelProps {
   data?: any[];
   desc?: string;
   direction?: string;
+  disableInlineStyles?: boolean;
   events?: React.DOMAttributes<any>;
   groupComponent?: React.ReactElement;
   id?: StringOrNumberOrCallback;
@@ -679,6 +681,7 @@ export interface VictoryCommonPrimitiveProps {
   clipPath?: string;
   data?: any;
   desc?: string | Function;
+  disableInlineStyles?: boolean;
   events?: object;
   id?: number | string | Function;
   index?: number | string;

packages/victory-core/src/victory-label/victory-label.js

@@ -60,7 +60,11 @@ const useMultiLineBackgrounds = (props) => {
 
 const getStyles = (style, props) => {
   if (props.disableInlineStyles) {
-    return {};
+    const baseStyles = Helpers.evaluateStyle(style, props);
+    return {
+      // Font size is necessary to calculate the y position of the label
+      fontSize: getFontSize(baseStyles)
+    };
   }
   const getSingleStyle = (s) => {
     s = s ? defaults({}, s, defaultStyles) : defaultStyles;

packages/victory-core/src/victory-util/common-props.js

@@ -11,6 +11,7 @@ const dataProps = {
   ]),
   data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   dataComponent: PropTypes.element,
+  disableInlineStyles: PropTypes.bool,
   labelComponent: PropTypes.element,
   labels: PropTypes.oneOfType([PropTypes.func, PropTypes.array]),
   samples: CustomPropTypes.nonNegative,
@@ -151,6 +152,7 @@ const primitiveProps = {
   clipPath: PropTypes.string,
   data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   desc: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  disableInlineStyles: PropTypes.bool,
   events: PropTypes.object,
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
   index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

packages/victory-core/src/victory-util/helpers.js

@@ -128,6 +128,9 @@ function evaluateProp(prop, props) {
 }
 
 function evaluateStyle(style, props) {
+  if (props.disableInlineStyles) {
+    return {};
+  }
   if (!style || !keys(style).some((value) => isFunction(style[value]))) {
     return style;
   }