Studio: Add new modal design #1128

katinthehatsite · 2025-03-25T15:01:18Z

Related issues

STU-226

Proposed Changes

This PR adds a modal to Studio according to Figma: RToz6tIuQ7nlZrikBte4GU-fi-7169_205567

Testing Instructions

Pull the changes from this branch
Start the app with STUDIO_WHATS_NEW_SECTION=true npm start
Click on the Help > What's New menu button in the topbar
Observe that the modal appears
Click through the modal and confirm that you can see intro page + three other pages with different features

Pre-merge Checklist

Have you checked for TypeScript, React or other console errors?

src/components/main-sidebar.tsx

katinthehatsite · 2025-03-26T08:59:16Z

@ivan-ottinger Feel free to give it an initial review while I am polishing a couple of things

ivan-ottinger

@ivan-ottinger Feel free to give it an initial review while I am polishing a couple of things

Very nice! It great to see the modal coming to life! 🕺🏼

Just sharing a couple smaller things I have noticed so far in the comments below.

I have also noticed the design has the Previous button in a border, but I think we are generally now trying to use borderless secondary buttons. We can double-check with Marina.

src/modules/whats-new-modal/whats-new-modal.tsx

wojtekn · 2025-03-26T09:41:20Z

Click on What's New button in the sidebar

Shouldn't it be an item in the top menu?

Other feedback:

the modal could use dots showing how many items there are, and which one is currently displayed
I can't open the modal after I close it, and I need to restart Studio to do so.
'Learn more' and 'Previous' are displayed close to each other, so I could think they should be aligned, but they are not.
Modal seems a bit too wide
The feature doesn't obey the feature flag

ivan-ottinger · 2025-03-26T10:16:04Z

Shouldn't it be an item in the top menu?

Yes, there will be: #1129.

We have beeing using the sidebar temporarily in development. Kat had left a comment here yesterday: https://github.com/Automattic/studio/pull/1128/files#r2012860549

Also, I have still considered this PR as a work-in-progress, not ready for final review.

katinthehatsite · 2025-03-26T10:28:35Z

I have also noticed the design has the Previous button in a border, but I think we are generally now trying to use borderless secondary buttons. We can double-check with Marina.

Sure, we can consider adding it to work around the fact that Learn More and Previous might seem to close.

ivan-ottinger · 2025-03-26T10:35:24Z

I have also noticed the design has the Previous button in a border, but I think we are generally now trying to use borderless secondary buttons. We can double-check with Marina.

Here's where we were recently removing border from secondary buttons in Calypso: Automattic/wp-calypso#101088. That was originally brought up in Staging sites walkthrough: pesfPa-1n1-p2. This is why I think it is the right approach to keep the secondary buttons without the border in Studio as well.

katinthehatsite · 2025-03-26T10:53:09Z

the modal could use dots showing how many items there are, and which one is currently displayed

The dots were actually there but I was fixing something else and accidentally changed their color. This was fixed in 7139638

katinthehatsite · 2025-03-26T10:53:57Z

Here's where we were recently removing border from secondary buttons in Calypso: Automattic/wp-calypso#101088. That was originally brought up in Staging sites walkthrough: pesfPa-1n1-p2. This is why I think it is the right approach to keep the secondary buttons without the border in Studio as well

Makes sense, should we get some feedback from Marina? Maybe we can add a light background or something? Not sure. I think the problem with no border is that it causes the alignment issue that @wojtekn mentioned in his feedback.

ivan-ottinger · 2025-03-26T11:40:29Z

Makes sense, should we get some feedback from Marina? Maybe we can add a light background or something? Not sure. I think the problem with no border is that it causes the alignment issue that @wojtekn mentioned in his feedback.

Yes, I will ask her in that Linear issue.

katinthehatsite · 2025-03-26T11:49:53Z

Modal seems a bit too wide

Let's double-check with Marina, I followed what we have in Figma which is 312px. cc @ivan-ottinger

ivan-ottinger · 2025-03-26T12:19:08Z

Let's double-check with Marina, I followed what we have in Figma which is 312px. cc @ivan-ottinger

Maybe you meant too tall, @wojtekn? 🤔 Or do you mean that it would look better if it is a bit more narrow generally?

wojtekn · 2025-03-26T13:03:09Z

My bad @ivan-ottinger , yes, I meant too narrow and too tall :- )

…ew-modal-new-component

katinthehatsite · 2025-03-27T10:23:15Z

I have now made the following updates:

added border to Previous button
removed focus and the ability to select text from the modal
removed Learn more from the first card

Remaining things:

modal width / height clarification
illustrations
copy details for domains and intro card

cc @ivan-ottinger

ivan-ottinger · 2025-03-27T12:12:47Z

Nice! Thank you for all the updates, Kat.

What if we used the following description for the custom domains card? We can still change it later if we decide to.

Easily identify your local Studio sites with custom domain names. Personalize and organize your workflow!

I think we could also use the copy suggested by Wojtek above for the first intro card:

What is new in Studio?
Discover the latest updates in Studio! Explore exciting new features designed to enhance your experience.

One small additional thing I noticed is that the Learn more link is a bit closer to the Previous button than in the Figma design (STU-270-linear-issue#comment-3ad4d247). I think we could add more space there so it stands out more.

katinthehatsite · 2025-03-28T11:12:30Z

I made some changes, feel free to take another look @ivan-ottinger . One thing that is tricky is that with translations, some content might be longer so I am slightly worried about scrollbars appearing. I am wondering if we might set max-height instead of fixed height

bgrgicak · 2025-03-28T11:40:04Z

@katinthehatsite for long content you could make the footer sticky, so users could scroll the content, but still be able to navigate.

If you want to try it, you can do this in CSS:

.components-guide .components-modal__content {
    position: relative;
}

.components-guide__footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    margin-bottom: 0;
    height: 104px;
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
}

katinthehatsite · 2025-03-28T11:41:47Z

Thanks for the exploration, I am trying to avoid using CSS and looking for Tailwind approach. I do have the CSS solution already which would be something like:

.whats-new-modal .components-guide__container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Make the page container take full height */
.whats-new-modal .components-guide__page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Ensure content area can shrink if needed */
.whats-new-modal .components-guide__page-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Make the footer stick to the bottom */
.whats-new-modal .components-guide__footer {
  margin-top: auto;
}

/* Prevent text overflow by adding ellipsis */
.whats-new-modal h2,
.whats-new-modal p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limit to 3 lines */
  line-clamp: 3; /* Standard property for compatibility */
  -webkit-box-orient: vertical;
}

/* Allow title to show more */
.whats-new-modal h2 {
  -webkit-line-clamp: 2; /* Limit title to 2 lines */
  line-clamp: 2; /* Standard property for compatibility */
} 

.components-button.components-guide__finish-button {
	height: 40px;
}

I would also like avoid the scrollbars on the side. We should probably cut the text there.

bgrgicak · 2025-03-28T12:00:26Z

src/modules/whats-new/components/whats-new-modal.tsx

+	{
+		image: previewSitesIllustration, // TODO: Add correct illustration
+		title: __( 'Choose a custom domain for your Studio site' ),
+		description: __(
+			'Easily identify your local Studio sites with custom domain names. Personalize and organize your workflow!'
+		),
+		learnMoreUrl:
+			'https://developer.wordpress.com/docs/developer-tools/studio/sites/#1-using-a-custom-domain ', // TODO: Add correct URL
+	},


There are some TODOs here, should we address them before merging?

No these are fine, we are waiting for design. We will create a follow up issue to handle these

ivan-ottinger · 2025-03-28T12:15:54Z

Thank you for all those changes, Kat!

To mitigate the need for scrollbars, I wonder if we could make the modal height depending on the longest card content. 🤔

Other approach coming to my mind is to make the modal a little bit larger in general to accommodate longer translations. The "What's New" modal in Calypso has this extra space that can be filled with the content without affecting the modal size or footer button positions:

If the content gets larger than the buffer, in those cases it could just make the modal taller / or add a scrollbar.

In regards the use of CSS instead of Tailwind for this component in Studio, I wonder what is the point of view of other Yolo members.

One last comment: I think we could still merge the PR even if it is not 100% the way we want it since we are not yet launching to production. We could at least get the translations going and have the "What's New" modal ready for internal testing. It would also unblock the beta release. 🙂

katinthehatsite · 2025-03-28T12:25:26Z

I agree that we can merge this as a base and then discuss the specifics. Currently, it will work like this:

If the text is longer than 5 lines on the first card, it will be cut off to avoid using the scrollbar. This is as much as we can fit before we hit the footer. If it is shorter, it will not be cut off. The footer will remain at the bottom.
If the text is longer than 3 lines on all other cards, it will be cut off to avoid using scrollbars. The Learn More link will be displayed to see more info
The modal is of the fixed height so it will not get scrollbars. Personally, I think it does not look great with those but I think it is a design call more than anything.

I think a good approach from here would be to review this with the designer and see what improvements they could suggest to accommodate the translations etc.

In regards the use of CSS instead of Tailwind for this component in Studio, I wonder what is the point of view of other Yolo members.

I think in 95% of the time we should use Tailwind. However, this component is very tricky to handle as it allows minimal customizations. We can revisit if we can find an alternative approach for this.

ivan-ottinger · 2025-03-28T12:30:48Z

Sounds good to me. 👍🏼 Thanks for sharing the details, Kat.

I think a good approach from here would be to review this with the designer and see what improvements they could suggest to accommodate the translations etc.

Yes, let's discuss this with Marina. We can schedule a call with her for the beginning of the week when we get back from meetup - or - maybe we will find some time next week.

Use a new component for Modal

94a9621

katinthehatsite self-assigned this Mar 25, 2025

Kateryna Kodonenko added 8 commits March 25, 2025 16:39

Improve styling

fc0dda3

Final touches

66fc273

Handle on click

122c43c

Fix translations

880b3a8

Update correct content

4180ae3

Make code DRY

89f117a

Modify the button on finish

a338a55

Ensure the close button remains visible

432c0cf

katinthehatsite commented Mar 25, 2025

View reviewed changes

src/components/main-sidebar.tsx Outdated Show resolved Hide resolved

Undo changes

3ee9b0f

ivan-ottinger reviewed Mar 26, 2025

View reviewed changes

src/modules/whats-new-modal/whats-new-modal.tsx Outdated Show resolved Hide resolved

src/modules/whats-new-modal/whats-new-modal.tsx Outdated Show resolved Hide resolved

Ensure that page controls are not affected

7139638

Fix styling on modal

a63ae6c

Ensure that there is alt attribute on image

beaddc8

katinthehatsite mentioned this pull request Mar 26, 2025

What's New Section: Add menu item to trigger the modal manually #1129

Merged

1 task

Kateryna Kodonenko added 2 commits March 26, 2025 14:07

Update link for custom domains

4589bac

Merge branch 'trunk' of github.com:Automattic/studio into add/whats-n…

dd807ef

…ew-modal-new-component

Use relative paths for import

84b3528

katinthehatsite force-pushed the add/whats-new-modal-new-component branch from 8e8ae64 to 84b3528 Compare March 27, 2025 09:17

Kateryna Kodonenko added 5 commits March 27, 2025 10:18

Add border to the Previous button

82dbe0e

Make learn more optional prop

cf659cb

Adjust button styling

f105ec9

Ensure modal text can't be select

e242199

Remove focus outline

345f6c0

Kateryna Kodonenko added 4 commits March 28, 2025 10:43

Update copy on domains

851999f

Update first card copy

0d18f25

Move the Learn more higher

3ed66dc

Ensure the Next button is dropped down

16cc015

Kateryna Kodonenko added 2 commits March 28, 2025 12:49

Use CSS to adjust modal

23325da

Cleanup text

fe4daf8

bgrgicak reviewed Mar 28, 2025

View reviewed changes

Kateryna Kodonenko added 2 commits March 28, 2025 13:02

Remove hard coded buttons

33369f3

Simplify CSS

698f10c

Fix clamping

d7a2a47

ivan-ottinger self-requested a review March 28, 2025 12:30

ivan-ottinger approved these changes Mar 28, 2025

View reviewed changes

katinthehatsite merged commit cd5f2bb into trunk Mar 28, 2025
8 checks passed

katinthehatsite deleted the add/whats-new-modal-new-component branch March 28, 2025 12:36

katinthehatsite mentioned this pull request Mar 28, 2025

Studio: Improve Tailwind for what's new modal styling #1151

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Studio: Add new modal design #1128

Studio: Add new modal design #1128

katinthehatsite commented Mar 25, 2025 •

edited

Loading

katinthehatsite commented Mar 26, 2025

ivan-ottinger left a comment •

edited

Loading

wojtekn commented Mar 26, 2025

ivan-ottinger commented Mar 26, 2025

katinthehatsite commented Mar 26, 2025

ivan-ottinger commented Mar 26, 2025

katinthehatsite commented Mar 26, 2025

katinthehatsite commented Mar 26, 2025 •

edited

Loading

ivan-ottinger commented Mar 26, 2025

katinthehatsite commented Mar 26, 2025

ivan-ottinger commented Mar 26, 2025

wojtekn commented Mar 26, 2025

katinthehatsite commented Mar 27, 2025 •

edited

Loading

ivan-ottinger commented Mar 27, 2025

katinthehatsite commented Mar 28, 2025

bgrgicak commented Mar 28, 2025

katinthehatsite commented Mar 28, 2025

bgrgicak Mar 28, 2025

katinthehatsite Mar 28, 2025

ivan-ottinger commented Mar 28, 2025

katinthehatsite commented Mar 28, 2025 •

edited

Loading

ivan-ottinger commented Mar 28, 2025

Studio: Add new modal design #1128

Studio: Add new modal design #1128

Conversation

katinthehatsite commented Mar 25, 2025 • edited Loading

Related issues

Proposed Changes

Testing Instructions

Pre-merge Checklist

katinthehatsite commented Mar 26, 2025

ivan-ottinger left a comment • edited Loading

Choose a reason for hiding this comment

wojtekn commented Mar 26, 2025

ivan-ottinger commented Mar 26, 2025

katinthehatsite commented Mar 26, 2025

ivan-ottinger commented Mar 26, 2025

katinthehatsite commented Mar 26, 2025

katinthehatsite commented Mar 26, 2025 • edited Loading

ivan-ottinger commented Mar 26, 2025

katinthehatsite commented Mar 26, 2025

ivan-ottinger commented Mar 26, 2025

wojtekn commented Mar 26, 2025

katinthehatsite commented Mar 27, 2025 • edited Loading

ivan-ottinger commented Mar 27, 2025

katinthehatsite commented Mar 28, 2025

bgrgicak commented Mar 28, 2025

katinthehatsite commented Mar 28, 2025

bgrgicak Mar 28, 2025

Choose a reason for hiding this comment

katinthehatsite Mar 28, 2025

Choose a reason for hiding this comment

ivan-ottinger commented Mar 28, 2025

katinthehatsite commented Mar 28, 2025 • edited Loading

ivan-ottinger commented Mar 28, 2025

katinthehatsite commented Mar 25, 2025 •

edited

Loading

ivan-ottinger left a comment •

edited

Loading

katinthehatsite commented Mar 26, 2025 •

edited

Loading

katinthehatsite commented Mar 27, 2025 •

edited

Loading

katinthehatsite commented Mar 28, 2025 •

edited

Loading