Unverified Commit c9a231cc authored by Alex Pott's avatar Alex Pott
Browse files

Issue #3083570 by huzooka, shashikant_chauhan, rensingh99, ckrina, katannshaw,... 

Issue #3083570 by huzooka, shashikant_chauhan, rensingh99, ckrina, katannshaw, shimpy, andrewmacpherson, mfairchild365: Do not hide the label for the text format select input

(cherry picked from commit b12a3a59)
parent e91fad05

core/themes/claro/css/src/components/form.css

+51 −0
Original line number Diff line number Diff line
@@ -253,6 +253,57 @@ tr .form-item, 
  clear: both;

}



/**

 * Custom label placement for editor filter format select.

 */



.form-item--editor-format {

  display: -webkit-box;

  display: -webkit-flex;

  display: -moz-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-flex-wrap: wrap;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-box-align: center;

  -webkit-align-items: center;

  -moz-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  max-width: 100%;

}



.form-item--editor-format .form-item__label,

.form-item--editor-format .form-item__prefix,

.form-item--editor-format .form-item__suffix,

.form-item--editor-format .form-element--editor-format {

  min-width: 1px;

}



.form-item--editor-format .form-item__label,

.form-item--editor-format .form-item__prefix,

.form-item--editor-format .form-item__suffix {

  margin-right: 0.5rem; /* LTR */

}



[dir="rtl"] .form-item--editor-format .form-item__label,

[dir="rtl"] .form-item--editor-format .form-item__prefix,

[dir="rtl"] .form-item--editor-format .form-item__suffix {

  margin-right: 0;

  margin-left: 0.5rem;

}



.form-item--editor-format .form-item__description,

.form-item--editor-format .form-item__error-message {

  -webkit-box-flex: 0;

  -webkit-flex: 0 1 100%;

  -moz-box-flex: 0;

  -ms-flex: 0 1 100%;

  flex: 0 1 100%;

  min-width: 1px;

}



/**

 * Improve form element usability on narrow devices.

 *

core/themes/claro/css/src/components/form.pcss.css

+35 −0
Original line number Diff line number Diff line
@@ -150,6 +150,41 @@ tr .form-item, 
  clear: both;

}



/**

 * Custom label placement for editor filter format select.

 */

.form-item--editor-format {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  max-width: 100%;

}



.form-item--editor-format .form-item__label,

.form-item--editor-format .form-item__prefix,

.form-item--editor-format .form-item__suffix,

.form-item--editor-format .form-element--editor-format {

  min-width: 1px;

}



.form-item--editor-format .form-item__label,

.form-item--editor-format .form-item__prefix,

.form-item--editor-format .form-item__suffix {

  margin-right: var(--space-xs); /* LTR */

}

[dir="rtl"] .form-item--editor-format .form-item__label,

[dir="rtl"] .form-item--editor-format .form-item__prefix,

[dir="rtl"] .form-item--editor-format .form-item__suffix {

  margin-right: 0;

  margin-left: var(--space-xs);

}



.form-item--editor-format .form-item__description,

.form-item--editor-format .form-item__error-message {

  flex: 0 1 100%;

  min-width: 1px;

}



/**

 * Improve form element usability on narrow devices.

 *

core/themes/claro/src/ClaroPreRender.php

+0 −1
Original line number Diff line number Diff line
@@ -160,7 +160,6 @@ public static function textFormat($element) { 
    // Add clearfix for filter wrapper.

    $element['format']['#attributes']['class'][] = 'clearfix';

    // Hide format select label visually.

    $element['format']['format']['#title_display'] = 'invisible';

    $element['format']['format']['#wrapper_attributes']['class'][] = 'form-item--editor-format';

    $element['format']['format']['#attributes']['class'][] = 'form-element--extrasmall';

    $element['format']['format']['#attributes']['class'][] = 'form-element--editor-format';