Allow hiding codeBlockTitle in 2.0

[IanVS]

Is your feature request related to a problem?

I am testing out the 2.0 beta, and so far it is much easier to customize and style. 👏

But, I see that a code demo title has been added, and it does not use a BEM class, so it's difficult to hide. I'd like to not show that title, to keep the same behavior as before.

Describe the solution you'd like

Add a BEM-style class to the codeBlockTitle component, so that I can hide it with display: none.

Describe alternatives you've considered

Additional context

Also, after hiding it, I'm getting fuzzy top borders in the corners because of this style:

.codeBlockTitle_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Content-styles-module + .codeBlockContent_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Content-styles-module .codeBlock_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Content-styles-module {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

[sserrata]

Hi @IanVS, thanks for the feedback! We're actually planning to redesign the CodeTabs/Snippets and will be removing the title as part of that effort. The plan is to:

• Move the language name to below the logo
• Introduce a dropdown menu to CodeBlock for selecting the variant
• Introduce a button to "expand" view of the code snippet to a larger modal

[IanVS]

Cool, sounds good. If we don't have multiple variants of a given language, will the variant menu be hidden?

[sserrata]

Hi @IanVS, as you might have already seen, we took a different direction with language/variant tabs. Looking forward to your feedback.

[IanVS]

I did see that, thanks. It looks good, but Is it possible to specify a single variant per language in config, to prevent the variant selection from being shown? We'd like to keep the language picker as simple as possible.

[sserrata]

Not currently, but the variants are defined as an array, so it should be possible to filter based on what's defined in the docusaurus config.

[IanVS]

I'm trying to limit the variants shown, but it doesn't seem to behave the way I expect. For example, if I use this:

 languageTabs: [
        {
          highlight: 'javascript',
          language: 'nodejs',
          logoClass: 'nodejs',
          variant: 'native',
        },
      ],

Then the result still shows all four options, but the native code block is shown (even though axios looks selected). (Ignore the styling, I haven't updated the css yet).

I suppose maybe this is fine, and I can just use css to display: none the variant picker, but it definitely wasn't what I was expecting to see. Ideally, if I specify a single variant in my config, I'd love for this plugin to use it and just not show any other options.

[sserrata]

added to roadmap with goal of supporting custom array of variants