Skip to content

docs: add v4 release banner and changelog entry #3337

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
talkor merged 2 commits into from
Mar 18, 2026
+121 −0
Merged

docs: add v4 release banner and changelog entry #3337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b527750
docs: changelog
talkor Mar 18, 2026
c298eaf
docs: add v4 release banner and changelog entry
talkor Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions packages/core/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,23 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

# [4.0.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.88.0...@vibe/core@4.0.0) (2026-03-18)


### BREAKING CHANGES

This release contains breaking changes across components, APIs, and styling. Key highlights:

- **Enum removal**: Removed all deprecated enum exports and static properties across 30+ components. Use string literals instead. Run `npx @vibe/codemod --migration v4` to migrate automatically.
- **Dropdown**: Complete API rewrite replacing the react-select-based implementation with a new custom component.
- **Dialog**: Migrated from Popper.js to Floating UI (`@floating-ui/react-dom`). The `modifiers` prop is replaced by `middleware`.
- **AttentionBox**: New component promoted from `@vibe/core/next`. Legacy props removed; type values renamed.
- **Icon**: Props renamed — `iconLabel` → `label`, `iconType` → `type`, `iconSize` → `size`.
- **TipseenImage**: Removed — use `TipseenMedia` with an `<img>` child instead.

For the full list of breaking changes and migration instructions, see the [v4 migration guide](https://vibe.monday.com/?path=/docs/migration-guide--docs).


# [3.88.0](https://github.com/mondaycom/vibe/compare/@vibe/core@3.87.0...@vibe/core@3.88.0) (2026-03-11)


Expand Down
2 changes: 2 additions & 0 deletions packages/docs/.storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ import Footer from "../src/layout/footer/Footer";
import StorybookTableOfContents from "../src/layout/toc/TableOfContents";
import { paintToConsole } from "./art";
import FloatingObjects from "../src/pages/welcome/hero/FloatingObjects";
import Vibe4Banner from "../src/pages/welcome/banner/Vibe4Banner";

const fontLoader = async () => ({
fonts: await document.fonts.ready // Fixing Chromatic tests flakiness - taking snapshots after fonts are loaded
Expand All @@ -70,6 +71,7 @@ const preview: Preview = {

return (
<>
{isWelcomePage && <Vibe4Banner />}
{isWelcomePage && <FloatingObjects />}
Comment on lines 71 to 75
Copy link
Copy Markdown
Contributor

@qodo-free-for-open-source-projects qodo-free-for-open-source-projects bot Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

2. Welcome detection may fail 🐞 Bug ✓ Correctness

Vibe4Banner rendering depends on isWelcomePage checking
window.location.href.includes("id=welcome"), which won’t match the repo’s common
/?path=/docs/... routing; the banner can silently never render on the Welcome docs page. This
breaks the PR’s intended behavior (banner shown on Welcome only) for path-based navigation.
Agent Prompt 
## Issue description
`Vibe4Banner` is currently shown only when `window.location.href.includes("id=welcome")`. In this repo, many internal Storybook links use `/?path=/docs/...`, so Welcome can be reached without any `id=...` query param. As a result, the banner can fail to appear even on the Welcome page.

## Issue Context
- You already have access to the Storybook `context` object in the docs `container`.
- The codebase uses `/?path=/docs/...` links for internal navigation.

## Fix Focus Areas
- packages/docs/.storybook/preview.tsx[69-83]

## Suggested direction
Prefer using `context` (e.g., `context.title === "Welcome"`, `context.id === "welcome--docs"`, and/or `context.viewMode === "docs"`) instead of parsing `window.location.href`. If you want to preserve compatibility with older URL formats, you can support both by checking `URLSearchParams` for `id` and `path`.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

<DocsContainer context={context}>
<Unstyled>{children}</Unstyled>
Expand Down
76 changes: 76 additions & 0 deletions packages/docs/src/pages/welcome/banner/Vibe4Banner.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
.vibe4Banner {
padding: var(--space-16);
display: flex;
align-items: center;
justify-content: center;
margin: var(--space-8);
border-radius: var(--border-radius-medium);
position: relative;
overflow: hidden;

.content {
display: flex;
align-items: center;
gap: var(--space-8);
z-index: 1;

.text {
color: #323338;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 100%;
letter-spacing: -0.12px;
display: flex;
align-items: center;
align-self: center;
gap: var(--space-4);
}

.title {
color: #323338;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 100%;
letter-spacing: -0.12px;
}

.link {
color: #323338;
text-decoration: underline;
font-size: 16px;
font-weight: 400;

&:hover {
opacity: 0.7;
}
}
}

.bubble1 {
width: 307.5px;
height: 232.5px;
position: absolute;
right: 518.5px;
bottom: -184.5px;
border-radius: 307.5px;
opacity: 0.4;
background: #d4b8ff;
filter: blur(120px);
}

.bubble2 {
width: 307.5px;
height: 232.5px;
position: absolute;
left: 358px;
top: -194px;
border-radius: 307.5px;
opacity: 0.4;
background: #90d0ff;
filter: blur(120px);
}
}
26 changes: 26 additions & 0 deletions packages/docs/src/pages/welcome/banner/Vibe4Banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from "react";
import styles from "./Vibe4Banner.module.scss";

const Vibe4Banner: React.FC = () => {
return (
<div className={styles.vibe4Banner}>
Copy link
Copy Markdown
Contributor

@qodo-free-for-open-source-projects qodo-free-for-open-source-projects bot Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

1. vibe4banner missing data-vibe 📘 Rule violation ✓ Correctness

The Vibe4Banner root element is missing the required [data-vibe] attribute, reducing consistency
for test automation and DOM identification. This violates the component root-attribute requirement.
Agent Prompt 
## Issue description
`Vibe4Banner` is missing the required `[data-vibe]` attribute on its root element.

## Issue Context
The compliance checklist requires all components to render a root element that includes `[data-vibe]` for consistent DOM identification and testing.

## Fix Focus Areas
- packages/docs/src/pages/welcome/banner/Vibe4Banner.tsx[6-22]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

<div className={styles.bubble1}></div>
<div className={styles.bubble2}></div>
<div className={styles.content}>
<div className={styles.text}>
<span className={styles.title}>Vibe 4 is here!</span> Check out the{" "}
<a
href="https://vibe.monday.com/?path=/docs/migration-guide--docs"
target="_blank"
rel="noreferrer"
className={styles.link}
>
migration guide
</a>
</div>
</div>
</div>
);
};

export default Vibe4Banner;
Loading