Remove EuiFlexGroup dependency from EuiAccordion

[cchaos]

Based on the issues stemming from negative margins and all the different options from EuiFlexGroup and wild nesting, I've removed this dependency for just applying display: flex in CSS.

Ref: #2141

Fixes the failed responsiveness when using the extraAction prop

I also added an example of how to truncate the text properly

cc @sulemanof @maryia-lapata

Checklist

• This was checked in Kibana
• 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

[snide]

I think approach is good and looks fine on the code side. Anytime we change flex though I think it's smart to test further downstream. Let's make sure we run this in Kibana and checking some known usages before merging.

[cchaos]

I checked this in current instances of EuiAccordion in Kibana as well as @maryia-lapata's PR. All the current instances are good, and so is the PR with some tweaking of the button content.

[sulemanof]

The buttonContentClasses contains the buttonContentClassName prop and euiAccordion__buttonContent class, which I can't find in the existing styles. Could we get rid of buttonContentClassName at all since we can pass a buttonContent node with already applied class ? And also get rid of redundant buttonContentClasses variable ..

Suggested change

	<span className={buttonContentClasses}>{buttonContent}</span>
	{buttonContent}

[cchaos]

I see your point about the class .euiAccordion__buttonContent not being used in any SASS, I can remove that class. However, we need to keep buttonContentClassName because as a consumer, you can't target that inner span wihout overriding a .eui class.

So we're providing a way to target that exact span, which needs to happen if you need to truncate the text, as is shown in this example:

eui/src-docs/src/views/accordion/accordion_multiple.js

Line 23 in 92282d5

buttonContentClassName="eui-textTruncate"

[sulemanof]

What is a benefit of providing a className for a node which I also provide manually? That means I could pass the buttonContent prop as node : <span className="eui-textTruncate">My very very very long text is here</span>

[cchaos]

Because not all consumers know to do it that way, haha

[cchaos]

retest

[cchaos]

jenkins, test this