feat(CubeLogo)!: replace CloudLogo with CubeLogo + CubeFullLogo - #1270
Merged
Conversation
BREAKING CHANGE: `CloudLogo` is removed. It shipped the previous brand artwork with hard-coded hexes (`#ff6492`, `#141446`, `#7a77ff`, `#a14474`) plus the retired "Cube Cloud" wordmark, so it could not adapt to a colour scheme or be recoloured — and nothing consumed it (verified: zero imports across cubejs-enterprise; the only greps there are the `HeaderCubeCloudLogo` data-qa string and unrelated `googleCloudLogo` SVG imports). Adds the marks cubejs-enterprise had inlined into its own `HomeLogoButton`, so the artwork lives in one place: - `CubeLogo` — square mark, `Icon`-based, `size` drives both axes. - `CubeFullLogo` — mark + wordmark on one canvas (`viewBox="0 0 98 28"`, the mark at x 0–28 and the wordmark at x 33–98, so the gap is part of the artwork). `size` sets the HEIGHT only; width follows the `98 / 28` ratio via `aspect-ratio`. `Icon` is square by default (`width: '1em 1em'`), so both the wrapper and the inner `svg` release width to `auto` — otherwise the wordmark gets squashed into a 1em box. Every path uses `currentColor`, so the marks inherit the surrounding text colour or take an explicit `color`, and fall back to `$icon-size` with no `size`. The mark is two different drawings, not one recoloured: the dark variant is filled differently to hold its weight against a dark surface. Both render and the `@dark` state swaps them in CSS, so there is no re-render, no scheme prop, and it is correct during SSR. Both paths are always in the DOM — assert on `[data-element="LightMark"]` / `[data-element="DarkMark"]`, not on a lone `path`. Both expose `role="img"` + `aria-label="Cube"`; the docs show handing the name to the control and marking the logo `aria-hidden` when the logo *is* the link. Verified: build clean, 1003 tests pass (6 new, asserting the scheme-swap markup, the accessible name, and that the full logo keeps `width: auto` with `aspect-ratio: 98 / 28` while the mark stays square), oxlint + prettier clean, size-limit passes (451.89 kB / 460 kB).
🦋 Changeset detectedLatest commit: 199f254 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📦 NPM canary releaseDeployed canary version 0.0.0-canary-722f90e. |
Contributor
🧪 Storybook is successfully deployed!
|
Contributor
🏋️ Size limit report
Click here if you want to find out what is changed in this build |
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Breaking:
CloudLogois removedIt shipped the previous brand artwork with hard-coded hexes (
#ff6492,#141446,#7a77ff,#a14474) and the retired "Cube Cloud" wordmark, so it could neither follow a colour scheme nor be recoloured.Nothing consumed it — verified zero imports across
cubejs-enterprise; the only greps there are theHeaderCubeCloudLogodata-qastring and unrelatedgoogleCloudLogoSVG imports.Added
The marks
cubejs-enterprisehad inlined into its ownHomeLogoButton, so the artwork now lives in one place:CubeLogosizedrives both axesCubeFullLogosizesets the height only, width follows the98 / 28ratioCubeFullLogoputs both marks on one canvas (viewBox="0 0 98 28"— mark at x 0–28, wordmark at x 33–98, so the gap is part of the artwork).Iconis square by default (width: '1em 1em'), so the wrapper and the innersvgrelease width toautowithaspect-ratiopinned — otherwise the wordmark is squashed into a 1em box. Don't set an explicitwidthon it.Both draw every path with
currentColor, so they inherit the surrounding text colour or take an explicitcolor, and fall back to$icon-sizewhensizeis omitted.Light/dark
The mark is two different drawings, not one recoloured — the dark variant is filled differently so it holds its weight against a dark surface. Both render and the
@darkstate swaps them in CSS: no re-render, no scheme prop, correct during SSR and before hydration.Consequence for tests: both paths are always in the DOM. Assert on
[data-element="LightMark"]/[data-element="DarkMark"], not on a lonepath.Migrating
The old component was a
Button; these are icons. Wrap it and keep the accessible name on the control:Both marks expose
role="img"+aria-label="Cube"on their own, for use outside an interactive element.Verification
Build clean · 1003 tests pass (6 new: scheme-swap markup, accessible name, and that the full logo keeps
width: auto+aspect-ratio: 98 / 28while the mark stays square) · oxlint + prettier clean · size-limit passes (451.89 kB / 460 kB).Independent of the pastel palette redesign (#1229), so it can land on its own —
cubejs-enterprisecan then drop its inlined copies and consume these.🤖 Generated with Claude Code
Note
Medium Risk
Major breaking API removal requires consumer migration for any CloudLogo usage; branding/header behavior changes if apps relied on the old button+SVG component.
Overview
Breaking: removes
CloudLogo(button-wrapped legacy “Cube Cloud” SVG with fixed brand hexes) and drops the oldcube-cloud-logo.svgasset.Adds
CubeLogoandCubeFullLogoasIcon-based marks:currentColorsizing viasize/$icon-size, withCubeFullLogousingaspect-ratio: 98/28so height-only sizing does not squash the wordmark. Light/dark cube artwork is swapped with@darkCSS onLightMark/DarkMarkpaths (SSR-safe, no scheme prop).Public API in
src/index.tsnow exportsCubeLogo/CubeFullLogoinstead ofCloudLogo. Docs, Storybook, tests, and a major changeset document migration: wrapCubeFullLogoinButton(or similar) witharia-labelon the control when the logo is interactive.Reviewed by Cursor Bugbot for commit 199f254. Bugbot is set up for automated code reviews on this repo. Configure here.