Adds new USP component formatting #3138

franrob-projects · 2026-01-21T17:29:38Z

Description

This PR adds the formatting to the VALs needed for the USB call outs. The USB call outs on other branches will be merged here.

I have added just one placeholder USP so that you can have a look. I will delete this in a future -- fixup once approved.

Figma file: https://www.figma.com/design/HuzNhcZmPY9vnL6tVLOPXg/WIP-Docs-Components?node-id=733-3983&p=f

Checklist

Commits have been rebased.
Linting has been run against the changed file(s).
The PR adheres to the writing style guide and contribution guide.

coderabbitai · 2026-01-21T17:29:51Z

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

GregHolmes · 2026-01-21T17:37:42Z

src/pages/docs/platform/index.mdx

 meta_description: "An introduction to Ably and its highly-available, scalable platform."
 ---

+import { Banner } from '../../../components/blocks/banners'


We shouldn't be using it like this. Have a look at how If component is included in the MDXWrapper, that way you don't need the import at the top of every file that uses the Banner.

https://github.com/ably/docs/blob/main/src/components/Layout/MDXWrapper.tsx

Cool.. I've added:

import { Banner } from '../blocks/banners';

to src/components/Layout/MDXWrapper.tsx

GregHolmes · 2026-01-21T17:52:22Z

The test failed due to prettier:

/home/circleci/project/src/components/blocks/banners/Banner.tsx
  19:23  error  Insert `⏎`  prettier/prettier

/home/circleci/project/src/components/blocks/banners/index.tsx
  1:46  error  Insert `⏎`  prettier/prettier```

Your IDE should highlight these, if not, we can configure it with a plugin tomorrow.

GregHolmes

Looks good! There are a couple of comments though.

The header of the Aside shouldn't be a header but instead slightly increased and boldened text.

The padding in the class of the Aside is too big compared to the design. I think once these changes are made it'll look clean on the page!

GregHolmes · 2026-01-22T13:18:04Z

src/components/Layout/mdx/Admonition.tsx

+        )}
+      >
+        <div className="flex-1 mt-1.5 mb-0.25">
+          {headline && <h3 className="ui-text-h3 font-bold text-neutral-1300 mb-3">{headline}</h3>}


I don't think this is meant to be a header. From what I recall it was the same size as the text (or ever so slightly bigger than normal text) and boldened. H3 makes it stick out way too much on the page.

Font size of header text is 16 where normal text is 14.

GregHolmes · 2026-01-22T13:24:16Z

src/components/Layout/mdx/Admonition.tsx

+        {...rest}
+        data-type={dataType}
+        className={cn(
+          'border-l-[1.5px] px-6 pt-2.5 pb-1.5 my-6 rounded-r-lg w-full',


Padding top is currently 0.625rem, which equates to 10px. The design's one is 8px for example.

I think looking at the Figma designs it should be more: 'border-l-[1.5px] px-6 py-2 my-6 rounded-r-lg w-full gap-1',

yeah impimented that and it looked way off

I will re-do and see if shows any better but i did have to have a play around to make it look half decent

direct from design

alot more space at the bottom

Maybe it's because you've got the header as a header and not 16font size?

But screenshot below is from design. If the padding and styling is exactly as they've got in Figma, it'll look like this.

@GregHolmes

i've revered the others back...

but i've just reducd this:

'border-l-[1px] px-6 py-1 my-6 rounded-r-lg w-full gap-1',

its as close as i can get to the origianal

franrob-projects · 2026-01-26T12:10:24Z

@m-hulbert @GregHolmes

i think we are here on this one??

i reduced the bottom padding within the component...

<div className="flex-1 mt-1.5 mb-0.25">

to...

<div className="flex-1 mt-1.5 mb-0">

It now looks like this 👇

- Add banner variant to Admonition component with headline support and reduced bottom padding (mb-0) - Add banner aside to platform index page with durability message - Banner uses orange left border (#FF5416) and transparent background - Special rendering logic for banner variant with headline and content sections 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

- Add Banner component with styling and MDX support - Restore evidence aside support in Admonition component - Update MDXWrapper to include Banner in MDX components - Fix Aside component to properly support evidence type with custom rendering 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

franrob-projects requested review from GregHolmes and m-hulbert January 21, 2026 17:29

franrob-projects marked this pull request as ready for review January 21, 2026 17:31

franrob-projects added the review-app Create a Heroku review app label Jan 21, 2026

ably-ci temporarily deployed to ably-docs-ftf-522-adds--tba6w9 January 21, 2026 17:31 Inactive

GregHolmes requested changes Jan 21, 2026

View reviewed changes

franrob-projects temporarily deployed to ably-docs-ftf-522-adds--tba6w9 January 22, 2026 09:41 Inactive

franrob-projects requested a review from GregHolmes January 22, 2026 09:51

franrob-projects had a problem deploying to ably-docs-ftf-522-adds--tba6w9 January 22, 2026 11:29 Failure

franrob-projects temporarily deployed to ably-docs-ftf-522-adds--tba6w9 January 22, 2026 11:59 Inactive

GregHolmes requested changes Jan 22, 2026

View reviewed changes

franrob-projects requested a review from GregHolmes January 22, 2026 13:53

franrob-projects temporarily deployed to ably-docs-ftf-522-adds--tba6w9 January 22, 2026 15:16 Inactive

franrob-projects temporarily deployed to ably-docs-ftf-522-adds--tba6w9 January 22, 2026 16:54 Inactive

m-hulbert force-pushed the FTF-522-adds-new-component-from-figma branch from 6e7fc72 to 7911567 Compare January 26, 2026 11:21

m-hulbert temporarily deployed to ably-docs-ftf-522-adds--tba6w9 January 26, 2026 11:21 Inactive

franrob-projects force-pushed the FTF-522-adds-new-component-from-figma branch from 7911567 to 273a4e6 Compare January 26, 2026 12:11

franrob-projects temporarily deployed to ably-docs-ftf-522-adds--tba6w9 January 26, 2026 12:12 Inactive

franrob-projects force-pushed the FTF-522-adds-new-component-from-figma branch from 273a4e6 to f7c337b Compare January 26, 2026 12:12

franrob-projects temporarily deployed to ably-docs-ftf-522-adds--tba6w9 January 26, 2026 12:13 Inactive

franrob-projects force-pushed the FTF-522-adds-new-component-from-figma branch from f7c337b to c09540d Compare January 26, 2026 12:13

franrob-projects temporarily deployed to ably-docs-ftf-522-adds--tba6w9 January 26, 2026 12:14 Inactive

franrob-projects force-pushed the FTF-522-adds-new-component-from-figma branch from 320afad to b4e8302 Compare January 26, 2026 12:16

franrob-projects temporarily deployed to ably-docs-ftf-522-adds--tba6w9 January 26, 2026 12:16 Inactive

Merge branch 'main' into FTF-522-adds-new-component-from-figma

8f50d36

franrob-projects temporarily deployed to ably-docs-ftf-522-adds--tba6w9 January 26, 2026 12:24 Inactive

franrob-projects closed this Jan 26, 2026

franrob-projects force-pushed the FTF-522-adds-new-component-from-figma branch from 8f50d36 to cd0dc74 Compare January 26, 2026 15:05

franrob-projects temporarily deployed to ably-docs-ftf-522-adds--tba6w9 January 26, 2026 15:06 Inactive

franrob-projects and others added 2 commits January 26, 2026 16:25

Adds ups aside

6fcffc9

franrob-projects reopened this Jan 26, 2026

franrob-projects added review-app Create a Heroku review app and removed review-app Create a Heroku review app labels Jan 26, 2026

ably-ci deployed to ably-docs-ftf-522-adds--tuyxa5 January 26, 2026 17:14 View deployment

Adds new USP component formatting #3138

Are you sure you want to change the base?

Adds new USP component formatting #3138

Conversation

franrob-projects commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Uh oh!

coderabbitai bot commented Jan 21, 2026

Review skipped

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

GregHolmes commented Jan 21, 2026

Uh oh!

GregHolmes left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

franrob-projects commented Jan 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

5 participants

franrob-projects commented Jan 21, 2026 •

edited

Loading