From 420d779d64e29dcae6f570083009748f0e3b7c22 Mon Sep 17 00:00:00 2001
From: Benjamin Kott <benjamin.kott@outlook.com>
Date: Wed, 21 Feb 2024 09:35:03 +0100
Subject: [PATCH] [TASK] Migrate input-group-addon to input-group-text
Resolves: #103167
Releases: main
Change-Id: Ic890b2b5ea50bd4410709912316e3da7ac0cad38
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/83054
Tested-by: Andreas Kienast <a.fernandez@scripting-base.de>
Tested-by: Benjamin Franzke <ben@bnf.dev>
Reviewed-by: Andreas Kienast <a.fernandez@scripting-base.de>
Reviewed-by: Benjamin Franzke <ben@bnf.dev>
Tested-by: core-ci <typo3@b13.com>
---
Build/Sources/Sass/_legacy.scss | 9 ++-------
Build/Sources/Sass/typo3/_main_form.scss | 2 +-
.../backend/form-engine/element/select-tree-toolbar.ts | 2 +-
Build/Sources/TypeScript/backend/localization.ts | 2 +-
.../TypeScript/install/renderable/offset-group.ts | 4 ++--
.../backend/Classes/Form/Element/GroupElement.php | 2 +-
.../backend/Classes/Form/Element/InputSlugElement.php | 4 ++--
.../backend/Classes/Form/Element/LinkElement.php | 2 +-
.../Classes/Form/Element/SelectSingleElement.php | 2 +-
.../Resources/Private/Templates/ColumnSelector.html | 2 +-
.../Resources/Private/Templates/Page/NewPages.html | 2 +-
typo3/sysext/backend/Resources/Public/Css/backend.css | 10 +++++-----
.../form-engine/element/select-tree-toolbar.js | 2 +-
.../Resources/Public/JavaScript/localization.js | 2 +-
.../Resources/Private/Templates/File/ReplaceFile.html | 2 +-
.../Settings/ExtensionConfigurationGetContent.html | 2 +-
.../Settings/LocalConfigurationGetContent.html | 2 +-
.../Private/Templates/Settings/SystemMaintainer.html | 2 +-
.../Templates/Upgrade/UpgradeDocsGetContent.html | 4 ++--
.../Public/JavaScript/renderable/offset-group.js | 4 ++--
.../Classes/Controller/DatabaseIntegrityController.php | 2 +-
.../Resources/Private/Templates/Backend/Icons.html | 2 +-
.../Private/Partials/ConstantEditorFields.html | 4 ++--
.../Resources/Private/Templates/ActiveEdit.html | 6 +++---
.../Resources/Private/Partials/WorkingTable.html | 2 +-
25 files changed, 37 insertions(+), 42 deletions(-)
diff --git a/Build/Sources/Sass/_legacy.scss b/Build/Sources/Sass/_legacy.scss
index 546c0197122c..6f4882768ecf 100644
--- a/Build/Sources/Sass/_legacy.scss
+++ b/Build/Sources/Sass/_legacy.scss
@@ -62,14 +62,14 @@
}
}
// Set validation states also for addons
- .input-group-addon {
+ .input-group-text {
color: $text-color;
background-color: $background-color;
border-color: $border-color;
}
}
-//// Variables
+// Variables
$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
@@ -89,11 +89,6 @@ $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !
border-left: .25rem solid transparent;
}
-// todo replace '.input-group-addon' with '.input-group-text'
-.input-group-addon {
- @extend .input-group-text !optional;
-}
-
// nav fallback
// todo add ".nav-item" and ".nav-link" classes to markup
.nav.nav-tabs {
diff --git a/Build/Sources/Sass/typo3/_main_form.scss b/Build/Sources/Sass/typo3/_main_form.scss
index 3b65a0120fa9..609482bbd806 100644
--- a/Build/Sources/Sass/typo3/_main_form.scss
+++ b/Build/Sources/Sass/typo3/_main_form.scss
@@ -37,7 +37,7 @@
}
}
-.input-group-addon {
+.input-group-text {
min-width: 2.5rem;
}
diff --git a/Build/Sources/TypeScript/backend/form-engine/element/select-tree-toolbar.ts b/Build/Sources/TypeScript/backend/form-engine/element/select-tree-toolbar.ts
index 2cb260e7a355..3490a3e7874c 100644
--- a/Build/Sources/TypeScript/backend/form-engine/element/select-tree-toolbar.ts
+++ b/Build/Sources/TypeScript/backend/form-engine/element/select-tree-toolbar.ts
@@ -43,7 +43,7 @@ export class SelectTreeToolbar extends LitElement {
return html`
<div class="tree-toolbar btn-toolbar">
<div class="input-group">
- <span class="input-group-addon input-group-icon filter">
+ <span class="input-group-text input-group-icon filter">
<typo3-backend-icon identifier="actions-filter" size="small"></typo3-backend-icon>
</span>
<input type="text" class="form-control ${this.settings.searchInput}" placeholder="${lll('tcatree.findItem')}" @input="${(evt: InputEvent) => this.filter(evt)}">
diff --git a/Build/Sources/TypeScript/backend/localization.ts b/Build/Sources/TypeScript/backend/localization.ts
index be16c946e6be..4333cc736aa9 100644
--- a/Build/Sources/TypeScript/backend/localization.ts
+++ b/Build/Sources/TypeScript/backend/localization.ts
@@ -226,7 +226,7 @@ class Localization {
$row.append(
$('<div />', { 'class': 'col-sm-6' }).append(
$('<div />', { 'class': 'input-group' }).append(
- $('<span />', { 'class': 'input-group-addon' }).append(
+ $('<span />', { 'class': 'input-group-text' }).append(
$('<input />', {
type: 'checkbox',
'class': 't3js-localization-toggle-record',
diff --git a/Build/Sources/TypeScript/install/renderable/offset-group.ts b/Build/Sources/TypeScript/install/renderable/offset-group.ts
index ca89a6160386..27e12c1fd628 100644
--- a/Build/Sources/TypeScript/install/renderable/offset-group.ts
+++ b/Build/Sources/TypeScript/install/renderable/offset-group.ts
@@ -16,13 +16,13 @@ class OffsetGroupElement extends LitElement {
<div class="form-multigroup-wrap">
<div class="form-multigroup-item">
<div class="input-group">
- <div class="input-group-addon">x</div>
+ <div class="input-group-text">x</div>
<input id="${this.offsetId}_offset_x" class="form-control t3js-emconf-offsetfield" data-target="#${this.offsetId}" value="${this.values[0]?.trim()}"/>
</div>
</div>
<div class="form-multigroup-item">
<div class="input-group">
- <div class="input-group-addon">y</div>
+ <div class="input-group-text">y</div>
<input id="${this.offsetId}_offset_y" class="form-control t3js-emconf-offsetfield" data-target="#${this.offsetId}" value="${this.values[1]?.trim()}"/>
</div>
</div>
diff --git a/typo3/sysext/backend/Classes/Form/Element/GroupElement.php b/typo3/sysext/backend/Classes/Form/Element/GroupElement.php
index 6c4d806de9af..1ad1df430285 100644
--- a/typo3/sysext/backend/Classes/Form/Element/GroupElement.php
+++ b/typo3/sysext/backend/Classes/Form/Element/GroupElement.php
@@ -256,7 +256,7 @@ class GroupElement extends AbstractFormElement
$html[] = '<div class="form-wizards-items-top">';
$html[] = '<div class="autocomplete t3-form-suggest-container">';
$html[] = '<div class="input-group">';
- $html[] = '<span class="input-group-addon">';
+ $html[] = '<span class="input-group-text">';
$html[] = $this->iconFactory->getIcon('actions-search', IconSize::SMALL)->render();
$html[] = '</span>';
$html[] = '<input type="search" class="t3-form-suggest form-control"';
diff --git a/typo3/sysext/backend/Classes/Form/Element/InputSlugElement.php b/typo3/sysext/backend/Classes/Form/Element/InputSlugElement.php
index acaa29cae8f3..91ebe0b43261 100644
--- a/typo3/sysext/backend/Classes/Form/Element/InputSlugElement.php
+++ b/typo3/sysext/backend/Classes/Form/Element/InputSlugElement.php
@@ -125,7 +125,7 @@ class InputSlugElement extends AbstractFormElement
$html[] = '<div class="form-wizards-wrap">';
$html[] = '<div class="form-wizards-element">';
$html[] = '<div class="input-group">';
- $html[] = ($baseUrl ? '<span class="input-group-addon">' . htmlspecialchars($baseUrl) . '</span>' : '');
+ $html[] = ($baseUrl ? '<span class="input-group-text">' . htmlspecialchars($baseUrl) . '</span>' : '');
$html[] = '<input ' . GeneralUtility::implodeAttributes($disabledFieldAttributes, true) . ' disabled>';
$html[] = '</div>';
$html[] = '</div>';
@@ -157,7 +157,7 @@ class InputSlugElement extends AbstractFormElement
$mainFieldHtml[] = '<div class="form-wizards-wrap">';
$mainFieldHtml[] = '<div class="form-wizards-element">';
$mainFieldHtml[] = '<div class="input-group">';
- $mainFieldHtml[] = ($baseUrl ? '<span class="input-group-addon">' . htmlspecialchars($baseUrl) . '</span>' : '');
+ $mainFieldHtml[] = ($baseUrl ? '<span class="input-group-text">' . htmlspecialchars($baseUrl) . '</span>' : '');
// We deal with 3 fields here: a readonly field for current / default values, an input
// field to manipulate the value, and the final hidden field used to send the value
$mainFieldHtml[] = '<input';
diff --git a/typo3/sysext/backend/Classes/Form/Element/LinkElement.php b/typo3/sysext/backend/Classes/Form/Element/LinkElement.php
index ae29d3a6aa1d..555ed76b6f4e 100644
--- a/typo3/sysext/backend/Classes/Form/Element/LinkElement.php
+++ b/typo3/sysext/backend/Classes/Form/Element/LinkElement.php
@@ -216,7 +216,7 @@ class LinkElement extends AbstractFormElement
$expansionHtml[] = '<div class="form-wizards-wrap">';
$expansionHtml[] = '<div class="form-wizards-element">';
$expansionHtml[] = '<div class="input-group t3js-form-field-link">';
- $expansionHtml[] = '<span class="t3js-form-field-link-icon input-group-addon">' . ($linkExplanation['icon'] ?? '') . '</span>';
+ $expansionHtml[] = '<span class="t3js-form-field-link-icon input-group-text">' . ($linkExplanation['icon'] ?? '') . '</span>';
$expansionHtml[] = '<input class="form-control t3js-form-field-link-explanation" title="' . $explanation . '" value="' . $explanation . '"' . ' readonly' . ($hasExplanation ? '' : ' hidden') . '>';
$expansionHtml[] = '<input type="text" ' . GeneralUtility::implodeAttributes($attributes, true) . ' />';
$expansionHtml[] = '<button class="btn btn-default t3js-form-field-link-explanation-toggle" type="button" title="' . htmlspecialchars($toggleButtonTitle) . '"' . ($hasExplanation ? '' : ' disabled') . '>';
diff --git a/typo3/sysext/backend/Classes/Form/Element/SelectSingleElement.php b/typo3/sysext/backend/Classes/Form/Element/SelectSingleElement.php
index cb6bf68335d7..6b9242cae776 100644
--- a/typo3/sysext/backend/Classes/Form/Element/SelectSingleElement.php
+++ b/typo3/sysext/backend/Classes/Form/Element/SelectSingleElement.php
@@ -230,7 +230,7 @@ class SelectSingleElement extends AbstractFormElement
$html[] = '<div class="form-wizards-element">';
if ($hasIcons) {
$html[] = '<div class="input-group">';
- $html[] = '<span class="input-group-addon input-group-icon">';
+ $html[] = '<span class="input-group-text input-group-icon">';
$html[] = $selectedIcon;
$html[] = '</span>';
}
diff --git a/typo3/sysext/backend/Resources/Private/Templates/ColumnSelector.html b/typo3/sysext/backend/Resources/Private/Templates/ColumnSelector.html
index 811631162b2d..eee0c66ba33a 100644
--- a/typo3/sysext/backend/Resources/Private/Templates/ColumnSelector.html
+++ b/typo3/sysext/backend/Resources/Private/Templates/ColumnSelector.html
@@ -10,7 +10,7 @@
<div class="row row-cols-auto justify-content-between">
<div class="col flex-grow-1">
<div class="input-group">
- <span class="input-group-addon" id="columns-filter-label"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_column_selector.xlf:columnsFilter" /></span>
+ <span class="input-group-text" id="columns-filter-label"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_column_selector.xlf:columnsFilter" /></span>
<input type="search" name="columns-filter" class="form-control" value="" aria-labelledby="columns-filter-label" placeholder="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.enterSearchString')}">
</div>
</div>
diff --git a/typo3/sysext/backend/Resources/Private/Templates/Page/NewPages.html b/typo3/sysext/backend/Resources/Private/Templates/Page/NewPages.html
index 9edac1d7dfd7..99eb90f5f89e 100644
--- a/typo3/sysext/backend/Resources/Private/Templates/Page/NewPages.html
+++ b/typo3/sysext/backend/Resources/Private/Templates/Page/NewPages.html
@@ -218,7 +218,7 @@
<div class="form-wizards-wrap">
<div class="form-wizards-element">
<div class="input-group">
- <span class="input-group-addon input-group-icon" id="page_new_icon_{line.index}">
+ <span class="input-group-text input-group-icon" id="page_new_icon_{line.index}">
<core:iconForRecord table="pages" row="{id: '0'}" />
</span>
<select id="page_new_select_{line.index}" class="form-select t3js-newmultiplepages-select-doktype" name="pages[NEW{line.index}][doktype]" data-target="#page_new_icon_{line.index}">
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index 279a7b1dbd78..22a9cd4fcafc 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -590,9 +590,9 @@ textarea.form-control-lg{min-height:calc(1.5em + 1rem + calc(var(--bs-border-wid
.input-group>.form-control:focus,.input-group>.form-floating:focus-within,.input-group>.form-select:focus{z-index:5}
.input-group .btn{position:relative;z-index:2}
.input-group .btn:focus{z-index:5}
-.input-group-addon,.input-group-text{display:flex;align-items:center;padding:.375rem .75rem;font-size:.75rem;font-weight:400;line-height:1.5;color:#333;text-align:center;white-space:nowrap;background-color:var(--bs-tertiary-bg);border:var(--bs-border-width) solid #bbb;border-radius:var(--bs-border-radius)}
-.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-text{padding:.5rem 1rem;font-size:.9375rem;border-radius:var(--bs-border-radius-lg)}
-.input-group-sm>.btn,.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-text{padding:.25rem .5rem;font-size:.65625rem;border-radius:var(--bs-border-radius-sm)}
+.input-group-text{display:flex;align-items:center;padding:.375rem .75rem;font-size:.75rem;font-weight:400;line-height:1.5;color:#333;text-align:center;white-space:nowrap;background-color:var(--bs-tertiary-bg);border:var(--bs-border-width) solid #bbb;border-radius:var(--bs-border-radius)}
+.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{padding:.5rem 1rem;font-size:.9375rem;border-radius:var(--bs-border-radius-lg)}
+.input-group-sm>.btn,.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text{padding:.25rem .5rem;font-size:.65625rem;border-radius:var(--bs-border-radius-sm)}
.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:3rem}
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select,.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-start-end-radius:0;border-end-end-radius:0}
.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select,.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-start-end-radius:0;border-end-end-radius:0}
@@ -4179,11 +4179,11 @@ div.diff-g,div.diff-r{padding:3px}
::-ms-clear{display:none}
.has-change .form-control{border-color:#6daae0;box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}
.has-change .form-control:focus{border-color:#4392d7;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c1dbf2}
-.has-change .input-group-addon{color:#6daae0;background-color:#e9f2fa;border-color:#6daae0}
+.has-change .input-group-text{color:#6daae0;background-color:#e9f2fa;border-color:#6daae0}
.has-change .thumbnail-status{border:1px solid #6daae0}
.input-group-icon{vertical-align:middle}
.input-group-icon img{max-height:18px}
-.input-group-addon{min-width:2.5rem}
+.input-group-text{min-width:2.5rem}
label .icon img{pointer-events:none}
.form-control{min-width:120px}
.form-control::-moz-placeholder{color:var(--typo3-input-color-placeholder)}
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/form-engine/element/select-tree-toolbar.js b/typo3/sysext/backend/Resources/Public/JavaScript/form-engine/element/select-tree-toolbar.js
index 6d2ce0212483..a495b913aff0 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/form-engine/element/select-tree-toolbar.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/form-engine/element/select-tree-toolbar.js
@@ -13,7 +13,7 @@
var __decorate=function(e,t,l,n){var i,c=arguments.length,o=c<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,l):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,l,n);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(o=(c<3?i(o):c>3?i(t,l,o):i(t,l))||o);return c>3&&o&&Object.defineProperty(t,l,o),o};import{html,LitElement}from"lit";import{customElement}from"lit/decorators.js";import{lll}from"@typo3/core/lit-helper.js";let SelectTreeToolbar=class extends LitElement{constructor(){super(...arguments),this.settings={collapseAllBtn:"collapse-all-btn",expandAllBtn:"expand-all-btn",searchInput:"search-input",toggleHideUnchecked:"hide-unchecked-btn"},this.hideUncheckedState=!1}createRenderRoot(){return this}render(){return html`
<div class="tree-toolbar btn-toolbar">
<div class="input-group">
- <span class="input-group-addon input-group-icon filter">
+ <span class="input-group-text input-group-icon filter">
<typo3-backend-icon identifier="actions-filter" size="small"></typo3-backend-icon>
</span>
<input type="text" class="form-control ${this.settings.searchInput}" placeholder="${lll("tcatree.findItem")}" @input="${e=>this.filter(e)}">
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/localization.js b/typo3/sysext/backend/Resources/Public/JavaScript/localization.js
index 8a29577a931e..5a2e9fb79a56 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/localization.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/localization.js
@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
-import DocumentService from"@typo3/core/document-service.js";import $ from"jquery";import{SeverityEnum}from"@typo3/backend/enum/severity.js";import AjaxRequest from"@typo3/core/ajax/ajax-request.js";import Icons from"@typo3/backend/icons.js";import Wizard from"@typo3/backend/wizard.js";import"@typo3/backend/element/icon-element.js";class Localization{constructor(){this.triggerButton=".t3js-localize",this.localizationMode=null,this.sourceLanguage=null,this.records=[],DocumentService.ready().then((()=>{this.initialize()}))}initialize(){Icons.getIcon("actions-localize",Icons.sizes.large).then((e=>{Icons.getIcon("actions-edit-copy",Icons.sizes.large).then((a=>{$(this.triggerButton).removeClass("disabled"),$(document).on("click",this.triggerButton,(t=>{t.preventDefault();const o=$(t.currentTarget),i=[],l=[];let s="";o.data("allowTranslate")&&(i.push('<div class="row"><div class="col-sm-3"><label class="btn btn-default d-block t3js-localization-option" data-helptext=".t3js-helptext-translate">'+e+'<input type="radio" name="mode" id="mode_translate" value="localize" style="display: none"><br>'+TYPO3.lang["localize.wizard.button.translate"]+'</label></div><div class="col-sm-9"><p class="t3js-helptext t3js-helptext-translate text-body-secondary">'+TYPO3.lang["localize.educate.translate"]+"</p></div></div>"),l.push("localize")),o.data("allowCopy")&&(i.push('<div class="row"><div class="col-sm-3"><label class="btn btn-default d-block t3js-localization-option" data-helptext=".t3js-helptext-copy">'+a+'<input type="radio" name="mode" id="mode_copy" value="copyFromLanguage" style="display: none"><br>'+TYPO3.lang["localize.wizard.button.copy"]+'</label></div><div class="col-sm-9"><p class="t3js-helptext t3js-helptext-copy text-body-secondary">'+TYPO3.lang["localize.educate.copy"]+"</p></div></div>"),l.push("copyFromLanguage")),0===o.data("allowTranslate")&&0===o.data("allowCopy")&&i.push('<div class="row"><div class="col-sm-12"><div class="alert alert-warning"><div class="media"><div class="media-left"><span class="icon-emphasized"><typo3-backend-icon identifier="actions-exclamation" size="small"></typo3-backend-icon></span></div><div class="media-body"><p class="alert-message">'+TYPO3.lang["localize.educate.noTranslate"]+"</p></div></div></div></div></div>"),s+='<div data-bs-toggle="buttons">'+i.join("")+"</div>",Wizard.addSlide("localize-choose-action",TYPO3.lang["localize.wizard.header_page"].replace("{0}",o.data("page")).replace("{1}",o.data("languageName")),s,SeverityEnum.notice,(()=>{1===l.length&&(this.localizationMode=l[0],Wizard.unlockNextStep().get(0).click())})),Wizard.addSlide("localize-choose-language",TYPO3.lang["localize.view.chooseLanguage"],"",SeverityEnum.notice,(e=>{Icons.getIcon("spinner-circle",Icons.sizes.large).then((a=>{e.html('<div class="text-center">'+a+"</div>"),this.loadAvailableLanguages(parseInt(o.data("pageId"),10),parseInt(o.data("languageId"),10)).then((async a=>{const t=await a.resolve();if(1===t.length)return this.sourceLanguage=t[0].uid,void Wizard.unlockNextStep().get(0).click();Wizard.getComponent().on("click",".t3js-language-option",(e=>{const a=$(e.currentTarget).prev();this.sourceLanguage=a.val(),Wizard.unlockNextStep()}));const o=$("<div />",{class:"row"});for(const e of t){const a="language"+e.uid,t=$("<input />",{type:"radio",name:"language",id:a,value:e.uid,style:"display: none;",class:"btn-check"}),i=$("<label />",{class:"btn btn-default d-block t3js-language-option option",for:a}).text(" "+e.title).prepend(e.flagIcon);o.append($("<div />",{class:"col-sm-4"}).append(t).append(i))}e.empty().append(o)}))}))})),Wizard.addSlide("localize-summary",TYPO3.lang["localize.view.summary"],"",SeverityEnum.notice,(e=>{Icons.getIcon("spinner-circle",Icons.sizes.large).then((a=>{e.html('<div class="text-center">'+a+"</div>")})),this.getSummary(parseInt(o.data("pageId"),10),parseInt(o.data("languageId"),10)).then((async a=>{const t=await a.resolve();e.empty(),this.records=[];const o=t.columns.columns;t.columns.columnList.forEach((a=>{if(void 0===t.records[a])return;const i=o[a],l=$("<div />",{class:"row"});t.records[a].forEach((e=>{const a=" ("+e.uid+") "+e.title;this.records.push(e.uid),l.append($("<div />",{class:"col-sm-6"}).append($("<div />",{class:"input-group"}).append($("<span />",{class:"input-group-addon"}).append($("<input />",{type:"checkbox",class:"t3js-localization-toggle-record",id:"record-uid-"+e.uid,checked:"checked","data-uid":e.uid,"aria-label":a})),$("<label />",{class:"form-control",for:"record-uid-"+e.uid}).text(a).prepend(e.icon))))})),e.append($("<fieldset />",{class:"localization-fieldset"}).append($("<label />").text(i).prepend($("<input />",{class:"t3js-localization-toggle-column",type:"checkbox",checked:"checked"})),l))})),Wizard.unlockNextStep(),Wizard.getComponent().on("change",".t3js-localization-toggle-record",(e=>{const a=$(e.currentTarget),t=a.data("uid"),o=a.closest("fieldset"),i=o.find(".t3js-localization-toggle-column");if(a.is(":checked"))this.records.push(t);else{const e=this.records.indexOf(t);e>-1&&this.records.splice(e,1)}const l=o.find(".t3js-localization-toggle-record"),s=o.find(".t3js-localization-toggle-record:checked");i.prop("checked",s.length>0),i.prop("__indeterminate",s.length>0&&s.length<l.length),this.records.length>0?Wizard.unlockNextStep():Wizard.lockNextStep()})).on("change",".t3js-localization-toggle-column",(e=>{const a=$(e.currentTarget),t=a.closest("fieldset").find(".t3js-localization-toggle-record");t.prop("checked",a.is(":checked")),t.trigger("change")}))}))})),Wizard.addFinalProcessingSlide((()=>{this.localizeRecords(parseInt(o.data("pageId"),10),parseInt(o.data("languageId"),10),this.records).then((()=>{Wizard.dismiss(),document.location.reload()}))})).then((()=>{Wizard.show(),Wizard.getComponent().on("click",".t3js-localization-option",(e=>{const a=$(e.currentTarget),t=a.find('input[type="radio"]');if(a.data("helptext")){const t=$(e.delegateTarget);t.find(".t3js-localization-option").removeClass("active"),t.find(".t3js-helptext").addClass("text-body-secondary"),a.addClass("active"),t.find(a.data("helptext")).removeClass("text-body-secondary")}this.localizationMode=t.val(),Wizard.unlockNextStep()}))}))}))}))}))}loadAvailableLanguages(e,a){return new AjaxRequest(TYPO3.settings.ajaxUrls.page_languages).withQueryArguments({pageId:e,languageId:a}).get()}getSummary(e,a){return new AjaxRequest(TYPO3.settings.ajaxUrls.records_localize_summary).withQueryArguments({pageId:e,destLanguageId:a,languageId:this.sourceLanguage}).get()}localizeRecords(e,a,t){return new AjaxRequest(TYPO3.settings.ajaxUrls.records_localize).withQueryArguments({pageId:e,srcLanguageId:this.sourceLanguage,destLanguageId:a,action:this.localizationMode,uidList:t}).get()}}export default new Localization;
\ No newline at end of file
+import DocumentService from"@typo3/core/document-service.js";import $ from"jquery";import{SeverityEnum}from"@typo3/backend/enum/severity.js";import AjaxRequest from"@typo3/core/ajax/ajax-request.js";import Icons from"@typo3/backend/icons.js";import Wizard from"@typo3/backend/wizard.js";import"@typo3/backend/element/icon-element.js";class Localization{constructor(){this.triggerButton=".t3js-localize",this.localizationMode=null,this.sourceLanguage=null,this.records=[],DocumentService.ready().then((()=>{this.initialize()}))}initialize(){Icons.getIcon("actions-localize",Icons.sizes.large).then((e=>{Icons.getIcon("actions-edit-copy",Icons.sizes.large).then((a=>{$(this.triggerButton).removeClass("disabled"),$(document).on("click",this.triggerButton,(t=>{t.preventDefault();const o=$(t.currentTarget),i=[],l=[];let s="";o.data("allowTranslate")&&(i.push('<div class="row"><div class="col-sm-3"><label class="btn btn-default d-block t3js-localization-option" data-helptext=".t3js-helptext-translate">'+e+'<input type="radio" name="mode" id="mode_translate" value="localize" style="display: none"><br>'+TYPO3.lang["localize.wizard.button.translate"]+'</label></div><div class="col-sm-9"><p class="t3js-helptext t3js-helptext-translate text-body-secondary">'+TYPO3.lang["localize.educate.translate"]+"</p></div></div>"),l.push("localize")),o.data("allowCopy")&&(i.push('<div class="row"><div class="col-sm-3"><label class="btn btn-default d-block t3js-localization-option" data-helptext=".t3js-helptext-copy">'+a+'<input type="radio" name="mode" id="mode_copy" value="copyFromLanguage" style="display: none"><br>'+TYPO3.lang["localize.wizard.button.copy"]+'</label></div><div class="col-sm-9"><p class="t3js-helptext t3js-helptext-copy text-body-secondary">'+TYPO3.lang["localize.educate.copy"]+"</p></div></div>"),l.push("copyFromLanguage")),0===o.data("allowTranslate")&&0===o.data("allowCopy")&&i.push('<div class="row"><div class="col-sm-12"><div class="alert alert-warning"><div class="media"><div class="media-left"><span class="icon-emphasized"><typo3-backend-icon identifier="actions-exclamation" size="small"></typo3-backend-icon></span></div><div class="media-body"><p class="alert-message">'+TYPO3.lang["localize.educate.noTranslate"]+"</p></div></div></div></div></div>"),s+='<div data-bs-toggle="buttons">'+i.join("")+"</div>",Wizard.addSlide("localize-choose-action",TYPO3.lang["localize.wizard.header_page"].replace("{0}",o.data("page")).replace("{1}",o.data("languageName")),s,SeverityEnum.notice,(()=>{1===l.length&&(this.localizationMode=l[0],Wizard.unlockNextStep().get(0).click())})),Wizard.addSlide("localize-choose-language",TYPO3.lang["localize.view.chooseLanguage"],"",SeverityEnum.notice,(e=>{Icons.getIcon("spinner-circle",Icons.sizes.large).then((a=>{e.html('<div class="text-center">'+a+"</div>"),this.loadAvailableLanguages(parseInt(o.data("pageId"),10),parseInt(o.data("languageId"),10)).then((async a=>{const t=await a.resolve();if(1===t.length)return this.sourceLanguage=t[0].uid,void Wizard.unlockNextStep().get(0).click();Wizard.getComponent().on("click",".t3js-language-option",(e=>{const a=$(e.currentTarget).prev();this.sourceLanguage=a.val(),Wizard.unlockNextStep()}));const o=$("<div />",{class:"row"});for(const e of t){const a="language"+e.uid,t=$("<input />",{type:"radio",name:"language",id:a,value:e.uid,style:"display: none;",class:"btn-check"}),i=$("<label />",{class:"btn btn-default d-block t3js-language-option option",for:a}).text(" "+e.title).prepend(e.flagIcon);o.append($("<div />",{class:"col-sm-4"}).append(t).append(i))}e.empty().append(o)}))}))})),Wizard.addSlide("localize-summary",TYPO3.lang["localize.view.summary"],"",SeverityEnum.notice,(e=>{Icons.getIcon("spinner-circle",Icons.sizes.large).then((a=>{e.html('<div class="text-center">'+a+"</div>")})),this.getSummary(parseInt(o.data("pageId"),10),parseInt(o.data("languageId"),10)).then((async a=>{const t=await a.resolve();e.empty(),this.records=[];const o=t.columns.columns;t.columns.columnList.forEach((a=>{if(void 0===t.records[a])return;const i=o[a],l=$("<div />",{class:"row"});t.records[a].forEach((e=>{const a=" ("+e.uid+") "+e.title;this.records.push(e.uid),l.append($("<div />",{class:"col-sm-6"}).append($("<div />",{class:"input-group"}).append($("<span />",{class:"input-group-text"}).append($("<input />",{type:"checkbox",class:"t3js-localization-toggle-record",id:"record-uid-"+e.uid,checked:"checked","data-uid":e.uid,"aria-label":a})),$("<label />",{class:"form-control",for:"record-uid-"+e.uid}).text(a).prepend(e.icon))))})),e.append($("<fieldset />",{class:"localization-fieldset"}).append($("<label />").text(i).prepend($("<input />",{class:"t3js-localization-toggle-column",type:"checkbox",checked:"checked"})),l))})),Wizard.unlockNextStep(),Wizard.getComponent().on("change",".t3js-localization-toggle-record",(e=>{const a=$(e.currentTarget),t=a.data("uid"),o=a.closest("fieldset"),i=o.find(".t3js-localization-toggle-column");if(a.is(":checked"))this.records.push(t);else{const e=this.records.indexOf(t);e>-1&&this.records.splice(e,1)}const l=o.find(".t3js-localization-toggle-record"),s=o.find(".t3js-localization-toggle-record:checked");i.prop("checked",s.length>0),i.prop("__indeterminate",s.length>0&&s.length<l.length),this.records.length>0?Wizard.unlockNextStep():Wizard.lockNextStep()})).on("change",".t3js-localization-toggle-column",(e=>{const a=$(e.currentTarget),t=a.closest("fieldset").find(".t3js-localization-toggle-record");t.prop("checked",a.is(":checked")),t.trigger("change")}))}))})),Wizard.addFinalProcessingSlide((()=>{this.localizeRecords(parseInt(o.data("pageId"),10),parseInt(o.data("languageId"),10),this.records).then((()=>{Wizard.dismiss(),document.location.reload()}))})).then((()=>{Wizard.show(),Wizard.getComponent().on("click",".t3js-localization-option",(e=>{const a=$(e.currentTarget),t=a.find('input[type="radio"]');if(a.data("helptext")){const t=$(e.delegateTarget);t.find(".t3js-localization-option").removeClass("active"),t.find(".t3js-helptext").addClass("text-body-secondary"),a.addClass("active"),t.find(a.data("helptext")).removeClass("text-body-secondary")}this.localizationMode=t.val(),Wizard.unlockNextStep()}))}))}))}))}))}loadAvailableLanguages(e,a){return new AjaxRequest(TYPO3.settings.ajaxUrls.page_languages).withQueryArguments({pageId:e,languageId:a}).get()}getSummary(e,a){return new AjaxRequest(TYPO3.settings.ajaxUrls.records_localize_summary).withQueryArguments({pageId:e,destLanguageId:a,languageId:this.sourceLanguage}).get()}localizeRecords(e,a,t){return new AjaxRequest(TYPO3.settings.ajaxUrls.records_localize).withQueryArguments({pageId:e,srcLanguageId:this.sourceLanguage,destLanguageId:a,action:this.localizationMode,uidList:t}).get()}}export default new Localization;
\ No newline at end of file
diff --git a/typo3/sysext/filelist/Resources/Private/Templates/File/ReplaceFile.html b/typo3/sysext/filelist/Resources/Private/Templates/File/ReplaceFile.html
index 5e3a70eb61ef..6e164730c8b4 100644
--- a/typo3/sysext/filelist/Resources/Private/Templates/File/ReplaceFile.html
+++ b/typo3/sysext/filelist/Resources/Private/Templates/File/ReplaceFile.html
@@ -21,7 +21,7 @@
<label class="form-label" for="file_replace"><f:translate key="LLL:EXT:filelist/Resources/Private/Language/locallang.xlf:file_replace.php.selectfile" /></label>
<div class="input-group col-6">
<input type="text" name="fakefile" id="fakefile" class="form-control input-xlarge" readonly>
- <button type="button" class="input-group-addon btn btn-primary" data-filelist-click-target="#file_replace">
+ <button type="button" class="input-group-text btn btn-primary" data-filelist-click-target="#file_replace">
<f:translate key="LLL:EXT:filelist/Resources/Private/Language/locallang.xlf:file_replace.php.browse" />
</button>
</div>
diff --git a/typo3/sysext/install/Resources/Private/Templates/Settings/ExtensionConfigurationGetContent.html b/typo3/sysext/install/Resources/Private/Templates/Settings/ExtensionConfigurationGetContent.html
index 0e08af1b5255..78039df4e6b7 100644
--- a/typo3/sysext/install/Resources/Private/Templates/Settings/ExtensionConfigurationGetContent.html
+++ b/typo3/sysext/install/Resources/Private/Templates/Settings/ExtensionConfigurationGetContent.html
@@ -7,7 +7,7 @@
<div class="form-group">
<div class="input-group">
- <span class="input-group-addon">Filter by:</span>
+ <span class="input-group-text">Filter by:</span>
<input type="text" class="form-control t3js-extensionConfiguration-search" placeholder="search setting">
</div>
</div>
diff --git a/typo3/sysext/install/Resources/Private/Templates/Settings/LocalConfigurationGetContent.html b/typo3/sysext/install/Resources/Private/Templates/Settings/LocalConfigurationGetContent.html
index b704a2d3ae43..155be9162df7 100644
--- a/typo3/sysext/install/Resources/Private/Templates/Settings/LocalConfigurationGetContent.html
+++ b/typo3/sysext/install/Resources/Private/Templates/Settings/LocalConfigurationGetContent.html
@@ -11,7 +11,7 @@
<div class="t3js-module-content" data-local-configuration-write-token="{localConfigurationWriteToken}">
<div class="form-group">
<div class="input-group">
- <span class="input-group-addon">Filter by:</span>
+ <span class="input-group-text">Filter by:</span>
<input type="text" autocomplete="off" class="form-control t3js-localConfiguration-search" placeholder="search setting">
</div>
</div>
diff --git a/typo3/sysext/install/Resources/Private/Templates/Settings/SystemMaintainer.html b/typo3/sysext/install/Resources/Private/Templates/Settings/SystemMaintainer.html
index ce35c0a7bfbe..1352f033dc68 100644
--- a/typo3/sysext/install/Resources/Private/Templates/Settings/SystemMaintainer.html
+++ b/typo3/sysext/install/Resources/Private/Templates/Settings/SystemMaintainer.html
@@ -19,7 +19,7 @@
<div class="t3js-module-content" data-system-maintainer-write-token="{systemMaintainerWriteToken}">
<div class="form-group">
<div class="input-group flex-nowrap">
- <span class="input-group-addon">System Maintainer:</span>
+ <span class="input-group-text">System Maintainer:</span>
<select-pure
multiple
default-label="Select system maintainers"
diff --git a/typo3/sysext/install/Resources/Private/Templates/Upgrade/UpgradeDocsGetContent.html b/typo3/sysext/install/Resources/Private/Templates/Upgrade/UpgradeDocsGetContent.html
index cf6f42be1ad3..3604254d882d 100644
--- a/typo3/sysext/install/Resources/Private/Templates/Upgrade/UpgradeDocsGetContent.html
+++ b/typo3/sysext/install/Resources/Private/Templates/Upgrade/UpgradeDocsGetContent.html
@@ -5,7 +5,7 @@
<div class="col-md-12">
<div class="form-group">
<div class="input-group">
- <span class="input-group-addon">Search:</span>
+ <span class="input-group-text">Search:</span>
<input
type="text"
class="form-control t3js-upgradeDocs-fulltext-search"
@@ -20,7 +20,7 @@
<div class="col-md-12">
<div class="form-group">
<div class="input-group flex-nowrap">
- <span class="input-group-addon">Filter by:</span>
+ <span class="input-group-text">Filter by:</span>
<select-pure
default-label="Select category"
class="t3js-upgradeDocs-select-pure"
diff --git a/typo3/sysext/install/Resources/Public/JavaScript/renderable/offset-group.js b/typo3/sysext/install/Resources/Public/JavaScript/renderable/offset-group.js
index 427a75c37cc6..9f6b2cd978a9 100644
--- a/typo3/sysext/install/Resources/Public/JavaScript/renderable/offset-group.js
+++ b/typo3/sysext/install/Resources/Public/JavaScript/renderable/offset-group.js
@@ -14,13 +14,13 @@ var __decorate=function(t,e,o,r){var s,i=arguments.length,f=i<3?e:null===r?r=Obj
<div class="form-multigroup-wrap">
<div class="form-multigroup-item">
<div class="input-group">
- <div class="input-group-addon">x</div>
+ <div class="input-group-text">x</div>
<input id="${this.offsetId}_offset_x" class="form-control t3js-emconf-offsetfield" data-target="#${this.offsetId}" value="${this.values[0]?.trim()}"/>
</div>
</div>
<div class="form-multigroup-item">
<div class="input-group">
- <div class="input-group-addon">y</div>
+ <div class="input-group-text">y</div>
<input id="${this.offsetId}_offset_y" class="form-control t3js-emconf-offsetfield" data-target="#${this.offsetId}" value="${this.values[1]?.trim()}"/>
</div>
</div>
diff --git a/typo3/sysext/lowlevel/Classes/Controller/DatabaseIntegrityController.php b/typo3/sysext/lowlevel/Classes/Controller/DatabaseIntegrityController.php
index f101945099f3..1a27d832e98f 100644
--- a/typo3/sysext/lowlevel/Classes/Controller/DatabaseIntegrityController.php
+++ b/typo3/sysext/lowlevel/Classes/Controller/DatabaseIntegrityController.php
@@ -1962,7 +1962,7 @@ class DatabaseIntegrityController
$lineHTML[] = '<div class="form-group">';
$lineHTML[] = ' <div class="input-group">';
$lineHTML[] = $this->mkCompSelect($fieldPrefix . '[comparison]', (string)$conf['comparison'], ($conf['negate'] ?? null) ? 1 : 0);
- $lineHTML[] = ' <span class="input-group-addon">';
+ $lineHTML[] = ' <span class="input-group-text">';
$lineHTML[] = ' <div class="form-check form-check-type-toggle">';
$lineHTML[] = ' <input type="checkbox" class="form-check-input t3js-submit-click"' . (($conf['negate'] ?? null) ? ' checked' : '') . ' name="' . htmlspecialchars($fieldPrefix) . '[negate]">';
$lineHTML[] = ' </div>';
diff --git a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Icons.html b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Icons.html
index 4e23e952f050..df359f2a995e 100644
--- a/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Icons.html
+++ b/typo3/sysext/styleguide/Resources/Private/Templates/Backend/Icons.html
@@ -103,7 +103,7 @@
</div>
<div class="form-group col-md-12">
<div class="input-group">
- <div class="input-group-addon"><core:icon identifier="actions-search" size="default" /></div>
+ <div class="input-group-text"><core:icon identifier="actions-search" size="default" /></div>
<input type="text" class="form-control input-lg" id="search-field" placeholder="Icon identifier">
</div>
</div>
diff --git a/typo3/sysext/tstemplate/Resources/Private/Partials/ConstantEditorFields.html b/typo3/sysext/tstemplate/Resources/Private/Partials/ConstantEditorFields.html
index 77d4e4c28b2b..e4acc0ee03c1 100644
--- a/typo3/sysext/tstemplate/Resources/Private/Partials/ConstantEditorFields.html
+++ b/typo3/sysext/tstemplate/Resources/Private/Partials/ConstantEditorFields.html
@@ -84,7 +84,7 @@
name="data[{constantItem.name}][left]"
value="{constantItem.wrapStart}"
/>
- <span class="input-group-addon input-group-icon">|</span>
+ <span class="input-group-text input-group-icon">|</span>
<input
class="form-control form-control-adapt"
type="text"
@@ -94,7 +94,7 @@
</f:case>
<f:case value="offset">
<f:for each="{constantItem.labelValueArray}" as="labelAndValue" iteration="iterator">
- <span class="input-group-addon input-group-icon">{labelAndValue.label}</span>
+ <span class="input-group-text input-group-icon">{labelAndValue.label}</span>
<input
type="text"
class="form-control form-control-adapt"
diff --git a/typo3/sysext/tstemplate/Resources/Private/Templates/ActiveEdit.html b/typo3/sysext/tstemplate/Resources/Private/Templates/ActiveEdit.html
index 2820aa22173b..96e6153148d2 100644
--- a/typo3/sysext/tstemplate/Resources/Private/Templates/ActiveEdit.html
+++ b/typo3/sysext/tstemplate/Resources/Private/Templates/ActiveEdit.html
@@ -52,7 +52,7 @@
<div class="col mb-4">
<label class="visually-hidden">{currentObjectPath} =</label>
<div class="input-group">
- <div class="input-group-addon">{currentObjectPath} =</div>
+ <div class="input-group-text">{currentObjectPath} =</div>
<input class="form-control" type="text" name="value" value="{currentValue}" />
</div>
</div>
@@ -71,13 +71,13 @@
<div class="col mb-4">
<label class="visually-hidden">{currentObjectPath}.</label>
<div class="input-group">
- <div class="input-group-addon">{currentObjectPath}.</div>
+ <div class="input-group-text">{currentObjectPath}.</div>
<input name="childName" type="text" class="form-control" />
</div>
</div>
<div class="col mb-4">
<div class="input-group">
- <div class="input-group-addon">=</div>
+ <div class="input-group-text">=</div>
<input type="text" name="childValue" class="form-control" />
</div>
</div>
diff --git a/typo3/sysext/workspaces/Resources/Private/Partials/WorkingTable.html b/typo3/sysext/workspaces/Resources/Private/Partials/WorkingTable.html
index f8f4a06339ea..ffc4241d20f2 100644
--- a/typo3/sysext/workspaces/Resources/Private/Partials/WorkingTable.html
+++ b/typo3/sysext/workspaces/Resources/Private/Partials/WorkingTable.html
@@ -20,7 +20,7 @@
<div class="form-group">
<label for="languages" class="form-label"><f:translate key="LLL:EXT:workspaces/Resources/Private/Language/locallang.xlf:workingTable.languages" /></label>
<div class="input-group">
- <span class="input-group-addon input-group-icon">
+ <span class="input-group-text input-group-icon">
<f:for each="{availableLanguages}" as="language"><f:if condition="{language.active}"><core:icon identifier="{language.flagIcon}" /></f:if></f:for>
</span>
<select name="languages" id="languages" class="form-select">
--
GitLab