Adds controls to Group component to match others in libray.
Alignment x, y
Border
and added a boolean to Button to be full-width on mobile, some designers like this on mobile.
Tested and while it didn't break anything we now have 2 versions of both heroes in Canvas. One is broken if you add.
I've gone back and fixed things for Storybook, added a font-size control to the full-width to be consistent with other components. Also swapped out images for a more abstract theme which won't date this as much.
Merged and we may need to follow up on removed the config for the broken version in Canvas.
Assigning back to you pameeela → . let me know if this is a breaking change or not.
I will checkout your fix. I also see we might need some control for side by side buttons.
Dang! I really didn't think Canvas would choke on this added param. Removed.
galactus86 → made their first commit to this issue’s fork.
Thanks for the UX feedback. I was able to refactor just a bit to really polish of the controls. (at least I hope I did)
control labels improved
add control for vertical position of content. already had for left/right, this really feels like solid upgrade.
The original use case for the square option was to have text align bottom left and icon top right. It was a very specific design look. The icon size I think is helpful if you want to use this in a more traditional icon and text close together manner. Some of these options are more specific so that is why we changed this so it wasn't always a square, more flexible.
I guess we could add a vertical center option as that might be nice. I'm finding that some components really need flex alignment option to be more useful. At this point adding these controls is actually quick.
It would be better to allow the editor to use alignment control in ckeditor for this type of format.
Can we adjust the rich text ckeditor format config to do so?
addressed by adding slot in https://git.drupalcode.org/project/mercury/-/merge_requests/58
Removed content fields, replacing with a slot for flexibility.
Will need to create 1 or 2 patterns to ship with.
Added controls
overlay opacity
image, object-position
overall height of hero
content position, alignment
Editors place content like heading, text and can use those component's controls for color, alignment, size, etc.
actually padding control is present. but did find that align-self control needed to be fixed.
Since the hero has a slot, the content could be just about anything, so I'm not sure we can manage that per background. Instead I made sure the heading and text components have font-color options so editors have some level of control.
Fixed missing icon
Add additional color variables for hovers, bgd, etc.
Added border radius and background option
galactus86 → created an issue. See original summary → .
Marking as closed, but will move the last item listed here to another issue to create a fork
galactus86 → created an issue. See original summary → .
galactus86 → created an issue. See original summary → .
The breadcrumb is now integrated with Mercury's component... but something is not right.
The home link always seems to have the active class
and there is a duplicate of this first item
Discussed this morning and the consensus was to keep font size options but update the control label and options language so it is clear how these work... the audience being non-devs.
Also a question in slack about adding help text on these fields, which would be such a big help for editors.
My suggestion:
- Add font color control, simple just dark or light
- Some basic background color options are good for flexibility, But we could consider reducing the options. But the font color would probably be sufficient.
Let's test a bit. The size, color are all from the design system so editors can't be adding random sizes or colors. And will default to system defaults. This is a really common control from modern builders so I think without it might feel a bit under considered.
We can update to match Figma.
But as a POC I've added controls to Heading and Paragraph components in an effort to provide greater flexibility.
Heading gets control for font-size... these are using the Tailwind increments so it aligns with other text on the site. A little bit of flexibility here not related to heading level gives editors better options.
Paragraph gets controls for both font size (percentage based) and color.
galactus86 → made their first commit to this issue’s fork.
Now have 2 heroes:
- Hero has 2 columns, slot for content, image with radius, size controls
- controls for background color, padding
- and 2nd hero is traditional full-screen image with content overly
Also included
- Improvements to Pricing Card hover state
- Cleanup of component organizations
galactus86 → made their first commit to this issue’s fork.
UX might work as follows:
User story: Editor wants to add a jump link from the page hero to an FAQ section lower on the same page.
Editor goes to target faq section and there is an ID field for them to add a short ID (example id: faq)
Editor scrolls back up to hero and changes the button link to: #faq
Now when a visitor clicks the FAQ button in hero, the page jumps down to the FAQ section
We probably need to add html { scroll-behavior: smooth; } to make this a bit more sophisticated.
The Card component can be added in Canvas but also gets used in the Latest Blog view. Adding a rounded corner control on a single card added directly in Canvas is one thing, but wouldn't a user want to round corner all cards site wide?
I think we decided the rounded corners are a theme level decision. Or we need to add some type of CSS variable for editors to globally update the rounded corner radius.
galactus86 → made their first commit to this issue’s fork.
This should hide the branding component from Canvas.
Use the Site Branding core block to display the site logo.
galactus86 → made their first commit to this issue’s fork.
Closing as duplicate, addressing in https://www.drupal.org/project/mercury/issues/3547309 ✨ Container updates, nested items, control bugs Active
Fixing in https://www.drupal.org/project/mercury/issues/3547309 ✨ Container updates, nested items, control bugs Active
Being addressed with: https://www.drupal.org/project/mercury/issues/3547309 ✨ Container updates, nested items, control bugs Active
Change field labels color to gray-lightest, weight: semibold
Change field text to weight: regular (normal)
updates mades:
- Changed name of Grid Container to Section, describes component's purpose better and simpler
- More margin size options added
- Add prop for background
- Add prop for padding (for when background color is set)
- Fixed broken TW utility classes for container width
New Group component for nesting inside Section
- Group is essentially a slot for editors to place smaller components such as heading, text, button - adding layout flexibility
- controls for flex direction, gap, padding, background
Updates Tile Icon so icon can be centered, border show/hide - more flexible
galactus86 → created an issue.
galactus86 → created an issue.