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
......@@ -4,7 +4,7 @@
</h3>
<div class="form-group">
<label for="preset-select"><f:translate key="makesavefo_selectPreset" /></label>
<f:form.select class="form-control" id="preset-select" name="preset[select]" options="{presetSelectOptions}" />
<f:form.select class="form-select" id="preset-select" name="preset[select]" options="{presetSelectOptions}" />
</div>
<div class="form-group">
<f:form.hidden name="not-set" value="1" id="t3js-submit-field" />
......@@ -59,7 +59,7 @@
<f:be.buttons.csh table="xMOD_tx_impexp" field="fileFormat"><f:translate key="makesavefo_fileFormat" /></f:be.buttons.csh>
</h4>
<div class="form-group">
<f:form.select class="form-control" name="tx_impexp[filetype]" options="{filetypeSelectOptions}" value="{inData.filetype}" />
<f:form.select class="form-select" name="tx_impexp[filetype]" options="{filetypeSelectOptions}" value="{inData.filetype}" />
</div>
<div class="form-group">
<label for="impexp-filename"><f:translate key="makesavefo_filenameSavedInS" arguments="{0: saveFolder}" /></label>
......
......@@ -4,7 +4,7 @@
<label for="impexp-file">
<f:be.buttons.csh table="xMOD_tx_impexp" field="importFile"><f:translate key="importdata_file" /></f:be.buttons.csh>
</label>
<f:form.select name="tx_impexp[file]" class="form-control" id="impexp-file" value="{inData.file}" options="{fileSelectOptions}" />
<f:form.select name="tx_impexp[file]" class="form-select" id="impexp-file" value="{inData.file}" options="{fileSelectOptions}" />
<p class="help-block">{importPath}</p>
<f:if condition="{import.compress}">
<f:else><span class="text-danger"><f:translate key="importdata_noteNoDecompressorAvailable" /></span></f:else>
......
......@@ -43,7 +43,7 @@
<f:then>
<div class="form-group">
<span class="help-block">{item.description -> f:format.raw()}</span>
<select data-path="{sectionName}/{item.key}" class="t3-install-form-input-text form-control t3js-localConfiguration-pathValue">
<select data-path="{sectionName}/{item.key}" class="t3-install-form-input-text form-select t3js-localConfiguration-pathValue">
<f:for each="{item.allowedValues}" key="optionKey" as="optionLabel">
<option value="{optionKey}" {f:if(condition: '{item.value} == {optionKey}', then: 'selected="selected"')}>{optionLabel} ({optionKey})</option>
</f:for>
......
......@@ -16,7 +16,7 @@
<div class="row justify-content-center">
<div class="col-md-12 mb-3">
<div class="form-floating">
<select id="t3js-connect-database-driver" class="form-control" name="install[values][availableSet]" placeholder="sqlite">
<select id="t3js-connect-database-driver" class="form-select" name="install[values][availableSet]" placeholder="sqlite">
<f:if condition="{hasMysqliManualConfiguration}">
<option
value="mysqliManualConfiguration"
......
......@@ -32,7 +32,7 @@
<select
id="t3-install-step-database-existing"
name="install[values][existing]"
class="form-control"
class="form-select"
onfocus="document.getElementById('t3-install-form-db-select-type-existing').checked=true;"
>
<option value="">-- Choose --</option>
......
......@@ -146,7 +146,7 @@ class ValidatorTaskAdditionalFieldProvider extends AbstractAdditionalFieldProvid
'999' => $lang->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.depth_infi')
];
/** @var array<string, string> $fieldValueArray */
$fieldCode = '<select class="form-control" name="tx_scheduler[linkvalidator][depth]" id="' . $fieldId . '">';
$fieldCode = '<select class="form-select" name="tx_scheduler[linkvalidator][depth]" id="' . $fieldId . '">';
foreach ($fieldValueArray as $depth => $label) {
$fieldCode .= "\t" . '<option value="' . htmlspecialchars((string)$depth) . '"'
. (($depth === $taskInfo['depth']) ? ' selected="selected"' : '') . '>'
......
......@@ -24,7 +24,7 @@
<div class="linkvalidator-function-menu">
<h4><f:render section="levelTitle" /></h4>
<div>
<select name="{prefix}_search_levels" class="form-control">
<select name="{prefix}_search_levels" class="form-select">
<option value="0"{f:if(condition: '{selectedLevel} == 0', then: 'selected')}><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.depth_0" /></option>
<option value="1"{f:if(condition: '{selectedLevel} == 1', then: 'selected')}><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.depth_1" /></option>
<option value="2"{f:if(condition: '{selectedLevel} == 2', then: 'selected')}><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.depth_2" /></option>
......
......@@ -517,7 +517,7 @@ class QueryGenerator
$markup[] = '<div class="load-queries">';
$markup[] = ' <div class="form-group form-inline">';
$markup[] = ' <div class="form-group">';
$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">';
......@@ -1809,7 +1809,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']);
......@@ -1819,9 +1819,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);
......@@ -2164,7 +2164,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>';
......@@ -2186,7 +2186,7 @@ class QueryGenerator
protected 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)) {
......@@ -2260,7 +2260,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'];
......@@ -2284,7 +2284,7 @@ class QueryGenerator
protected 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)) {
......@@ -2311,7 +2311,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>';
......
......@@ -464,7 +464,7 @@ abstract class AbstractLinkBrowserController
value="' . htmlspecialchars($this->linkAttributeValues['target']) . '" />
</div>
<div class="col-sm-5">
<select name="ltarget_type" class="t3js-targetPreselect form-control">
<select name="ltarget_type" class="t3js-targetPreselect form-select">
<option value=""></option>
<option value="_top">' . htmlspecialchars($lang->getLL('top')) . '</option>
<option value="_blank">' . htmlspecialchars($lang->getLL('newWindow')) . '</option>
......
......@@ -459,7 +459,7 @@ class RecordListController
return '<div class="form-inline form-inline-spaced">'
. '<div class="form-group">'
. '<select class="form-control input-sm" name="createNewLanguage" data-global-event="change" data-action-navigate="$value">'
. '<select class="form-select" name="createNewLanguage" data-global-event="change" data-action-navigate="$value">'
. $output
. '</select></div></div>';
}
......
......@@ -1599,7 +1599,7 @@ class DatabaseRecordList
';
}
$pageNumberInput = '
<input type="number" min="1" max="' . $totalPages . '" value="' . $currentPage . '" size="3" class="form-control input-sm paginator-input" id="jumpPage-' . $renderPart . '" name="jumpPage-'
<input type="number" min="1" max="' . $totalPages . '" value="' . $currentPage . '" size="3" class="form-control form-control-sm paginator-input" id="jumpPage-' . $renderPart . '" name="jumpPage-'
. $renderPart . '" onkeyup="if (event.keyCode == 13) { document.dblistForm.action=' . htmlspecialchars(GeneralUtility::quoteJSvalue($listURL . '&pointer='))
. '+calculatePointer(this.value); document.dblistForm.submit(); } return true;" />
';
......
......@@ -12,7 +12,7 @@
</div>
<div class="col-12 col-sm-3">
<label for="search_levels"><f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.label.search_levels" /></label>
<select class="form-control" name="search_levels" title="{f:translate(id: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.title.search_levels')}" id="search_levels">
<select class="form-select" name="search_levels" title="{f:translate(id: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.title.search_levels')}" id="search_levels">
<f:for each="{searchLevelsFromTSconfig}" as="searchLevelFromTsConfig" key="level">
<option {f:if(condition: '{level} == {selectedSearchLevel}', then: ' selected="selected"')} value="{level}">
<f:translate id="LLL:{searchLevelFromTsConfig}">{searchLevelFromTsConfig}</f:translate>
......
......@@ -74,7 +74,7 @@ class CleanerFieldProvider extends AbstractAdditionalFieldProvider
if (!is_array($selectedTables)) {
$selectedTables = [];
}
$tcaSelectHtml = '<select name="tx_scheduler[RecyclerCleanerTCA][]" multiple="multiple" class="form-control" size="10">';
$tcaSelectHtml = '<select name="tx_scheduler[RecyclerCleanerTCA][]" multiple="multiple" class="form-select" size="10">';
$options = [];
foreach ($GLOBALS['TCA'] as $table => $tableConf) {
......
......@@ -12,7 +12,7 @@
</div>
</div>
<div class="form-group">
<select name="depth" class="form-control">
<select name="depth" class="form-select">
<option value="0"><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.depth_0" /></option>
<option value="1"><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.depth_1" /></option>
<option value="2"><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.depth_2" /></option>
......@@ -22,7 +22,7 @@
</select>
</div>
<div class="form-group">
<select name="pages" class="form-control"></select>
<select name="pages" class="form-select"></select>
</div>
</form>
<f:render section="buttons" arguments="{allowDelete: allowDelete}"/>
......
......@@ -46,7 +46,7 @@
additionalAttributes="{min: 1, max: pagination.numberOfPages}"
data="{number-of-pages: pagination.numberOfPages, url: gotToPageUrl}"
name="paginator-target-page"
class="form-control input-sm paginator-input"
class="form-control form-control-sm paginator-input"
value="{pagination.current}"
type="number" />
</form>
......
......@@ -174,7 +174,7 @@
<input type="hidden" name="orderDirection" value="{demand.orderDirection}">
<div class="form-group">
<label for="demand-source-host"><f:translate key="LLL:EXT:redirects/Resources/Private/Language/locallang_module_redirect.xlf:source_host"/></label>
<select id="demand-source-host" class="form-control input-sm" name="demand[source_host]" data-on-change="submit">
<select id="demand-source-host" class="form-select" name="demand[source_host]" data-on-change="submit">
<option value=""><f:translate key="LLL:EXT:redirects/Resources/Private/Language/locallang_module_redirect.xlf:filter.source_host.showAll"/></option>
<f:for each="{hosts}" as="host">
<f:form.select.option value="{host.name}" selected="{host.name} === {demand.firstSourceHost}">{host.name}</f:form.select.option>
......@@ -183,15 +183,15 @@
</div>
<div class="form-group">
<label for="demand-source-path"><f:translate key="LLL:EXT:redirects/Resources/Private/Language/locallang_module_redirect.xlf:source_path"/></label>
<input type="text" id="demand-source-path" class="form-control input-sm" name="demand[source_path]" value="{demand.sourcePath}"/>
<input type="text" id="demand-source-path" class="form-control form-control-sm" name="demand[source_path]" value="{demand.sourcePath}"/>
</div>
<div class="form-group">
<label for="demand-target"><f:translate key="LLL:EXT:redirects/Resources/Private/Language/locallang_module_redirect.xlf:filter.destination"/></label>
<input type="text" id="demand-target" class="form-control input-sm" name="demand[target]" value="{demand.target}"/>
<input type="text" id="demand-target" class="form-control form-control-sm" name="demand[target]" value="{demand.target}"/>
</div>
<div class="form-group">
<label for="demand-target-status-code"><f:translate key="LLL:EXT:redirects/Resources/Private/Language/locallang_module_redirect.xlf:filter.targetStatusCode"/></label>
<select id="demand-target-status-code" class="form-control input-sm" name="demand[target_statuscode]" data-on-change="submit">
<select id="demand-target-status-code" class="form-select" name="demand[target_statuscode]" data-on-change="submit">
<option value=""><f:translate key="LLL:EXT:redirects/Resources/Private/Language/locallang_module_redirect.xlf:filter.source_host.showAll"/></option>
<f:for each="{statusCodes}" as="statusCode">
<f:form.select.option value="{statusCode.code}" selected="{statusCode.code} === {demand.firstStatusCode}">{statusCode.code}</f:form.select.option>
......
......@@ -398,7 +398,7 @@ class BrowseLinksController extends AbstractLinkBrowserController
if (!$targetSelectorConfig['disabled']) {
$targetSelector = '
<select name="ltarget_type" class="t3js-targetPreselect form-control">
<select name="ltarget_type" class="t3js-targetPreselect form-select">
<option value=""></option>
<option value="_top">' . htmlspecialchars($lang->getLL('top')) . '</option>
<option value="_blank">' . htmlspecialchars($lang->getLL('newWindow')) . '</option>
......@@ -474,7 +474,7 @@ class BrowseLinksController extends AbstractLinkBrowserController
' . htmlspecialchars($this->getLanguageService()->getLL('class')) . '
</label>
<div class="col-sm-9">
<select name="lclass" class="t3js-class-selector form-control">
<select name="lclass" class="t3js-class-selector form-select">
' . $this->classesAnchorJSOptions[$this->displayedLinkHandlerId] . '
</select>
</div>
......
......@@ -57,7 +57,7 @@ class CachingFrameworkGarbageCollectionAdditionalFieldProvider extends AbstractA
$fieldName = 'tx_scheduler[scheduler_cachingFrameworkGarbageCollection_selectedBackends][]';
$fieldId = 'task_cachingFrameworkGarbageCollection_selectedBackends';
$fieldOptions = $this->getCacheBackendOptions($taskInfo['scheduler_cachingFrameworkGarbageCollection_selectedBackends']);
$fieldHtml = '<select class="form-control" name="' . $fieldName . '" id="' . $fieldId . '" class="from-control" size="10" multiple="multiple">' . $fieldOptions . '</select>';
$fieldHtml = '<select class="form-select" name="' . $fieldName . '" id="' . $fieldId . '" class="from-control" size="10" multiple="multiple">' . $fieldOptions . '</select>';
$additionalFields = [];
$additionalFields[$fieldId] = [
'code' => $fieldHtml,
......
......@@ -358,7 +358,7 @@ class ExecuteSchedulableCommandAdditionalFieldProvider implements AdditionalFiel
$selectTag = new TagBuilder();
$selectTag->setTagName('select');
$selectTag->forceClosingTag(true);
$selectTag->addAttribute('class', 'form-control');
$selectTag->addAttribute('class', 'form-select');
$selectTag->addAttribute('name', 'tx_scheduler[task_executeschedulablecommand][command]');
$optionsHtml = '';
......
......@@ -71,7 +71,7 @@ class FileStorageExtractionAdditionalFieldProvider implements AdditionalFieldPro
$fieldName = 'tx_scheduler[scheduler_fileStorageIndexing_storage]';
$fieldId = 'scheduler_fileStorageIndexing_storage';
$fieldHtml = '<select class="form-control" name="' . $fieldName . '" id="' . $fieldId . '">' . implode("\n", $options) . '</select>';
$fieldHtml = '<select class="form-select" name="' . $fieldName . '" id="' . $fieldId . '">' . implode("\n", $options) . '</select>';
$fieldConfiguration = [
'code' => $fieldHtml,
......
Supports Markdown
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