💄 Hide missing fields row on bar charts + better icon alignment

elastic · Nov 4, 2020 · 36a6c3e · 36a6c3e
1 parent f3d1ec1
commit 36a6c3e
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 53 deletions.
diff --git a/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx b/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx
@@ -32,7 +32,6 @@ export interface ToolbarPopoverProps {
    */
   groupPosition?: ToolbarButtonProps['groupPosition'];
   buttonDataTestSubj?: string;
-  larger?: boolean;
 }
 
 export const ToolbarPopover: React.FunctionComponent<ToolbarPopoverProps> = ({
@@ -42,17 +41,15 @@ export const ToolbarPopover: React.FunctionComponent<ToolbarPopoverProps> = ({
   isDisabled = false,
   groupPosition,
   buttonDataTestSubj,
-  larger,
 }) => {
   const [open, setOpen] = useState(false);
 
   const iconType: string | IconType = typeof type === 'string' ? typeToIconMap[type] : type;
-  const panelClassName = larger ? 'lnsXyToolbar__popoverLarger' : 'lnsXyToolbar__popover';
 
   return (
     <EuiFlexItem grow={false}>
       <EuiPopover
-        panelClassName={panelClassName}
+        panelClassName="lnsXyToolbar__popover"
         ownFocus
         aria-label={title}
         button={

diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.scss b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.scss
@@ -1,7 +1,3 @@
 .lnsXyToolbar__popover {
   width: 320px;
 }
-
-.lnsXyToolbar__popoverLarger {
-  width: 380px;
-}
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
@@ -264,12 +264,19 @@ export function XyToolbar(props: VisualizationToolbarProps<State>) {
                   )}
                   condition={isValueLabelsDisabled}
                 >
-                  {i18n.translate('xpack.lens.shared.chartValueLabelVisibilityLabel', {
-                    defaultMessage: 'Labels',
-                  })}{' '}
-                  {isValueLabelsDisabled ? (
-                    <EuiIcon type="questionInCircle" color="subdued" />
-                  ) : null}
+                  <span>
+                    {i18n.translate('xpack.lens.shared.chartValueLabelVisibilityLabel', {
+                      defaultMessage: 'Labels',
+                    })}{' '}
+                    {isValueLabelsDisabled ? (
+                      <EuiIcon
+                        type="questionInCircle"
+                        color="subdued"
+                        size="s"
+                        className="eui-alignTop"
+                      />
+                    ) : null}
+                  </span>
                 </TooltipWrapper>
               }
             >
@@ -292,46 +299,37 @@ export function XyToolbar(props: VisualizationToolbarProps<State>) {
                 }}
               />
             </EuiFormRow>
-            <EuiFormRow
-              display="columnCompressed"
-              label={
-                <TooltipWrapper
-                  tooltipContent={i18n.translate('xpack.lens.xyChart.fittingDisabledHelpText', {
-                    defaultMessage: 'This setting only applies to line and area charts.',
-                  })}
-                  condition={!hasNonBarSeries}
-                >
-                  {i18n.translate('xpack.lens.xyChart.missingValuesLabel', {
-                    defaultMessage: 'Missing values',
-                  })}{' '}
-                  {!hasNonBarSeries ? <EuiIcon type="questionInCircle" color="subdued" /> : null}
-                </TooltipWrapper>
-              }
-            >
-              <EuiSuperSelect
-                data-test-subj="lnsMissingValuesSelect"
-                disabled={!hasNonBarSeries}
-                compressed
-                options={fittingFunctionDefinitions.map(({ id, title, description }) => {
-                  return {
-                    value: id,
-                    dropdownDisplay: (
-                      <>
-                        <strong>{title}</strong>
-                        <EuiText size="xs" color="subdued">
-                          <p>{description}</p>
-                        </EuiText>
-                      </>
-                    ),
-                    inputDisplay: title,
-                  };
+            {hasNonBarSeries ? (
+              <EuiFormRow
+                display="columnCompressed"
+                label={i18n.translate('xpack.lens.xyChart.missingValuesLabel', {
+                  defaultMessage: 'Missing values',
                 })}
-                valueOfSelected={state?.fittingFunction || 'None'}
-                onChange={(value) => setState({ ...state, fittingFunction: value })}
-                itemLayoutAlign="top"
-                hasDividers
-              />
-            </EuiFormRow>
+              >
+                <EuiSuperSelect
+                  data-test-subj="lnsMissingValuesSelect"
+                  compressed
+                  options={fittingFunctionDefinitions.map(({ id, title, description }) => {
+                    return {
+                      value: id,
+                      dropdownDisplay: (
+                        <>
+                          <strong>{title}</strong>
+                          <EuiText size="xs" color="subdued">
+                            <p>{description}</p>
+                          </EuiText>
+                        </>
+                      ),
+                      inputDisplay: title,
+                    };
+                  })}
+                  valueOfSelected={state?.fittingFunction || 'None'}
+                  onChange={(value) => setState({ ...state, fittingFunction: value })}
+                  itemLayoutAlign="top"
+                  hasDividers
+                />
+              </EuiFormRow>
+            ) : null}
           </ToolbarPopover>
           <LegendSettingsPopover
             legendOptions={legendOptions}