Problem/Motivation

Drupal Core provides Vertical Tabs as Render Element: https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21...

So you would expect that if there are vertical tabs, there should also be horizontal tabs.
But that's not the case!

See https://api.drupal.org/api/drupal/namespace/Drupal%21Core%21Render%21Ele...

Steps to reproduce

Try switching from
'#type' => 'vertical_tabs'
to
'#type' => 'horizontal_tabs'
and wonder horizontal_tabs isn't existing

Proposed resolution

Move the horizontal tabs implementation (and maybe also other field group types) from Field Group module into core and remove it from field_group. Also deprecate Horizontal Tabs module

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Take advantage of vertical tab, add horizontal tabs into core.

CommentFileSizeAuthor
#8 Screen Shot 2017-09-03 at 6.30.55 PM.png70.01 KBjrockowitz

Comments

bismigalis’s picture

bismigalis commented

double

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

agoradesign’s picture

agoradesign commented
Issue summary: View changes

I just needed the same thing.

I failed in integrating the horizontal tabs from field_group module programmatically and ended up in build my own horizontal_tabs form element based on the core's vertical_tabs. You can find this on Github: https://github.com/agoradesign/horizontal_tabs

I've explained in the README file of the module, why it currently is only hosted on Github and not on Drupal. First I want to see that there's demand for that and that the chances are low that this functionality gets merged into Core or field_group soon.

tacituseu’s picture

tacituseu commented
Version: 8.4.x-dev » 8.5.x-dev
jrockowitz’s picture

jrockowitz commented
Issue summary: View changes
StatusFileSize
new Screen Shot 2017-09-03 at 6.30.55 PM.png70.01 KB

I also just added support for horizontal tabs using jQueryUI to the Webform module's UX (for D8)

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented

Horizontal Tabs would make a lot of sense in D8 core while Vertical tabs already exist. +1

droplet’s picture

droplet commented
Project: Drupal core » Drupal core ideas
Version: 8.5.x-dev »
Component: forms system » Idea

Let's see if we could get it approve before implementation. I believe we only need few CSS additions. (Something like a class to toggle the states)

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented

Ok sounds good. Everything else should be part of horizontal_tabs module as described above.

jhonatasfender’s picture

jhonatasfender commented

https://github.com/agoradesign/horizontal_tabs/issues/1

I ran the composer require to test, when I enabled the module it presented this error.

[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP Fatal error:  Cannot redeclare template_preprocess_horizontal_tabs() (previously declared in C:\project\bancorbras_memorias\web\modules\contrib\horizontal_tabs\horizontal_tabs.module:24) in C:\project\bancorbras_memorias\web\modules\contrib\field_group\templates\theme.inc on line 22
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP Stack trace:
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP   1. {main}() C:\project\bancorbras_memorias\web\index.php:0
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP   2. Drupal\Core\DrupalKernel->handle() C:\project\bancorbras_memorias\web\index.php:19
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP   3. Stack\StackedHttpKernel->handle() C:\project\bancorbras_memorias\web\core\lib\Drupal\Core\DrupalKernel.php:693
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP   4. Drupal\Core\StackMiddleware\NegotiationMiddleware->handle() C:\project\bancorbras_memorias\vendor\stack\builder\src\Stack\StackedHttpKernel.php:23
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP   5. Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle() C:\project\bancorbras_memorias\web\core\lib\Drupal\Core\StackMiddleware\NegotiationMiddleware.php:52
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP   6. Drupal\page_cache\StackMiddleware\PageCache->handle() C:\project\bancorbras_memorias\web\core\lib\Drupal\Core\StackMiddleware\ReverseProxyMiddleware.php:47
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP   7. Drupal\page_cache\StackMiddleware\PageCache->pass() C:\project\bancorbras_memorias\web\core\modules\page_cache\src\StackMiddleware\PageCache.php:78
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP   8. Drupal\Core\StackMiddleware\KernelPreHandle->handle() C:\project\bancorbras_memorias\web\core\modules\page_cache\src\StackMiddleware\PageCache.php:99
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP   9. Drupal\Core\StackMiddleware\Session->handle() C:\project\bancorbras_memorias\web\core\lib\Drupal\Core\StackMiddleware\KernelPreHandle.php:47
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP  10. Symfony\Component\HttpKernel\HttpKernel->handle() C:\project\bancorbras_memorias\web\core\lib\Drupal\Core\StackMiddleware\Session.php:57
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP  11. Symfony\Component\HttpKernel\HttpKernel->handleRaw() C:\project\bancorbras_memorias\vendor\symfony\http-kernel\HttpKernel.php:68
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP  12. Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch() C:\project\bancorbras_memorias\vendor\symfony\http-kernel\HttpKernel.php:156
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP  13. call_user_func:{C:\project\bancorbras_memorias\web\core\lib\Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher.php:111}() C:\project\bancorbras_memorias\web\core\lib\Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher.php:111
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP  14. Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray() C:\project\bancorbras_memorias\web\core\lib\Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher.php:111
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP  15. Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse() C:\project\bancorbras_memorias\web\core\lib\Drupal\Core\EventSubscriber\MainContentViewSubscriber.php:90
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP  16. Drupal\Core\Render\Renderer->executeInRenderContext() C:\project\bancorbras_memorias\web\core\lib\Drupal\Core\Render\MainContent\HtmlRenderer.php:148
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP  17. Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() C:\project\bancorbras_memorias\web\core\lib\Drupal\Core\Render\Renderer.php:582
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP  18. Drupal\Core\Render\Renderer->render() C:\project\bancorbras_memorias\web\core\lib\Drupal\Core\Render\MainContent\HtmlRenderer.php:147
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP  19. Drupal\Core\Render\Renderer->doRender() C:\project\bancorbras_memorias\web\core\lib\Drupal\Core\Render\Renderer.php:195
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP  20. Drupal\Core\Theme\ThemeManager->render() C:\project\bancorbras_memorias\web\core\lib\Drupal\Core\Render\Renderer.php:437
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP  21. Drupal\Core\Theme\Registry->getRuntime() C:\project\bancorbras_memorias\web\core\lib\Drupal\Core\Theme\ThemeManager.php:142
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP  22. Drupal\Core\Utility\ThemeRegistry->__construct() C:\project\bancorbras_memorias\web\core\lib\Drupal\Core\Theme\Registry.php:253
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP  23. Drupal\Core\Utility\ThemeRegistry->initializeRegistry() C:\project\bancorbras_memorias\web\core\lib\Drupal\Core\Utility\ThemeRegistry.php:67
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP  24. Drupal\Core\Theme\Registry->get() C:\project\bancorbras_memorias\web\core\lib\Drupal\Core\Utility\ThemeRegistry.php:86
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP  25. Drupal\Core\Theme\Registry->build() C:\project\bancorbras_memorias\web\core\lib\Drupal\Core\Theme\Registry.php:233
[12-Mar-2019 11:30:38 America/Sao_Paulo] PHP  26. Drupal\Core\Theme\Registry->processExtension() C:\project\bancorbras_memorias\web\core\lib\Drupal\Core\Theme\Registry.php:334

to solve the problem I changed the code to:

function horizontal_tabs_preprocess_horizontal_tabs(&$variables) {
  $element = $variables['element'];
  $variables['children'] = (!empty($element['#children'])) ? $element['#children'] : '';
}

I would like to know if I can contribute to this change, is it valid?

agoradesign’s picture

agoradesign commented

Problem is that field_group and horizontal_tabs conflict with each other. They both declare the same theme hook. see #2988689: Conflict with module field_group

jhonatasfender’s picture

jhonatasfender commented

@agoradesign Do you think it's important to post this to help close people?

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Title: add horizontal tabs supports to FAPI » Add horizontal tabs supports to FAPI
Issue summary: View changes
Related issues: +#3362594: Deprecate in favor of Field Group module

FYI: horizontal_tabs are not only part of horizontal_tabs module, but also field_group module!
I created an issue in horizontal_tabs to deprecate it and join efforts on field_group module: #3362594: Deprecate in favor of Field Group module

Updating the issue summary.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Issue summary: View changes
quietone’s picture

quietone commented
Project: Drupal core ideas » Drupal core
Version: » 11.x-dev
Component: Idea » forms system

The Ideas project is being deprecated. This issue is moved to the Drupal project. Check that the selected component is correct. Also, add the relevant tags, especially any 'needs manager review' tags.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.