Problem/Motivation

A big part of the CSS styles from Claro come from Seven and are outdated. They don’t take into account current practices in Drupal core, modern CSS features, and the use of PostCSS.

Steps to reproduce

Update according to the new CSS coding standards.

(@todo change with the final drupal.org link when approved)

Proposed resolution

Open an issue per each component and update the CSS.

Remaining tasks

  1. First, define what to change per file.
  2. Second, change that on each file.

To fix:

Fixed:

API changes

Release notes snippet

Comments

ckrina created an issue. See original summary.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue summary: View changes
quietone’s picture

quietone commented

Nice to see the progress!

Making changes by file is going to result in lots of issues and make it more difficult for the reviewers and committers. If it were done by type of change it makes the review process much easier because the reviewer only has to think about one standard, not many. So, this should be done by type of change. For example, have an issue to fix indentation in all files. And another to fix something else. This is the way PHP coding standards changes are made in core, that is, by rule not file.

What is in place to prevent the coding standard errors from creeping back in?

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

If it were done by type of change it makes the review process much easier because the reviewer only has to think about one standard, not many.

I personally disagree here (but will defer to @ckrina). Because of the nature of CSS, these changes are very hard to properly QA. We need to be very granular with our issues so we can make regular progress. If we do multiple mega-patches, it'll be difficult to both QA and see the relationships between the removed and added code. My fear is that this would cause the issue to get bogged down and eventually abandoned.

What is in place to prevent the coding standard errors from creeping back in?

We're in the process of documenting our current coding practices in #3324368: Update CSS coding standards to include PostCSS and Drupal 10. That'll help, plus the review process.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented

Thanks @quietone for the feedback (and @nod_ in Slack)! We initially defined this process based on @mherchel's and others experience on Olivero's refactoring. The experience I've had with changes across the code are color changes in Claro and the manual review was so complex that nobody felt confortable giving +1 and it took ages to get it done. I like the approach per component because it’s way more granular and when reviewing you just have to manually check the places this component will appear: I think it will be easier to define testing instructions and get reviews this way.
That said, I really don’t have a strong opinion and I’d be happy to switch the strategy if everybody else votes for the other approach.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented

We need to define what we need to change per file first until we start committing work. Initial list of task per issue:

  • Use CSS Logical Properties where appropriate
  • Use CSS nesting where appropriate
  • Pull down :root CSS variables into the component where appropriate
  • Create component level CSS variables where appropriate

Open to suggestions!

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue summary: View changes
anoopsingh92’s picture

anoopsingh92
Location Rajasthan, India
commented
Issue summary: View changes
Related issues: +#3329078: User interface issue in Image block type in olivero theme
anoopsingh92’s picture

anoopsingh92
Location Rajasthan, India
commented
Issue summary: View changes
anoopsingh92’s picture

anoopsingh92
Location Rajasthan, India
commented
Related issues: -#3329078: User interface issue in Image block type in olivero theme
anoopsingh92’s picture

anoopsingh92
Location Rajasthan, India
commented
Issue summary: View changes
morganlyndel’s picture

morganlyndel commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented
Issue summary: View changes
stockfoot’s picture

stockfoot commented

It appears that wide-image.pcss.css and wide-image.css only exist in the Olivero theme and not the Claro theme.
I could also not locate the quickedit.pcss.css file.
Let me know if there is a specific location for these files, and I will happily finish off the last three child issues. Thank you!

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue summary: View changes

Removed unnecessary wide-image.css item from the list.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue summary: View changes

Cleaning the IS to list the missing ones.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue summary: View changes
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue summary: View changes

New fixed ones.

meeni_dhobale’s picture

meeni_dhobale commented
Issue summary: View changes
meeni_dhobale’s picture

meeni_dhobale commented
Issue summary: View changes
smustgrave’s picture

smustgrave commented

Appear to be in the home stretch with the last few remaining Congrats to everyone

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.