houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorganize twenty-ui into best-practice component domains and per-component folders (#21745)

Browse Source 
Reorganizes `twenty-ui`'s component organization to follow how the best
UI libraries (MUI, Mantine, Base UI, Polaris) structure their source,
now that the package has stabilized.

**Taxonomy** — dissolves the meaningless `components/` junk-drawer and
the 107-file `display/` mega-category. New domains/subpaths:
`data-display`, `typography`, `icon`, `surfaces`; `feedback` and
`layout` absorb the rest (banners/callout/info + placeholders →
feedback; modal/card → surfaces; motion + separators → layout).

**Per-component layout** — every component is now
`<domain>/<ComponentName>/<ComponentName>.tsx` with colocated
styles/stories/types, `internal/` for private helpers and `parts/` for
re-exported compound sub-parts. The redundant inner `/components/` is
gone. `icon` and `json-visualizer` are kept as cohesive subsystems.

**Also:** adds a tree-shakeable root barrel (`import { Button } from
'twenty-ui'`), the generator now owns `individual-entry.ts`, and a real
barrel-leak bug is fixed (private `internals/` parts were leaking into
the public API).

Consumer imports (~1.2k files) and the `twenty-sdk` UI aggregator were
updated by codemod. The change is **export-neutral** except 16
intentionally-removed private internals symbols (all verified
unconsumed). Gates green: typecheck, lint, build, size-limit, storybook.


<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/21745?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
This commit is contained in:
Raphaël Bosi
2026-06-18 10:31:29 +02:00
committed by GitHub
parent 640a8e6ca6
commit 8034c7725f
1580 changed files with 2382 additions and 2404 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-ui/src/input/FloatingButton/FloatingButton.module.scss
+102
View File
@@ -0,0 +1,102 @@
// State rules below only assign CSS custom properties; the actual
// declarations live on the flat .button class so twenty-front
// styled(FloatingButton) overrides keep beating them at (0,1,0) specificity,
// exactly like the legacy single Linaria class did.
.button {
align-items: center;
backdrop-filter: var(--floating-button-backdrop-filter, none);
background: var(--t-background-primary);
border: var(--floating-button-border, none);
border-radius: var(--floating-button-radius, var(--t-border-radius-sm));
box-shadow: var(--floating-button-box-shadow, none);
color: var(--floating-button-color, var(--t-font-color-secondary));
cursor: pointer;
display: flex;
flex-direction: row;
font-family: var(--t-font-family);
font-weight: var(--t-font-weight-regular);
gap: var(--t-spacing-1);
padding: 0 var(--t-spacing-2);
text-decoration: none;
transition: background 0.1s ease;
white-space: nowrap;
&:hover {
background: var(
--floating-button-hover-bg,
var(--t-background-transparent-lighter)
);
}
&:active {
background: var(
--floating-button-active-bg,
var(--t-background-transparent-medium)
);
}
&:focus {
outline: none;
}
&[data-disabled] {
cursor: not-allowed;
}
}
.small {
height: 24px;
}
.medium {
height: 32px;
}
// position only reshapes the radius; standalone keeps the .button default.
.button[data-position='left'] {
--floating-button-radius: var(--t-border-radius-sm) 0px 0px
var(--t-border-radius-sm);
}
.button[data-position='middle'] {
--floating-button-radius: 0px;
}
.button[data-position='right'] {
--floating-button-radius: 0px var(--t-border-radius-sm)
var(--t-border-radius-sm) 0px;
}
.button[data-apply-blur] {
--floating-button-backdrop-filter: blur(20px);
}
// box-shadow matrix from the legacy nested ternary: shadow, focus, and
// shadow+focus — the combined rule comes last so it wins the cascade.
.button[data-apply-shadow] {
--floating-button-box-shadow:
0px 2px 4px 0px var(--t-background-transparent-light),
0px 0px 4px 0px var(--t-background-transparent-medium);
}
// focus is gated by !disabled in the component, like the legacy call-site.
.button[data-focus] {
--floating-button-border: 1px solid var(--t-color-blue);
--floating-button-box-shadow: 0 0 0 3px var(--t-color-blue3);
--floating-button-color: var(--t-color-blue);
}
.button[data-apply-shadow][data-focus] {
--floating-button-box-shadow:
0px 2px 4px 0px var(--t-background-transparent-light),
0px 0px 4px 0px var(--t-background-transparent-medium),
0 0 0 3px var(--t-color-blue3);
}
// disabled comes last: it beats focus in the legacy color ternary.
.button[data-disabled] {
--floating-button-color: var(--t-font-color-extra-light);
--floating-button-hover-bg: transparent;
--floating-button-active-bg: transparent;
}