Commit fdcb412a authored by Andreas Fernandez's avatar Andreas Fernandez Committed by Benjamin Franzke
Browse files

[BUGFIX] Use `form-select` class for <select> fields

With Bootstrap 5, <select> fields make use of the class `form-select`.
This patch aims to replace every occurrence of `form-control` used with
select fields. Since Bootstrap finally brings proper styling for select
boxes, the custom implementation rendering chevrons can be removed.

In the same run, the `input-$size` classes are migrated to its new class
names and some obsolete classes have been removed.

Resolves: #93135
Releases: master
Change-Id: I0044127cc380bddfbaec0b9f730123959f7288bd
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/67247

Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: default avatarMartin Kutschker <mkutschker-typo3@yahoo.com>
Tested-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
Reviewed-by: default avatarMartin Kutschker <mkutschker-typo3@yahoo.com>
Reviewed-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
parent 6ed3053c
......@@ -289,7 +289,7 @@ define(['jquery',
var $fieldEl;
switch (appendix) {
case '_list':
$fieldEl = $(':input.tceforms-multiselect[data-formengine-input-name="' + fieldName + '"]', $formEl);
$fieldEl = $(':input.form-select[data-formengine-input-name="' + fieldName + '"]', $formEl);
break;
case '_avail':
$fieldEl = $(':input[data-relatedfieldname="' + fieldName + '"]', $formEl);
......
......@@ -21,7 +21,7 @@
property="userOrGroup"
options="{userGroups}"
additionalAttributes="{data-global-event='change', data-action-submit: '$form'}"
class="form-control input-sm"
class="form-select form-select-sm"
id="belog-users"
/>
</div>
......@@ -33,7 +33,7 @@
options="{settings.selectableNumberOfLogEntries}"
optionLabelPrefix="LLL:EXT:belog/Resources/Private/Language/locallang.xlf:"
additionalAttributes="{data-global-event='change', data-action-submit: '$form'}"
class="form-control input-sm"
class="form-select form-select-sm"
id="belog-max"
/>
</div>
......@@ -46,7 +46,7 @@
property="workspaceUid"
options="{workspaces}"
additionalAttributes="{data-global-event='change', data-action-submit: '$form'}"
class="form-control input-sm"
class="form-select form-select-sm"
id="belog-workspaces"
/>
</div>
......@@ -60,7 +60,7 @@
property="depth"
options="{pageDepths}"
additionalAttributes="{data-global-event='change', data-action-submit: '$form'}"
class="form-control input-sm"
class="form-select form-select-sm"
id="belog-depth"
/>
</div>
......@@ -73,7 +73,7 @@
options="{settings.selectableTimeFrames}"
optionLabelPrefix="LLL:EXT:belog/Resources/Private/Language/locallang.xlf:"
additionalAttributes="{data-global-event='change', data-action-submit: '$form'}"
class="form-control input-sm"
class="form-select form-select-sm"
id="belog-time"
/>
</div>
......@@ -85,7 +85,7 @@
options="{settings.selectableActions}"
optionLabelPrefix="LLL:EXT:belog/Resources/Private/Language/locallang.xlf:"
additionalAttributes="{data-global-event='change', data-action-submit: '$form'}"
class="form-control input-sm"
class="form-select form-select-sm"
id="belog-action"
/>
</div>
......@@ -116,7 +116,7 @@
name="manualDateStart"
value="{f:if(condition: constraint.manualDateStart, then: \"{f:format.date(format:'{settings.timeFormat} {settings.dateFormat}', date: '{constraint.manualDateStart}')}\")}"
id="manualDateStart"
class="form-control input-sm t3js-datetimepicker t3js-clearable"
class="form-control form-control-sm t3js-datetimepicker t3js-clearable"
data="{date-type: 'datetime'}"
/>
<f:form.hidden
......@@ -138,7 +138,7 @@
name="manualDateStop"
value="{f:format.date(format:'{settings.timeFormat} {settings.dateFormat}', date: '{constraint.manualDateStop}')}"
id="manualDateStop"
class="form-control input-sm t3js-datetimepicker t3js-clearable"
class="form-control form-control-sm t3js-datetimepicker t3js-clearable"
data="{date-type: 'datetime'}"
/>
<f:form.hidden property="manualDateStop"
......
......@@ -4,7 +4,7 @@
<label for="tx_Beuser_username"><f:translate key="userName">Username</f:translate></label>
<f:form.textfield
id="tx_Beuser_username"
class="form-control input-sm"
class="form-control form-control-sm"
property="userName"
/>
</div>
......@@ -12,7 +12,7 @@
<label for="tx_Beuser_usertype"><f:translate key="admin">Admin</f:translate></label>
<f:form.select
id="tx_Beuser_usertype"
class="form-control input-sm"
class="form-select form-select-sm"
property="userType"
options="{0: '{f:translate(key:\"both\")}', 1: '{f:translate(key:\"adminOnly\")}', 2: '{f:translate(key:\"normalUserOnly\")}'}"
/>
......@@ -21,7 +21,7 @@
<label for="tx_Beuser_status"><f:translate key="status">Status</f:translate></label>
<f:form.select
id="tx_Beuser_status"
class="form-control input-sm"
class="form-select form-select-sm"
property="status"
options="{0: '{f:translate(key:\"both\")}', 1: '{f:translate(key:\"activeOnly\")}', 2: '{f:translate(key:\"inactiveOnly\")}'}"
/>
......@@ -30,7 +30,7 @@
<label for="tx_Beuser_logins"><f:translate key="login">Login</f:translate></label>
<f:form.select
id="tx_Beuser_logins"
class="form-control input-sm"
class="form-select form-select-sm"
property="logins"
options="{0: '{f:translate(key:\"both\")}', 1: '{f:translate(key:\"loginBefore\")}', 2: '{f:translate(key:\"neverLoggedIn\")}'}"
/>
......@@ -39,7 +39,7 @@
<label for="tx_beuser_backendUserGroup"><f:translate key="backendUserGroup">User Group</f:translate></label>
<f:form.select
id="tx_beuser_backendUserGroup"
class="form-control input-sm"
class="form-select form-select-sm"
property="backendUserGroup"
options="{backendUserGroups}"
optionLabelField="title"
......
......@@ -43,7 +43,7 @@
min="1"
data-number-of-pages="{paginator.numberOfPages}"
name="paginator-target-page"
class="form-control input-sm paginator-input"
class="form-control form-control-sm paginator-input"
size="5"
value="{paginator.currentPageNumber}"
type="number"
......
......@@ -14,14 +14,14 @@
<div class="form-group">
<label><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:Owner" /></label>
<f:form.select name="data[pages][{id}][perms_userid]" options="{beUserData}" value="{currentBeUser}" class="form-control" />
<f:form.select name="data[pages][{id}][perms_userid]" options="{beUserData}" value="{currentBeUser}" class="form-select" />
</div>
<div class="form-group">
<label><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:Group" /></label>
<f:if condition="{f:count(subject:beGroupData)} > 1">
<f:then>
<f:form.select name="data[pages][{id}][perms_groupid]" options="{beGroupData}" value="{currentBeGroup}" class="form-control" />
<f:form.select name="data[pages][{id}][perms_groupid]" options="{beGroupData}" value="{currentBeGroup}" class="form-select" />
</f:then>
<f:else>
<div class="alert alert-notice"><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:noGroups" /></div>
......@@ -74,7 +74,7 @@
<div class="form-group">
<label for="recursionLevel"><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:Depth" /></label>
<f:form.select id="recursionLevel" name="mirror[pages][{id}]" options="{recursiveSelectOptions}" class="form-control" />
<f:form.select id="recursionLevel" name="mirror[pages][{id}]" options="{recursiveSelectOptions}" class="form-select" />
</div>
<f:form.hidden name="data[pages][{id}][perms_user]" value="{pageInfo.perms_user}" />
......
......@@ -10,7 +10,7 @@
<f:section name="content">
<div class="form-group">
<label for="depth"><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:Depth" />:</label>
<f:form.select class="form-control" id="depth" value="{depth}" options="{depthOptions}"
<f:form.select class="form-select" id="depth" value="{depth}" options="{depthOptions}"
additionalAttributes="{data-global-event: 'change', data-action-navigate: '$data=~s/$value/', data-navigate-value:depthBaseUrl}" />
</div>
......
......@@ -684,7 +684,7 @@ class QueryGenerator
$lineHTML[] = '<div class="form-inline">';
$lineHTML[] = $this->makeComparisonSelector($subscript, $fieldName, $conf);
if ($conf['comparison'] === 68 || $conf['comparison'] === 69 || $conf['comparison'] === 162 || $conf['comparison'] === 163) {
$lineHTML[] = '<select class="form-control" name="' . $fieldPrefix . '[inputValue][]" multiple="multiple">';
$lineHTML[] = '<select class="form-select" name="' . $fieldPrefix . '[inputValue][]" multiple="multiple">';
} elseif ($conf['comparison'] === 66 || $conf['comparison'] === 67) {
if (is_array($conf['inputValue'])) {
$conf['inputValue'] = implode(',', $conf['inputValue']);
......@@ -694,9 +694,9 @@ class QueryGenerator
if (is_array($conf['inputValue'])) {
$conf['inputValue'] = $conf['inputValue'][0];
}
$lineHTML[] = '<select class="form-control t3js-submit-change" name="' . $fieldPrefix . '[inputValue]">';
$lineHTML[] = '<select class="form-select t3js-submit-change" name="' . $fieldPrefix . '[inputValue]">';
} else {
$lineHTML[] = '<select class="form-control t3js-submit-change" name="' . $fieldPrefix . '[inputValue]">';
$lineHTML[] = '<select class="form-select t3js-submit-change" name="' . $fieldPrefix . '[inputValue]">';
}
if ($conf['comparison'] != 66 && $conf['comparison'] != 67) {
$lineHTML[] = $this->makeOptionList($fieldName, $conf, $this->table);
......@@ -1039,7 +1039,7 @@ class QueryGenerator
$out = [];
if ($draw) {
$out[] = '<div class="form-inline">';
$out[] = '<select class="form-control' . ($submit ? ' t3js-submit-change' : '') . '" name="' . htmlspecialchars($name) . '[operator]">';
$out[] = '<select class="form-select' . ($submit ? ' t3js-submit-change' : '') . '" name="' . htmlspecialchars($name) . '[operator]">';
$out[] = ' <option value="AND"' . (!$op || $op === 'AND' ? ' selected' : '') . '>' . htmlspecialchars($this->lang['AND']) . '</option>';
$out[] = ' <option value="OR"' . ($op === 'OR' ? ' selected' : '') . '>' . htmlspecialchars($this->lang['OR']) . '</option>';
$out[] = '</select>';
......@@ -1061,7 +1061,7 @@ class QueryGenerator
public function mkTypeSelect($name, $fieldName, $prepend = 'FIELD_')
{
$out = [];
$out[] = '<select class="form-control t3js-submit-change" name="' . htmlspecialchars($name) . '">';
$out[] = '<select class="form-select t3js-submit-change" name="' . htmlspecialchars($name) . '">';
$out[] = '<option value=""></option>';
foreach ($this->fields as $key => $value) {
if (!$value['exclude'] || $this->getBackendUserAuthentication()->check('non_exclude_fields', $this->table . ':' . $key)) {
......@@ -1132,7 +1132,7 @@ class QueryGenerator
$out[] = ' <input type="text" class="form-control t3js-clearable" value="' . htmlspecialchars($fieldName) . '" name="' . htmlspecialchars($name) . '">';
$out[] = '</div>';
$out[] = '<select class="form-control t3js-addfield" name="_fieldListDummy" size="5" data-field="' . htmlspecialchars($name) . '">';
$out[] = '<select class="form-select t3js-addfield" name="_fieldListDummy" size="5" data-field="' . htmlspecialchars($name) . '">';
foreach ($this->fields as $key => $value) {
if (!$value['exclude'] || $this->getBackendUserAuthentication()->check('non_exclude_fields', $this->table . ':' . $key)) {
$label = $this->fields[$key]['label'];
......@@ -1153,7 +1153,7 @@ class QueryGenerator
public function mkTableSelect($name, $cur)
{
$out = [];
$out[] = '<select class="form-control t3js-submit-change" name="' . $name . '">';
$out[] = '<select class="form-select t3js-submit-change" name="' . $name . '">';
$out[] = '<option value=""></option>';
foreach ($GLOBALS['TCA'] as $tN => $value) {
if ($this->getBackendUserAuthentication()->check('tables_select', $tN)) {
......@@ -1176,7 +1176,7 @@ class QueryGenerator
{
$compOffSet = $comparison >> 5;
$out = [];
$out[] = '<select class="form-control t3js-submit-change" name="' . $name . '">';
$out[] = '<select class="form-select t3js-submit-change" name="' . $name . '">';
for ($i = 32 * $compOffSet + $neg; $i < 32 * ($compOffSet + 1); $i += 2) {
if ($this->lang['comparison'][$i . '_']) {
$out[] = '<option value="' . $i . '"' . ($i >> 1 === $comparison >> 1 ? ' selected' : '') . '>' . htmlspecialchars($this->lang['comparison'][$i . '_']) . '</option>';
......
......@@ -164,7 +164,7 @@ class QueryView
$markup[] = '<div class="load-queries">';
$markup[] = ' <div class="row-cols-auto row">';
$markup[] = ' <div class="col">';
$markup[] = ' <select class="form-control" name="storeControl[STORE]" data-assign-store-control-title>' . implode(LF, $opt) . '</select>';
$markup[] = ' <select class="form-select" name="storeControl[STORE]" data-assign-store-control-title>' . implode(LF, $opt) . '</select>';
$markup[] = ' <input class="form-control" name="storeControl[title]" value="" type="text" max="80">';
$markup[] = ' <input class="btn btn-default" type="submit" name="storeControl[LOAD]" value="Load">';
$markup[] = ' <input class="btn btn-default" type="submit" name="storeControl[SAVE]" value="Save">';
......
......@@ -1061,7 +1061,7 @@ class ExtendedTemplateService extends TemplateService
}
$p_field .= '<option value="' . htmlspecialchars($val) . '"' . $sel . '>' . $this->getLanguageService()->sL($label) . '</option>';
}
$p_field = '<select class="form-control" id="' . $idName . '" name="' . $fN . '" onChange="uFormUrl(' . $aname . ')">' . $p_field . '</select>';
$p_field = '<select class="form-select" id="' . $idName . '" name="' . $fN . '" onChange="uFormUrl(' . $aname . ')">' . $p_field . '</select>';
}
break;
case 'boolean':
......
......@@ -182,7 +182,7 @@ class TypoScriptConstantsViewHelper extends AbstractTagBasedViewHelper
$this->tag->setTagName('select');
$this->addIdAttribute($configuration);
$this->tag->addAttribute('name', $this->getFieldName($configuration));
$this->tag->addAttribute('class', 'form-control');
$this->tag->addAttribute('class', 'form-select');
$optionValueArray = $configuration['generic'];
$output = '';
$languageService = $this->getLanguageService();
......
......@@ -69,7 +69,7 @@
min="1"
data-number-of-pages="{pagination.lastPageNumber}"
name="paginator-target-page"
class="form-control input-sm paginator-input"
class="form-control form-control-sm paginator-input"
value="{paginator.currentPageNumber}"
type="number"
/>
......
......@@ -10,7 +10,7 @@
<label for="number-of-new-folders"><f:translate key="LLL:EXT:filelist/Resources/Private/Language/locallang.xlf:file_newfolder.php.number_of_folders" /></label> {cshFileNewFolder -> f:format.raw()}
<div class="form-control-wrap">
<div class="input-group">
<select class="form-control form-control-adapt" name="number" id="number-of-new-folders">';
<select class="form-select" name="number" id="number-of-new-folders">';
<f:for each="{options}" as="option">
<option value="{option.value}"{option.selected}>{option.value}</option>
</f:for>
......
......@@ -5,7 +5,7 @@
<span data-template-property="label"></span>
</label>
<div id="t3-form-add-finisher" class="t3-form-add-collection-element">
<select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-control"></select>
<select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-select"></select>
</div>
</div>
</div>
......
......@@ -2,7 +2,7 @@
<div class="t3-form-control-group form-group">
<label data-random-id data-random-id-attribute="for" data-random-id-number="1"><span data-template-property="label"></span></label>
<div class="t3-form-controls" data-identifier="inspectorEditorControlsWrapper">
<select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-control" multiple="multiple"></select>
<select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-select" multiple="multiple"></select>
</div>
</div>
</html>
......@@ -2,7 +2,7 @@
<div class="t3-form-control-group form-group">
<label data-random-id data-random-id-attribute="for" data-random-id-number="1"><span data-template-property="label"></span></label>
<div class="t3-form-controls" data-identifier="inspectorEditorControlsWrapper">
<select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-control"></select>
<select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-select"></select>
</div>
</div>
</html>
......@@ -5,7 +5,7 @@
<span data-template-property="label"></span>
</label>
<div id="t3-form-add-validator" class="t3-form-add-collection-element" data-template-property="selectOptionsContainer">
<select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-control"></select>
<select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-select"></select>
</div>
</div>
</div>
......
......@@ -199,15 +199,15 @@ define(['jquery',
}
if (folders.length > 1) {
savePathSelect = $('<select class="new-form-save-path form-control" id="new-form-save-path" data-identifier="newFormSavePath" />');
savePathSelect = $('<select class="new-form-save-path form-select" id="new-form-save-path" data-identifier="newFormSavePath" />');
for (var i = 0, len = folders.length; i < len; ++i) {
var option = new Option(folders[i]['label'], folders[i]['value']);
$(savePathSelect).append(option);
}
}
prototypeNameSelect = $('<select class="new-form-prototype-name form-control" id="new-form-prototype-name" data-identifier="newFormPrototypeName" />');
templateSelect = $('<select class="new-form-template form-control" id="new-form-template" data-identifier="newFormTemplate" />');
prototypeNameSelect = $('<select class="new-form-prototype-name form-select" id="new-form-prototype-name" data-identifier="newFormPrototypeName" />');
templateSelect = $('<select class="new-form-template form-select" id="new-form-template" data-identifier="newFormTemplate" />');
prototypes = _formManagerApp.getPrototypes();
templates = {};
......@@ -574,7 +574,7 @@ define(['jquery',
MultiStepWizard.set('formPersistenceIdentifier', that.data('formPersistenceIdentifier'));
MultiStepWizard.set('savePath', folders[0]['value']);
if (folders.length > 1) {
savePathSelect = $('<select class="duplicate-form-save-path form-control" data-identifier="duplicateFormSavePath" />');
savePathSelect = $('<select class="duplicate-form-save-path form-select" data-identifier="duplicateFormSavePath" />');
for (var i = 0, len = folders.length; i < len; ++i) {
var option = new Option(folders[i]['label'], folders[i]['value']);
$(savePathSelect).append(option);
......
......@@ -19,7 +19,7 @@
<label>
<f:be.buttons.csh table="xMOD_tx_impexp" field="extensionDependencies"><f:translate key="makeadvanc_selectExtensionsThatThe" /></f:be.buttons.csh>
</label>
<f:form.select class="form-control" name="tx_impexp[extension_dep]" multiple="multiple"
<f:form.select class="form-select" name="tx_impexp[extension_dep]" multiple="multiple"
size="{f:if(condition: '{extensions -> f:count()} > 9', then: '10', else: '5')}"
options="{extensions}" value="{inData.extension_dep}"/>
</div>
......
......@@ -28,13 +28,13 @@
<label>
<f:be.buttons.csh table="xMOD_tx_impexp" field="pageTreeMode"><f:translate key="makeconfig_levels" /></f:be.buttons.csh>
</label>
<f:form.select class="form-control" name="tx_impexp[pagetree][levels]" options="{levelSelectOptions}" value="{inData.pagetree.levels}" />
<f:form.select class="form-select" name="tx_impexp[pagetree][levels]" options="{levelSelectOptions}" value="{inData.pagetree.levels}" />
</div>
<div class="form-group">
<label>
<f:be.buttons.csh table="xMOD_tx_impexp" field="pageTreeRecordLimit"><f:translate key="makeconfig_includeTables" /></f:be.buttons.csh>
</label>
<f:form.select class="form-control" name="tx_impexp[pagetree][tables]"
<f:form.select class="form-select" name="tx_impexp[pagetree][tables]"
options="{tableSelectOptions}" multiple="multiple" value="{inData.pagetree.tables}"
size="{f:if(condition: '{tableSelectOptions -> f:count()} > 9', then: '10', else: '5')}" />
</div>
......@@ -78,7 +78,7 @@
<label>
<f:be.buttons.csh table="xMOD_tx_impexp" field="inclRelations"><f:translate key="makeconfig_includeRelationsToTables" /></f:be.buttons.csh>
</label>
<f:form.select class="form-control" name="tx_impexp[external_ref][tables]"
<f:form.select class="form-select" name="tx_impexp[external_ref][tables]"
options="{externalReferenceTableSelectOptions}" multiple="multiple" value="{inData.external_ref.tables}"
size="{f:if(condition: '{externalReferenceTableSelectOptions -> f:count()} > 9', then: '10', else: '5')}" />
</div>
......@@ -86,7 +86,7 @@
<label>
<f:be.buttons.csh table="xMOD_tx_impexp" field="staticRelations"><f:translate key="makeconfig_useStaticRelationsFor" /></f:be.buttons.csh>
</label>
<f:form.select class="form-control" name="tx_impexp[external_static][tables]"
<f:form.select class="form-select" name="tx_impexp[external_static][tables]"
options="{externalStaticTableSelectOptions}" multiple="multiple" value="{inData.external_static.tables}"
size="{f:if(condition: '{externalStaticTableSelectOptions -> f:count()} > 9', then: '10', else: '5')}" />
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment