Issue #3257075 by pivica, Berdir, mathilde_dumond: Floating labels new filled...

    - core/jquery

    - core/drupal

floating-labels-filled:

  css:

    component:

      css/components/floating-labels-filled.css: {}

floating-labels-outlined:

  css:

    component:

      css/components/floating-labels-outlined.css: {}

navbar-offcanvas:

  css:

    component:

 */

use Drupal\block\Entity\Block;

use Drupal\bs_bootstrap\BsBootstrapFormAlter;

use Drupal\Component\Utility\NestedArray;

use Drupal\Component\Utility\Xss;

use Drupal\Core\Form\FormStateInterface;

use Drupal\Core\Language\LanguageInterface;

use Drupal\Core\Render\Element;

use Drupal\Core\Template\Attribute;

use Drupal\Core\Url;

use Drupal\system\Plugin\Block\SystemMenuBlock;

/* Hooks */

    '#default_value' => bs_bootstrap_get_setting('floating_labels') ? 1 : 0,

    '#description' => t('Enable floating labels for forms. Check Bootstrap example for <a href="@floating-labels">floating labels</a>.', ['@floating-labels' => 'https://getbootstrap.com/docs/4.3/examples/floating-labels']),

  ];

  // Floating labels.

  $form['bs_bootstrap']['floating_labels_type'] = [

    '#type' => 'select',

    '#title' => t('Floating labels type'),

    '#options' => [

      'default' => t('Default'),

      'filled' => t('Filled'),

      'outlined' => t('Outlined'),

    ],

    '#default_value' => bs_bootstrap_get_setting('floating_labels_type') ?? 'default',

    '#description' => t('Floating label type. <em>Default</em> - as a combination of filled and outlined types it has a border outline and active label stays inside an input field. <em>Filled</em> - has background color and bottom border, active label stays inside an input field. <em>Outlined</em> - has border outline and active label moves on top of a top border.'),

    '#states' => [

      'visible' => [

        ':input[name="bs_bootstrap[floating_labels]"]' => ['!value' => '0'],

      ],

    ],

  ];

}

/* Preprocessors */

/**

 * Implements hook_form_alter().

 */

function bs_bootstrap_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {

function bs_bootstrap_form_alter(&$form, FormStateInterface $form_state, $form_id) {

  $floating_labels = bs_bootstrap_get_setting('floating_labels');

  // If floating labels are on and form is not disabling it attach library and

  // CSS class.

  if ($floating_labels && empty($form['#floating_labels_off']) ) {

  // If floating labels are on and form is not disabling it attach library, CSS

  // class and information to all form children.

  if ($floating_labels && empty($form['#floating_labels_off'])

      && (empty($form['#attributes']['class']) || !in_array('form--floating-labels-off', $form['#attributes']['class']))) {

    $form['#attached']['library'][] = 'bs_bootstrap/floating-labels';

    $form['#attributes']['class'][] = 'form--floating-labels';

    if (bs_bootstrap_get_setting('floating_labels_type') != 'default') {

      $form['#attached']['library'][] = 'bs_bootstrap/floating-labels-' . bs_bootstrap_get_setting('floating_labels_type');

      $form['#attributes']['class'][] = 'form--floating-labels--' . bs_bootstrap_get_setting('floating_labels_type');

    }

    // Copy floating enable info to all children elements - needed for

    // bs_bootstrap_preprocess_form_element().

    // We are doing this here in hook_form_alter() and not in form pre_render

    // callback because this will not work for ajax reloaded form parts - form

    // is already cached at this moment and pre_render on the whole form will

    // not be called.

    $elements_enable_floating_labels = function (&$element) use (&$elements_enable_floating_labels) {

      $children = Element::children($element);

      foreach ($children as $key) {

        $element[$key]['#floating_labels'] = TRUE;

        // Webform composite elements, and a couple of others composite types are

        // not ready in hook_form_alter() so we need to use pre render callback

        // to enable floating label.

        if (isset($element[$key]['#webform_composite_elements']) || (isset($element[$key]['#type']) && in_array($element[$key]['#type'], ['address', 'datetime', 'password_confirm']))) {

          $element[$key]['#pre_render'][] = [BsBootstrapFormAlter::class, 'enableFloatingLabels'];

        }

        $elements_enable_floating_labels($element[$key]);

      }

    };

    $elements_enable_floating_labels($form);

  }

}

    $variables['has_errors'] = TRUE;

  }

  // Pass form type to label child so we can attach helper CSS classes in the

  // Pass form type to label child, so we can attach helper CSS classes in the

  // template.

  $variables['label']['#form_type'] = $variables['type'];

  $variables['label']['#custom_forms'] = $variables['custom_forms'];

    $variables['attributes']['class'][] = 'form-group';

  }

  // Enable floating labels for text-input-type elements.

  $floating_labels = bs_bootstrap_get_setting('floating_labels');

  // @todo - note here that we can not check on element level has the parent

  // form floating_labels_off switch. Can we fix this somehow?

  if (isset($element['#type']) && $floating_labels) {

  // Enable floating labels for compatible form element types.

  if (isset($element['#type']) && !empty($element['#floating_labels'])) {

    switch ($element['#type']) {

      case 'textfield':

      case 'color':

      case 'date':

      case 'datetime':

      case 'email':

      case 'textarea':

      case 'tel':

      case 'select':

      case 'password':

      case 'entity_autocomplete':

      case 'machine_name':

      case 'number':

      case 'url':

      case 'password':

      case 'search':

      case 'date':

      case 'select':

      case 'tel':

      case 'textfield':

      case 'textarea':

      case 'url':

      case 'webform_autocomplete':

      case 'webform_time':

        if ($element['#title_display'] !== 'invisible' && $element['#title_display'] !== 'hidden' && $element['#title_display'] !== 'none') {

          $variables['floating_labels'] = TRUE;

          $variables['attributes']['class'][] = 'form-group--floating-label';

function bs_bootstrap_preprocess_fieldset(&$variables) {

  if (bs_bootstrap_get_setting('floating_labels')) {

    // Add class to make fieldset legends smaller for checkboxes and radios.

    if (isset($variables['element']['#type']) && in_array($variables['element']['#type'], ['checkboxes', 'radios'])) {

    if (isset($variables['element']['#type']) && in_array($variables['element']['#type'], ['checkboxes', 'radios', 'webform_scale', 'webform_radios_other'])) {

      $variables['attributes']['class'][] = 'form-group--muted-legend';

    }

  }

    'logo_svg_inline' => FALSE,

    'custom_forms' => FALSE,

    'floating_labels' => FALSE,

    'floating_labels_type' => 'default',

  ];

  $setting_value = theme_get_setting('bs_bootstrap.' . $setting_name);

bs_bootstrap:

  custom_forms: true

  floating_labels: false

  floating_labels_type: default

  language_block:

    title: label

    type: links

        floating_labels:

          type: boolean

          label: 'Floating labels in forms'

        floating_labels_type:

          type: string

          label: 'Outline style for floating labels'

@import "init";

@import "partials/floating-labels-vars";

@import "partials/floating-labels-filled";