[docs] New code blocks #764

vladmoroz · 2024-10-28T18:28:38Z

See https://deploy-preview-764--base-ui.netlify.app/new/components/dialog

mui-bot · 2024-10-28T18:31:55Z

Netlify deploy preview

https://deploy-preview-764--base-ui.netlify.app/

Generated by 🚫 dangerJS against 7b4a2d1

vladmoroz · 2024-10-28T18:59:57Z

docs/src/app/(content)/layout.tsx

+import 'docs/src/styles.css';
+import 'docs/src/styles/style.css';


This is temporary just to support the current setup in place, 'docs/src/styles/style.css' will go away eventually

vladmoroz · 2024-10-28T19:06:55Z

@michaldudak do you have a clue why docs in paths breaks deploys? 5c2549d

I was having minor problems with path resolution that were fixed by adding docs path to tsconfig, but Netlify builds break then

michaldudak · 2024-10-29T10:08:54Z

tsconfig fields aren't merged with parent config settings but replaced, so by adding compilerOptions.paths, you overwrote the paths defined in /tsconfig.base.json. Try adding the path to the base config instead.

michaldudak · 2024-10-29T13:47:27Z

The demos on old pages are getting messed up a bit. Would it be problematic to actually edit the styles on the existing pages instead of the /new ones?

michaldudak · 2024-10-29T14:17:53Z

docs/src/styles.css


 :root {
-  --color-content: #fff;
+  --font-mono: 'Menlo', 'Consolas', monospace;


Is the default font OK for Linux users?

Good point, I'll add a couple more fallbacks

michaldudak · 2024-10-29T14:22:29Z

docs/src/components/demo/loadDemo.ts

@@ -127,9 +126,9 @@ async function loadSimpleDemo(path: string, variantName: string): Promise<DemoVa
  const jsFilePath = mainFilePath.replace(/\.tsx?$/, '.js');
  if (mainFileLanguage === 'ts' && existsSync(jsFilePath)) {
    const jsContent = await readFile(jsFilePath, 'utf-8');
-    const jsPrettyPromise = await codeToHtml(jsContent, {
+    const jsPrettyPromise = highlighter.codeToHtml(jsContent, {


Suggested change

const jsPrettyPromise = highlighter.codeToHtml(jsContent, {

const jsPrettyContent = highlighter.codeToHtml(jsContent, {

vladmoroz · 2024-10-29T18:08:19Z

The demos on old pages are getting messed up a bit. Would it be problematic to actually edit the styles on the existing pages instead of the /new ones?

Oh man this annoys me the hell out of me, but I don't know if it's worth our time to refactor styles on the old pages. The root issue is that .Content ... selector that targets all the elements on the page indiscriminately and messes up styles of anything you put on the page. I think we'll have to live with it for a bit, because otherwise I just need to refactor a thing we won't use soon at all

Anything particular that's messed up and bothers you?

vladmoroz · 2024-10-29T18:13:03Z

@michaldudak looks like unrelated tests are failing after rebasing, I assume I can ignore them?

michaldudak · 2024-10-29T20:56:21Z

I think we'll have to live with it for a bit, because otherwise I just need to refactor a thing we won't use soon at all

Anything particular that's messed up and bothers you?

It's nothing blocking. The main issue is that demos render in dark mode (following my prefers-color-scheme), while the rest of the page is light, and they have some extra horizontal scrollbars.

Aside from this, I just realized it could be nice to detect cmd/ctrl + a when a demo source is focused and select just the demo source instead of the whole page (could be done in a separate PR, of course)

michaldudak · 2024-10-29T20:57:04Z

As for the broken tests - this looks like an issue after migrating to vitest. I'll see what's going on right away.

EDIT: likely fixed in #765

vladmoroz · 2024-10-30T14:38:44Z

Aside from this, I just realized it could be nice to detect cmd/ctrl + a when a demo source is focused and select just the demo source instead of the whole page (could be done in a separate PR, of course)

Agree, added that

As for the broken tests - this looks like an issue after migrating to vitest. I'll see what's going on right away.

EDIT: likely fixed in #765

Thanks!

michaldudak · 2024-10-30T22:20:35Z

One thing I'm missing is the Reset button. It used to come in handy to reload the demo to its initial state.

vladmoroz · 2024-10-31T12:58:25Z

One thing I'm missing is the Reset button. It used to come in handy to reload the demo to its initial state.

We decided to remove it, among other things, since there was too much going on in the toolbar. I agree it has its uses, but it's probably more so for us as we maintain and test the components in the docs way more often than the end user would.

vladmoroz added the docs Improvements or additions to the documentation label Oct 28, 2024

vladmoroz requested a review from colmtuite October 28, 2024 18:28

vladmoroz requested review from atomiks and michaldudak as code owners October 28, 2024 18:28

vladmoroz commented Oct 28, 2024

View reviewed changes

michaldudak reviewed Oct 29, 2024

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 29, 2024

vladmoroz force-pushed the code-blocks branch from 863d729 to 84f3a60 Compare October 29, 2024 18:02

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 29, 2024

michaldudak mentioned this pull request Oct 29, 2024

[test] Fix JSDOM detection in tests #765

Merged

vladmoroz added 9 commits October 30, 2024 15:33

Code blocks and all

c208abf

Fix collapsible

df576ab

Set aria-hidden

9a3c8cc

Sprinkle in a little user-select: none

e66b20d

Test theme

4f8ee3e

Design feedback

93604ed

ToolbarButton component

c1f357b

Accessibility and bug fixes

c5b6d6b

Fix outdated code

db534bc

vladmoroz force-pushed the code-blocks branch from 5dd6441 to db534bc Compare October 30, 2024 14:33

vladmoroz added 2 commits October 30, 2024 15:35

Add background color to code block pre

8d3f57a

Add color-foreground to code block pre

b933810

vladmoroz added 3 commits October 30, 2024 15:44

Tabs expand collapsible

802b1fc

Missing @layer

57ce431

Clean up syntax highlighting CSS

cf07621

colmtuite approved these changes Oct 30, 2024

View reviewed changes

border colors OCD

7b4a2d1

vladmoroz merged commit 8e8afd0 into mui:master Oct 30, 2024
18 checks passed

vladmoroz deleted the code-blocks branch October 30, 2024 15:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] New code blocks #764

[docs] New code blocks #764

vladmoroz commented Oct 28, 2024 •

edited

Loading

mui-bot commented Oct 28, 2024 •

edited

Loading

vladmoroz Oct 28, 2024

vladmoroz commented Oct 28, 2024 •

edited

Loading

michaldudak commented Oct 29, 2024

michaldudak commented Oct 29, 2024

michaldudak Oct 29, 2024

vladmoroz Oct 29, 2024

michaldudak Oct 29, 2024

vladmoroz commented Oct 29, 2024 •

edited

Loading

vladmoroz commented Oct 29, 2024 •

edited

Loading

michaldudak commented Oct 29, 2024

michaldudak commented Oct 29, 2024 •

edited

Loading

vladmoroz commented Oct 30, 2024

michaldudak commented Oct 30, 2024

vladmoroz commented Oct 31, 2024

		import 'docs/src/styles.css';
		import 'docs/src/styles/style.css';

	const jsPrettyPromise = highlighter.codeToHtml(jsContent, {
	const jsPrettyContent = highlighter.codeToHtml(jsContent, {

[docs] New code blocks #764

[docs] New code blocks #764

Conversation

vladmoroz commented Oct 28, 2024 • edited Loading

mui-bot commented Oct 28, 2024 • edited Loading

Netlify deploy preview

vladmoroz Oct 28, 2024

Choose a reason for hiding this comment

vladmoroz commented Oct 28, 2024 • edited Loading

michaldudak commented Oct 29, 2024

michaldudak commented Oct 29, 2024

michaldudak Oct 29, 2024

Choose a reason for hiding this comment

vladmoroz Oct 29, 2024

Choose a reason for hiding this comment

michaldudak Oct 29, 2024

Choose a reason for hiding this comment

vladmoroz commented Oct 29, 2024 • edited Loading

vladmoroz commented Oct 29, 2024 • edited Loading

michaldudak commented Oct 29, 2024

michaldudak commented Oct 29, 2024 • edited Loading

vladmoroz commented Oct 30, 2024

michaldudak commented Oct 30, 2024

vladmoroz commented Oct 31, 2024

vladmoroz commented Oct 28, 2024 •

edited

Loading

mui-bot commented Oct 28, 2024 •

edited

Loading

vladmoroz commented Oct 28, 2024 •

edited

Loading

vladmoroz commented Oct 29, 2024 •

edited

Loading

vladmoroz commented Oct 29, 2024 •

edited

Loading

michaldudak commented Oct 29, 2024 •

edited

Loading