Breaking: Profile editing templates carry speaking classes
Description
The templates of the profile editing view carried the classes of the theme they
were developed with - toasts, badges, alerts, spinners, form controls, spacing,
display and colour utilities - next to block and element classes of the
extension such as academic-. They carry
speaking classes now, named after what an element is and shared by all academic
extensions: ace-, ace-, ace-, ace-,
ace-, ace- and so on. The outermost elements keep their
classes, academic- for the editor and
academic- for the profile
list. The classes of Bootstrap that a site builds on stay on purpose where the
templates render them: the grid classes row and col-*, the button classes
btn, btn-*, btn- and btn-, and visually-. No other
theme class is rendered any more, rounded- included, and the extension
ships no styles for the new classes, see
Breaking: The profile editing plugin ships no stylesheet.
The scripts of the editor follow. They show and hide markup through its
attribute
hidden
instead of the class d-, and find the nodes
they write into by data- attributes instead of classes. They still read
one class of the markup, the ace- of a field or a group for the
message of a refused value.
The column Before lists the markup of the development versions of 3.0, because they were installed and styled. The editing plugin of version 2 is replaced as a whole, and its markup with it, see Breaking: Replaced the profile editing view.
| Element | Before | After |
|---|---|---|
| Layout of the editor | academic-, a
row gx-, the columns
academic- and
academic-, the
image in a sticky- | academic- with
ace- and ace- around the row,
ace-, ace-, ace- and
ace-, the columns marked data-
and data- |
| Link back to the list | back- | ace- |
| Message of a missing page type | alert alert- | ace- |
| Header with the switches | d-, a heading h2 fw-, the
forms academic- and
__, form-,
the checkboxes form- with
academic- or
__, form- and invalid- | ace- with ace- and ace-, every switch an
ace- with ace-, ace-,
ace- and ace-, the checkboxes marked
data- and data- |
| Sections of the editor | headings h2 fw- or display-, the forms
academic-, a fieldset
border- | ace- with ace-, ace- and ace- |
| Row of a field | rounded-, rounded- in place of rounded- for a
checkbox, a select and a group, every other row
bg- | ace-, every other row ace- |
| Value of a field | d- with flex-,
fw- and text-, an empty value
text-, the edit button
btn rounded- | ace- with ace-, ace- and ace-, an
empty value ace-, the edit button
ace- |
| Editor of a field | d-, the label form-, the counter
form-, the message invalid- | ace- with the attribute
hidden
, the label
ace- in an ace-, the counter ace-, the
message ace- |
| Control of a field | form-, form- or
form-, each with
academic- | ace- with ace-, ace-, ace- or
ace-, marked data- |
| Actions of a field | btn-, the icon of a
button in fs- | ace- with the attribute
hidden
, the buttons ace- with ace-,
ace- or ace-, the icon in ace- |
| Actions of full form editing | col- | ace-, the buttons ace-, ace- and
ace- |
| Help text and managed field | btn rounded-, the badge
badge rounded- | ace-, the badge ace- |
| Image of the profile | a heading h2 fw-, figure mb-, picture d-,
the image img- | ace- with ace-, ace-, ace- and
ace- |
| Image editor | academic-
with __, the form __, the
cropper __, help texts text-, the
message alert alert-, the busy indicator
spinner- | ace- with ace-, the form ace- marked
data-, ace-, ace-,
ace- and ace- |
| Section of documents | mt-, a heading display-, the add button
btn rounded-, the empty state
bg-, the column
heads row g- with d- | ace- with ace-, ace- and
ace-, the empty state
ace-, the column heads ace-, both shown
and hidden through
hidden
|
| Row of a document | row g-, the
values col-* py- with a label
d- | <article class="ace- around the row, the values
ace- with ace- and ace- in their columns, then
ace- |
| Actions of a row | col-, the state
badge rounded-,
the buttons btn rounded- | ace- with ace- and ace-, the buttons
ace- with ace-, ace-,
ace-, ace-, ace-,
ace- or ace-, in the contacts of a contract
ace- and ace- |
| Document editor | academic-
with __, a heading display-, the
message alert alert-, the busy indicator spinner- | ace- with ace-, ace-,
ace-, ace-, ace-, ace-
and ace- |
| Contacts of a contract and their editor | pt- with a heading h4 mb-, rows
row g-, the editor
border bg- with alert alert- | ace- with ace- and ace-, rows ace-,
the editor ace- with ace-, ace-,
ace-, ace- and ace- |
| Status toast | toast-, toast with
toast-, status-, btn- and
toast-, the severity bg-,
bg-, bg- or bg- | ace-, ace- with ace-, ace-,
ace- and ace-, the severity
ace-, ace-, ace-
or ace- |
| Dialog about unsaved changes | academic-
with p-, a heading h4 mb- and the buttons
btn rounded- | ace- with ace-, ace-, ace- and
ace-, the buttons ace-, ace- and
ace- |
| Profile list | a heading h2 fw-, table- around a
table table-, the image
academic-, the name
fw-, the state badge text-, the
actions btn rounded- | ace-, ace- around an ace- with
ace- and ace-, rows ace-, ace-
with ace-, ace- and ace-, the
actions ace- with ace- or
ace- and btn btn- |
The state classes the scripts write change with the markup:
| State | Before | After |
|---|---|---|
| Hidden element | d-, the column heads of a document list d- | the attribute
hidden
|
| Severity of the status toast | bg-, bg-, bg-, bg- | ace-, ace-, ace-,
ace- |
| Counter over its limit | text- | ace- |
| Empty preview | text- | ace- |
| Rich text preview with a value | none | ce- |
| Refused field | is-, the message in the invalid- of the field
or of its form- | is-, the message in the ace- of the field or of
its group |
The classes is-, active, show, showing, the drag classes
is-, is-, is-, is- and
is-, is-, the column widths col- and the
transition classes keep their names.
Impact
- A site stylesheet that styles the profile editing view or the profile list through the classes of the column Before no longer matches.
- A theme stylesheet that styled the view through
toast,badge,alert,form-,control form-orselect form-no longer reaches it. Where the Bootstrap toast script is on the page, it still shows and hides the status toast.check - An override that keeps
d-on the editor of a field, its actions, an empty state or the column heads of a document list keeps them hidden for good: the scripts toggle the attributenone hiddenonly. - An override that drops
ace-from a field or a group loses the message of a refused value.message
Affected Installations
Every installation that renders the profile editing plugin and styles it or overrides its templates.
Migration
- Move the selectors of the site stylesheet from the classes in the column Before to those in the column After. The chapter Styling shows how the markup of the profile list and the editor is built up, and the stylesheet of the development instances is a complete example, see Breaking: The profile editing plugin ships no stylesheet.
- A template override is compared with the shipped template of 3.0 and
adopts its markup. It keeps the
data-attributes, the attributepe-* hiddenwhere the shipped template renders it, and theace-of a field or a group, see Important: The profile editor is Fluid, driven by five custom elements.message - Flush the TYPO3 caches, so the Fluid template cache is rebuilt.