Open
Description
To document the new Panel component, all ZeroHeight packages need to be updated to the latest version. This update will break existing code examples and component recipes, so all examples will need to be refactored to align with the latest SDS changes.
1. Update Packages and Refactor Components
Update ZeroHeight packages to the latest version and refactor the Panel component and related examples.
The new code setting for ZeroHeight:
{
"react": "^18.2.0",
"@mui/lab": "^5.0.0-alpha.159",
"@mui/base": "^5.0.0-beta.30",
"react-dom": "^18.2.0",
"@emotion/css": "^11.11.2",
"@mui/material": "^5.15.3",
"react-virtual": "^2.10.4",
"@emotion/react": "11.10.4",
"@emotion/styled": "11.10.4",
"@faker-js/faker": "8.1.0",
"@czi-sds/components": "^21.7.0",
"@mui/icons-material": "^5.15.3",
"@tanstack/react-query": "^4.35.7",
"@tanstack/react-table": "8.10.3"
}The new structure for code examples and component recipes:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SDS Component Name</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div id="root"></div>
</body>
</html>style.css
body {
font-size: 13px;
font-weight: 400;
letter-spacing: 0.08px;
line-height: 20px;
text-transform: none;
font-family: "Inter", sans-serif;
}
h1 {
font-size: 1.5rem;
}
.app {
padding: 20px;
}index.tsx (Supports dark mode)
import React from "react";
import { createRoot } from "react-dom/client";
import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
import { Theme } from "@czi-sds/components";
import CssBaseline from "@mui/material/CssBaseline";
import useMediaQuery from "@mui/material/useMediaQuery";
import App from "./App";
const container = document.getElementById("root");
const root = createRoot(container!);
const RootApp = () => {
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
const theme = prefersDarkMode ? Theme("dark") : Theme("light");
return (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<EmotionThemeProvider theme={theme}>
<CssBaseline />
<App />
</EmotionThemeProvider>
</ThemeProvider>
</StyledEngineProvider>
);
};
root.render(
<React.StrictMode>
<RootApp />
</React.StrictMode>
);App.tsx
import { LoadingIndicator } from "@czi-sds/components";
import "./styles.css";
function App() {
return (
<div className="app">
// Code examples goes here
</div>
);
}
export default App;SDS Components to Refactor:
- Accordions
- Button
- Callout
- Control Inputs
- Dialog
- Dropdown Input
- Dropdown Menu
- Field Inputs
- Filters
- Link
- Lists
- Loading Indicator
- Navigation
- Notification
- Panel
- Segmented Control
- Tables
- Tabs
- Tags
- Theming
- Tooltips
2. Update Code Examples for Dark Mode
Modify code examples to support dark mode, adjusting automatically based on the browser’s color scheme.
SDS Components to Refactor:
- Accordions
- Button
- Callout
- Control Inputs
- Dialog
- Dropdown Input
- Dropdown Menu
- Field Inputs
- Filters
- Link
- Lists
- Loading Indicator
- Navigation
- Notification
- Panel
- Segmented Control
- Tables
- Tabs
- Tags
- Theming
- Tooltips
3. Update Descriptions and Prop Tables
Revise component descriptions and prop tables to reflect the new version of the Panel component and SDS.
SDS Components to Refactor:
- Accordions
- Banner
- Button
- ButtonIcon
- ButtonDropdown
- ButtonToggle
- Callout
- Control Inputs
- Dialog
- Dropdown Input
- Dropdown Menu
- Field Inputs
- Filters
- Link
- Lists
- Loading Indicator
- Navigation
- Notification
- Panel
- Segmented Control
- Tables
- Tabs
- Tags
- Theming
- Tooltips
4. Add documentation for new Components
New SDS components to document:
- ButtonToggle
- Breakpoints