Adjusting font baseline to avoid needing to transform it

src/rendering/Box/index.js

@@ -12,7 +12,6 @@ const Box = ({
   width,
   height,
   rectTransform,
-  labelTransform,
   contentTransform,
   children
 }) => {
@@ -24,14 +23,10 @@ const Box = ({
     ry: radius,
     transform: rectTransform
   };
-  const textProps = {
-    transform: labelTransform,
-    style: style.infoText
-  };
 
   return <>
     <rect { ...rectProps }></rect>
-    { label && <text { ...textProps }>{ label }</text> }
+    { label && <text style={ style.infoText }>{ label }</text> }
     <g transform={ contentTransform}>
       { children }
     </g>
@@ -51,7 +46,6 @@ Box.propTypes = {
   width: PropTypes.number,
   height: PropTypes.number,
   rectTransform: PropTypes.string,
-  labelTransform: PropTypes.string,
   contentTransform: PropTypes.string,
   children: PropTypes.node
 };
@@ -75,7 +69,6 @@ const layout = data => {
     width: data.box.width,
     height: childBox.height + 2 * padding,
     rectTransform: `translate(0 ${ labelBox.height })`,
-    labelTransform: `translate(0 ${ labelBox.height })`,
     contentTransform: `translate(${ padding } ${ padding + labelBox.height })`
   };
   return data;

src/rendering/Box/style.js

@@ -34,5 +34,5 @@ export const anchor = {
 export const infoText = {
   fontSize: fontSizeSmall,
   fontFamily: fontFamily,
-  dominantBaseline: 'text-after-edge'
+  dominantBaseline: 'text-before-edge'
 };

src/rendering/Text/index.js

@@ -5,13 +5,8 @@ import { getBBox } from 'layout';
 
 import * as style from './style';
 
-const Text = ({ transform, quoted, theme, children }) => {
+const Text = ({ quoted, theme, children }) => {
-  const textProps = {
+  return <text style={{ ...style.text, ...style[theme] }}>
-    style: { ...style.text, ...style[theme] },
-    transform
-  };
-
-  return <text { ...textProps }>
     { quoted ? <>
       <tspan style={ style.quote }>&ldquo;</tspan>
       <tspan>{ children }</tspan>
@@ -23,7 +18,6 @@ const Text = ({ transform, quoted, theme, children }) => {
 Text.propTypes = {
   quoted: PropTypes.bool,
   theme: PropTypes.string,
-  transform: PropTypes.string,
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node
@@ -31,11 +25,10 @@ Text.propTypes = {
 };
 
 const layout = data => {
-  const {x, y, width, height } = getBBox(
+  const { width, height } = getBBox(
     <Text { ...data.props }>{ data.children }</Text>);
 
   data.box = { width, height };
-  data.props.transform = `translate(${ -x } ${ -y })`;
   return data;
 };
 

src/rendering/Text/style.js

@@ -1,7 +1,8 @@
 import { fontSize, fontFamily, white, grey } from 'rendering/style';
 
 export const text = {
-  fontSize, fontFamily
+  fontSize, fontFamily,
+  dominantBaseline: 'text-before-edge'
 };
 export const anchor = {
   fill: white