CodeBlock - empty header/actions elements if no actions are passed

[mcoker]

The border comes from the presence of the header.

@mmenestr @mcarrano according to the design guidelines:

Code blocks can include multiple actions. By default, the copy action is always present and any other actions are optional and customizable.

It isn't built in to the react component - it has to be defined by the user. Does the design doc blurb imply the copy button is required? Or can it be optional? I would lean toward it being optional, in case it does something like show a code example/format that isn't meant to be copied/pasted. If so, I don't think we should render the header/actions block unless something is passed.

patternfly-react/packages/react-core/src/components/CodeBlock/CodeBlock.tsx

Lines 21 to 23 in 44af730

	<div className={css(styles.codeBlockHeader)}>
	<div className={css(styles.codeBlockActions)}>{actions && actions}</div>
	</div>

We may also consider adding a __header-main element that is adjacent to the actions block for a user to place other items in the header. Currently it's only setup to accept the actions block. This code language toggle group is a good use case for that? https://codesandbox.io/s/code-editor-language-toggle-group-jcmqlb?file=/toggle.js

[mcarrano]

t isn't built in to the react component - it has to be defined by the user. Does the design doc blurb imply the copy button is required? Or can it be optional?

I guess the Copy button could be optional. I think the feeling was that for a Code block you'd always want to be able to copy the contents to the clipboard. Can you think of reasons why we may not want that @mcoker ?

[mcoker]

@mcarrano if you want to show a sample block of code that is for demonstration, not for copy/paste. There are code block components with no copy button on our dev guidelines like that - https://www.patternfly.org/v4/developer-resources/global-css-variables

Or if you want to show the source code for something, similar to how I would reference these docs about the type prop for the <TextInput>

patternfly-react/packages/react-core/src/components/TextInput/TextInput.tsx

Lines 48 to 59 in 44af730

	type?:
	| 'text'
	| 'date'
	| 'datetime-local'
	| 'email'
	| 'month'
	| 'number'
	| 'password'
	| 'search'
	| 'tel'
	| 'time'
	| 'url';

I would also make the case that there should be an inline code block (though it wouldn't be a "block"). Pretty much the "inline compact" copy to clipboard, which already matches the code block component exactly, even with the "play" button. https://www.patternfly.org/v4/components/clipboard-copy/html#inline-compact-in-sentence A use case for that without a copy button would be all the inline code on the css var guidelines page that has a white background and light grey border.

[mcarrano]

@mmenestr thoughts? ^^^

[mmenestr]

@mcarrano @mcoker I think it's fine to make it optional, and we can update the design guidelines to match that!