Fix responsiveness of EuiFilterGroup

[cchaos]

Fixes #1818

Changed up a bit of the styles to allow for better responsiveness of EuiFilterGroup. It required adding an optional prop of fullWidth for better control.

…including the search bar.

---

Deprecations

I have deprecated the use of noDivider on EuiFilterButtons in favor of a more aptly named prop of withNext in case it's more than just a divider change.

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in dark mode
• Any props added have proper autodocs
• Documentation examples were added
• A changelog entry exists and is marked appropriately
• This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios
• [ ] This was checked against keyboard-only and screenreader scenarios
• [ ] This required updates to Framer X components

[cchaos]

@snide Do you playing with this a bit to see if it suits? Don't look at the code just yet, I have to do cleanup.

[snide]

Didn't test IE, but this wrap works much better and seems to scale. Small comments below.

[snide]

Really small. Wonder where we should put title tags on this kind of stuff.

I guess we couldn't do it automatically because we never know the contents, and I could see titles on all buttons being annoying, so prolly just something we should add directly on our docs examples.

[cchaos]

I don't think adding title attributes to every filter button would be annoying because they only show on long hovers (unlike tooltips). I do think it's a pattern we need to keep up with: If we use the euiTextTruncate mixin, we must also apply the title attribute.

[cchaos]

@chandlerprall Can you help me set this up for localization? There's a few ifs in there that I'm not sure how to deal with.

[chandlerprall]

Process: the aria-label value needs to be computed by EuiI18n, so computing the value will be done by a function passed to Eui18n's default prop. Any variables needed to compute the label are passed via values. Eui18n's single child is a render prop (function called to render the actual child content) and is given the computed label as an argument.

      {numFiltersDefined &&
        <EuiI18n
          token="euiFilterButton.filterBadge"
          values={{ count: numActiveFilters || numFilters, hasActiveFilters }}
          default={({ count, hasActiveFilters }) => `${count} ${hasActiveFilters ? 'active' : 'available'} filters`}
        >
          {
            filterBadge => (
              <EuiNotificationBadge
                className="euiFilterButton__notification"
                size="m"
                aria-label={filterBadge}
                color={isDisabled || !hasActiveFilters ? 'subdued' : 'accent'}
              >
                {numActiveFilters || numFilters}
              </EuiNotificationBadge>
            )
          }
        </EuiI18n>
      }

[cchaos]

Thx!

[cchaos]

@snide Can I get a final pass on this?

[chandlerprall]

Code/TypeScript changes LGTM

[snide]

Ran locally. Rechecked the code after last feedback. LGTM.