Skip to content
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

fix(theme): bring back root classname helper and fix docs #1633

Merged
merged 5 commits into from
Jun 10, 2024
Merged

fix(theme): bring back root classname helper and fix docs #1633

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ad45af4
refactor(theme): move helpers into dedicated file
amje Jun 8, 2024
227b0e5
fix(theme): bring back root classname helper
amje Jun 8, 2024
f96c2d0
fix: review fixes
amje Jun 10, 2024
a4641c5
fix: review fixes 2
amje Jun 10, 2024
84bb600
fix: use dedicated exports entry for server utils
amje Jun 10, 2024
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
34 changes: 11 additions & 23 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,7 @@ import '@gravity-ui/uikit/styles/styles.css';
// ...
```

UIKit supports different themes: light, dark and their contrast variants. The theme must be applied. To do that either
wrap your app in `ThemeProvider`:
UIKit supports different themes: light, dark and their contrast variants. Your app must be rendered inside `ThemeProvider`:

```js
import {createRoot} from 'react-dom/client';
Expand All @@ -63,32 +62,21 @@ root.render(
);
```

or add specific CSS-classes to the root node:
It is possible to generate initial root CSS-classes during SSR to avoid theme flashing:

```html
<!-- index.html -->
```js
import {getRootClassName} from '@gravity-ui/uikit';

const theme = 'dark';
const rootClassName = getRootClassName({theme});

const html = `
<html>
<body>
<div id="root" class="g-root g-root_theme_light"></div>
<div id="root" class="${rootClassName}"></div>
</body>
</html>
```

it is possible to generate initial CSS-classes during SSR:

```js
import {getInitialRootClassName} from '@gravity-ui/uikit';

const theme = 'light';
const rootClassName = getInitialRootClassName({theme});
```

```js
// index.js
import {createRoot} from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);
`;
```

Also, there is a SCSS [mixins](styles/mixins.scss) file with useful helpers to use in your app.
Expand Down
13 changes: 13 additions & 0 deletions src/components/theme/dom-helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,3 +66,16 @@ export function updateBodyDirection(direction: Direction) {
bodyEl.setAttribute('dir', direction);
}
}

export const supportsMatchMedia =
typeof window !== 'undefined' && typeof window.matchMedia === 'function';

export const getDarkMediaMatch = () => window.matchMedia('(prefers-color-scheme: dark)');

export function getSystemTheme() {
if (supportsMatchMedia) {
return getDarkMediaMatch().matches ? 'dark' : 'light';
} else {
return 'light';
}
}
3 changes: 0 additions & 3 deletions src/components/theme/getDarkMediaMatch.ts
View file
Open in desktop

This file was deleted.

14 changes: 14 additions & 0 deletions src/components/theme/getRootClassName.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import {block} from '../utils/cn';

import {ROOT_CLASSNAME} from './constants';
import type {RealTheme} from './types';

const b = block(ROOT_CLASSNAME);

interface RootMods {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
interface RootMods {
interface RootMods {
nativeScrollbar?: boolean;

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We're planning to remove scroll customization, #1587

theme?: RealTheme;
}

export function getRootClassName({theme}: RootMods = {}, className?: string) {
return b({theme}, className);
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
return b({theme}, className);
return b({theme, 'native-scrollbar': nativeScrollbar}, className);

}
9 changes: 0 additions & 9 deletions src/components/theme/getSystemTheme.ts
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions src/components/theme/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,5 @@ export * from './withTheme';
export * from './withThemeValue';
export * from './withDirection';
export * from './getThemeType';
export * from './getRootClassName';
export type {Theme, RealTheme, ThemeType, Direction, ThemeContextProps} from './types';
3 changes: 1 addition & 2 deletions src/components/theme/useSystemTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';

import {getDarkMediaMatch, supportsMatchMedia} from './getDarkMediaMatch';
import {getSystemTheme} from './getSystemTheme';
import {getDarkMediaMatch, getSystemTheme, supportsMatchMedia} from './dom-helpers';
import type {ThemeType} from './types';

function addListener(
Expand Down
Loading