Problem/Motivation

Currently, the only (and default) source for attributes props is AttributesWidget which is not easy to use because it expects to write a full HTML attributes string: class="hidden" title="Lorem ipsum"

Proposed resolution

  • Add a new ClassAttributeWidget, which is also a simple textfield.
  • The stored data is a simple string: "foo bar baz"
  • The data is transformed to a mapping: class: ['foo', 'bar', 'baz']
  • Make this source the default source of AttributesPropType

Issue fork ui_patterns-3477419

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

pdureau created an issue. See original summary.

pdureau’s picture

pdureau commented
Title: [2.0.0-beta4] New Source plugins for attributes » [2.0.0-beta4] New source plugin for attributes

smovs made their first commit to this issue’s fork.

smovs opened merge request !232

smovs’s picture

smovs commented
Status: Active » Needs review

Hi @pdureau
I created a new source plugin for class attributes.
Please review MR !232

pdureau’s picture

pdureau commented
Assigned: Unassigned » pdureau

Thanks you smos and welcome in the team

pdureau changed the visibility of the branch 3477419-2.0.0-beta4-new-source to hidden.

pdureau changed the visibility of the branch 3477419-2.0.0-beta4-new-source to hidden.

pdureau changed the visibility of the branch 3477419-2.0.0-beta4-new-source to active.

pdureau’s picture

pdureau commented
Assigned: pdureau » Unassigned
Status: Needs review » Needs work

Thanks a lot.

I have added a commit to change the wording a bit (Plugin label must follow sentence case for example)

However, the current regex is too strict because more or less limited to ASCII alphanumeric characters. It would be better to list the forbidden characters instead of listing the authorized characters. And also to allow space at the end of the string.

Related issue: #3473621: [2.0.0-beta2] The regex for attribute (values) props should allow all Tailwind allowed special characters

smovs’s picture

smovs commented
Assigned: Unassigned » smovs
smovs’s picture

smovs commented
Assigned: smovs » Unassigned
Status: Needs work » Needs review

I made the regex for class names less strict. Now it allows strings like this one (tested on Tailwind examples):
"bg-blue-500 hover:bg-blue-500 w-1/2 w-1.5 text-[16px]. bg-[#FF5733] [&_img]:rounded [&_>p]:text-primary [&_*]:bg-primary "

But still, a class name cannot start with a hyphen followed by a digit or a digit.

@pdureau Please review.

just_like_good_vibes made their first commit to this issue’s fork.

pdureau’s picture

pdureau commented
Assigned: Unassigned » pdureau
pdureau’s picture

pdureau commented
Assigned: pdureau » Unassigned
Status: Needs review » Reviewed & tested by the community

waiting auto merge

  • pdureau committed ddf9710a on 2.0.x authored by smovs 
    Issue #3477419 by smovs, just_like_good_vibes, pdureau: New source...
pdureau’s picture

pdureau commented
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.