Replace MUI `TextField` in the Form Storybook stories with `FormField`,
wired through Formik and `getFormHelpers` so the examples match how real
forms use the layout components.
Tiny simple change just moving us over to Tailwind instead of MUI for
`<Form />`. Functionally equivalent minus the mismatch between `md` in
`Tailwind` (`≥ 768px`) and `MUI` (`≥ 900px`).
ref DEVEX-567
Fixes a bug I noticed where #26881 claims to have made the template
builder's `SelectionSummary` sidebar sticky-positioned, but the sidebar
position wasn't actually sticky in practice:
## template builder's `SelectionSummary` (top right)
### before
https://github.com/user-attachments/assets/1e9360b5-4b0e-45b4-a859-f8edab51add7
### after
https://github.com/user-attachments/assets/3cee75e9-9813-401e-9922-d2563185f8f5
---
Why I removed `overflow-y-auto` from `#main-content`:
>`position: sticky` resolves against the nearest ancestor scroll
container — any ancestor whose overflow is not visible. `#main-content`
had `overflow-y-auto`, so it _was_ that container for the sidebar. But
because the layout wrapper is `min-h-screen`, `<main>` grows to fit its
content and never actually scrolls — the window scrolls. So the sidebar
was pinning relative to a container that never moves → no effect.
That was necessary for the main goal of this PR, which was to fix sticky
positioning for the template builder's `SelectionSummary` sidebar.
However, removing that style from `#main-content` affected 2 other
sticky-positioned elements within the site:
>Two other pages have sticky elements that, like our sidebar, were
resolving against the non-scrolling `<main>` and were therefore
effectively inert:
>- CreateWorkspacePageView.tsx:397 — `sticky top-5` side panel
>- modules/templates/TemplateFiles/TemplateFiles.tsx:64 — `sticky top-8`
file tree
^Like `SelectionSummary`, these 2 elements hadn't been behaving with
sticky positioning as expected; they would just scroll away past the top
of the screen.
For all 3 of these sticky elements, since their `top` is now relative to
the window instead of `#main-content`, they have to be positioned
farther downward so that they don't get covered by the navbar.
## `TemplateFiles`' `TemplateFileTree` (top left)
### before
https://github.com/user-attachments/assets/ee79ea36-1a47-4b1b-86ef-c65b493ea455
### after
https://github.com/user-attachments/assets/a1b0a949-b5e3-4434-acaa-ab24e82b1669
## `CreateWorkspacePageView`'s "Go back" button (top left)
### before
https://github.com/user-attachments/assets/00b076f6-8e55-4a96-8b92-d33d92c85334
### after
https://github.com/user-attachments/assets/10ae05e1-3112-4dfc-84b4-2c44fee23e06
co-authored with Claude Code
---------
Co-authored-by: Jeremy Ruppel <jeremyruppel@users.noreply.github.com>
This pull-request looks at all (most) of our instances of `const styles
= { ... }` and attempts to smooth them down into the minimum viable
Tailwind equivalent 🙂
This is a significant PR that will impact many parts of the UI, so I’d
like to ask you, @jaaydenh, for a very thorough review of the Storybook
stories on Chromatic. I know it’s a bit of a hassle with around 180
stories affected, but it’s all for a good cause 💪
Main changes:
- Update the `Button` component to match the [new buttons
design](https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=3-1756&p=f&m=dev).
- Update forms and dialogs to use the new `Button` component.
Related to https://github.com/coder/coder/issues/14978
* chore: finish draft work for FeatureBadge component
* fix: add visually-hidden helper text for screen readers
* chore: add stories for highlighted state
* fix: update base styles
* chore: remove debug display option
* chore: update Popover to propagate events
* wip: commit progress on FeatureBadge update
* wip: commit more progress
* chore: update tag definitions to satify Biome
* chore: update all colors for preview role
* fix: make sure badge shows as hovered while inside tooltip
* wip: commit progress on adding story for controlled variant
* fix: sort imports
* refactor: change component API to be more obvious/ergonomic
* fix: add biome-ignore comments to more base files
* fix: update import order again
* chore: revert biome-ignore comment
* chore: update body text for tooltip
* chore: update dark preivew role to use sky palette
* chore: update color palettes for light/darkBlue themes
* chore: add beta badge to organizations subheader
* chore: add beta badge to organizations settings page
* chore: beef up font weight for form header
* fix: update text contrast for org menu list
* chore: add beta badge to deployment dropdown
* fix: run biome on imports
* chore: remove API for controlling FeatureBadge hover styling externally
* chore: add xs size for badge
* fix: update font weight for xs feature badges
* chore: add beta badges to all org headers
* fix: turn badges and tooltips into separate concerns
* fix: update hover styling
* docs: update wording on comment
* fix: apply formatting
* chore: rename FeatureBadge to FeatureStageBadge
* refactor: redefine FeatureStageBadge
* chore: update stories
* fix: add blur behavior to popover
* chore: revert theme colors
* chore: create featureStage branding namespace
* fix: make sure cleanup function is set up properly
* docs: update wording on comment for clarity
* refactor: move styles down
* add token actions
* added basic token form
* removed token switch
* refined date field
* limiting lifetime days to maxTokenLifetime
* broke apart files
* added loader and error
* fixed form layout
* added some unit tests
* fixed be tests
* no authorize check
* Rename CloseIcon
* Rename FileCopyIcon, take out of index
* Rename LogoutIcon and remove from index
* Delete icons index files
* Add icon stories
* Lint
* Remove wrapper from SignInForm
* Spruce up tests
* Add util for form props
* Add back trim
* Add unit tests
* Lint, type fixes
* Pascal case for language
* Arrow functions
* Target text in e2e
This refactoring re-organizes the `site` folder to have a nested `src` folder.
Originally, [we wanted to keep the directory structure shallow](https://github.com/coder/coder/pull/8#issuecomment-1009578910) - but there were two points that motivated this change to introduce the `src` level.
1. We have several non-`src` folders now (`e2e`, `static`, `html_templates`, `.storybook`)
2. Having a `src` folder makes it easier to run XState Typegen
So given those two data points - I believe it makes sense to revisit that and introduce a `src` folder.
Jake Howell