@carto/kepler.gl 0.0.15 → 0.0.16-alpha.0

package/src/components/side-panel/layer-panel/text-label-panel.js

@@ -50,8 +50,17 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector) {
       updateLayerTextLabel: PropTypes.func.isRequired
     };
 
+    static defaultProps = {
+      AddButton: props => (
+        <Button {...props} link>
+          <Add height="12px" />
+          <FormattedMessage id="panel.text.addMoreLabel" />
+        </Button>
+      )
+    };
+
     render() {
-      const {updateLayerTextLabel, textLabel, fields} = this.props;
+      const {updateLayerTextLabel, textLabel, fields, AddButton} = this.props;
       const currentFields = textLabel.map(tl => tl.field && tl.field.name).filter(d => d);
       return (
         <LayerConfigGroup label={'panel.text.label'} collapsible>
@@ -65,7 +74,10 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector) {
           </ConfigGroupCollapsibleHeader>
           <ConfigGroupCollapsibleContent>
             {textLabel.map((tl, idx) => (
-              <div key={tl.field ? tl.field.name : `null-${idx}`}>
+              <div
+                key={tl.field ? tl.field.name : `null-${idx}`}
+                className="side-panel-section-group"
+              >
                 <PanelLabel>
                   <FormattedMessage id={'panel.text.labelWithId'} values={{labelId: idx + 1}} />
                 </PanelLabel>
@@ -129,10 +141,7 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector) {
               </div>
             ))}
             <SidePanelSection>
-              <Button link onClick={val => updateLayerTextLabel(textLabel.length)}>
-                <Add height="12px" />
-                <FormattedMessage id="panel.text.addMoreLabel" />
-              </Button>
+              <AddButton onClick={val => updateLayerTextLabel(textLabel.length)} />
             </SidePanelSection>
           </ConfigGroupCollapsibleContent>
         </LayerConfigGroup>

package/src/localization/en.js

@@ -439,6 +439,11 @@ export default {
     type: 'type',
     reversed: 'reversed'
   },
+  customPalette: {
+    apply: 'Apply',
+    cancel: 'Cancel',
+    addStep: '+ Add Step'
+  },
   scale: {
     colorScale: 'Color Scale',
     sizeScale: 'Size Scale',