Docs separate css blocks by example #5050

snowystinger · 2023-09-08T06:47:15Z

Closes

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

Tracking

…s for it

rspbot · 2023-10-10T06:27:53Z

Build successful! 🎉

devongovett · 2023-10-10T18:34:40Z

I think the importing is good. I'm a little worried that we have maybe split things into too many layers though? Like maybe we could only use layers where we actually need them in order to solve an ordering issue and not all the time? I think the original intent was to split the CSS at the top of the page up into more sections further down, and the ordering issue might arise from that. But in many cases that isn't an actual problem so we don't really need layers then. For example we don't really need HCM to be on a separate layer in many of the pages. Maybe we can chat about it before you go too much further.

snowystinger · 2023-10-11T00:43:04Z

I think the importing is good. I'm a little worried that we have maybe split things into too many layers though? Like maybe we could only use layers where we actually need them in order to solve an ordering issue and not all the time? I think the original intent was to split the CSS at the top of the page up into more sections further down, and the ordering issue might arise from that. But in many cases that isn't an actual problem so we don't really need layers then. For example we don't really need HCM to be on a separate layer in many of the pages. Maybe we can chat about it before you go too much further.

So one thing I've noticed is that with layers, the order of imports matters, this makes sense because it determines the order in which layers are declared. However, if we don't have layers, then not only does order matter, but also specificity. I think it's better to only have one of those to worry about.

I think we could do a single layer per component. But I'm still worried about the amount of overriding we'll need.

rspbot · 2023-10-12T19:47:17Z

Build successful! 🎉

rspbot · 2023-10-17T04:09:31Z

Build successful! 🎉

rspbot · 2023-10-17T05:49:09Z

Build successful! 🎉

rspbot · 2023-10-17T20:15:39Z

Build successful! 🎉

rspbot · 2023-10-18T07:59:46Z

Build successful! 🎉

rspbot · 2023-10-18T08:02:42Z

Build successful! 🎉

yihuiliao

Only took a look at the components starting with T's so far

packages/react-aria-components/docs/TimeField.mdx

packages/react-aria-components/docs/TagGroup.mdx

# Conflicts: # packages/react-aria-components/docs/DropZone.mdx

rspbot · 2023-10-20T03:35:49Z

Build successful! 🎉

rspbot · 2023-10-20T03:42:23Z

Build successful! 🎉

packages/react-aria-components/docs/Checkbox.mdx

packages/react-aria-components/docs/TimeField.mdx

yihuiliao · 2023-10-20T23:48:07Z

packages/react-aria-components/docs/ComboBox.mdx

+@import './Checkbox.mdx';
+@import './ListBox.mdx';
+@import './Popover.mdx';
+```

 ```css


In the Reusable Wrapper section, the combobox looks like this when you have an item selected and are hovering over a different item.

But this is what it looks like in the prod docs:

Do we want the pink border around the item while hovering?

yeah, this one is just a little confusing because it shares styles with another custom wrapper example, and I think it probably shouldn't
maybe I need some way to not export this one, can do in follow up later
for now I've just done the minimal work to get it back to how it used to look

rspbot · 2023-10-23T03:05:03Z

Build successful! 🎉

packages/dev/parcel-transformer-mdx-docs/MDXTransformer.js

packages/react-aria-components/docs/DatePicker.mdx

yihuiliao · 2023-10-24T17:57:20Z

packages/react-aria-components/docs/ComboBox.mdx

+@import './Checkbox.mdx';
+@import './ListBox.mdx';
+@import './Popover.mdx';
+```

 ```css


Do we want the pink border around the item while hovering?

yihuiliao · 2023-10-24T18:06:19Z

packages/react-aria-components/docs/Tabs.mdx

@@ -691,39 +702,6 @@ import {Link} from 'react-aria-components';
 </Router>
 ```

-<details>


I do think the links look a bit large...maybe we should change it like you suggested

rspbot · 2023-10-25T01:15:08Z

Build successful! 🎉

rspbot · 2023-10-25T01:15:46Z

Build successful! 🎉

rspbot · 2023-10-25T01:28:20Z

Build successful! 🎉

rspbot · 2023-10-26T01:29:51Z

Build successful! 🎉

LFDanLu

LGTM, the shared css importing + block separation by variant makes the css more readable, especially for cases like Dialog/DatePicker/etc.

rspbot · 2023-10-26T21:09:53Z

Build successful! 🎉

rspbot · 2023-10-26T21:09:55Z

## API Changes

unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }

Separate css blocks by example

4fce432

snowystinger changed the title ~~Separate css blocks by example~~ Docs separate css blocks by example Sep 8, 2023

snowystinger added 16 commits September 9, 2023 10:58

import css from mdx files

1c919d9

namespace and overrides

df01106

move hcm to own layer

60d59f3

expand on comment

5996421

Merge branch 'main' into separate-css-for-docs

6e66ffb

Merge branch 'main' into separate-css-for-docs

77d92f6

import more components for Table docs and convert necessary component…

b5a7bf2

…s for it

save point

8e66a74

Finish off initial pass on components

d1f98b8

fix popover padding

f57abca

Fix recognition of css blocks

13b887e

fix more

35779bd

Merge branch 'main' into separate-css-for-docs

fa68b53

fix lint

801a8d5

Merge branch 'main' into separate-css-for-docs

7830d04

Fix ts

72d0676

remove some layers

4d42d4b

Merge branch 'main' into separate-css-for-docs

9d62316

reduce number of layers

57f046e

Finish first batch

cafb3bc

next set of completed

7f67242

snowystinger marked this pull request as ready for review October 18, 2023 07:49

Merge branch 'main' into separate-css-for-docs

3a57885

yihuiliao reviewed Oct 19, 2023

View reviewed changes

packages/react-aria-components/docs/TimeField.mdx Show resolved Hide resolved

packages/react-aria-components/docs/TagGroup.mdx Show resolved Hide resolved

snowystinger added 2 commits October 20, 2023 14:25

Fix timefield css

e8cc5b4

Merge branch 'main' into separate-css-for-docs

259f3c5

# Conflicts: # packages/react-aria-components/docs/DropZone.mdx

yihuiliao reviewed Oct 21, 2023

View reviewed changes

review feedback

358e9e0

yihuiliao reviewed Oct 24, 2023

View reviewed changes

snowystinger added 2 commits October 25, 2023 12:05

review comments

495626e

review comment

bf0093a

fix extra ring

dfe7d38

yihuiliao approved these changes Oct 25, 2023

View reviewed changes

Merge branch 'main' into separate-css-for-docs

4113e17

LFDanLu approved these changes Oct 26, 2023

View reviewed changes

devongovett approved these changes Oct 26, 2023

View reviewed changes

Merge branch 'main' into separate-css-for-docs

1708a9f

snowystinger merged commit 02fa455 into main Oct 26, 2023
26 checks passed

snowystinger deleted the separate-css-for-docs branch October 26, 2023 21:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Docs separate css blocks by example #5050

Docs separate css blocks by example #5050

snowystinger commented Sep 8, 2023 •

edited

Loading

rspbot commented Oct 10, 2023

devongovett commented Oct 10, 2023

snowystinger commented Oct 11, 2023

rspbot commented Oct 12, 2023

rspbot commented Oct 17, 2023

rspbot commented Oct 17, 2023

rspbot commented Oct 17, 2023

rspbot commented Oct 18, 2023

rspbot commented Oct 18, 2023

yihuiliao left a comment •

edited

Loading

rspbot commented Oct 20, 2023

rspbot commented Oct 20, 2023

yihuiliao Oct 20, 2023

yihuiliao Oct 24, 2023

snowystinger Oct 25, 2023

rspbot commented Oct 23, 2023

yihuiliao Oct 24, 2023

yihuiliao Oct 24, 2023

rspbot commented Oct 25, 2023

rspbot commented Oct 25, 2023

rspbot commented Oct 25, 2023

rspbot commented Oct 26, 2023

LFDanLu left a comment

rspbot commented Oct 26, 2023

rspbot commented Oct 26, 2023

Docs separate css blocks by example #5050

Docs separate css blocks by example #5050

Conversation

snowystinger commented Sep 8, 2023 • edited Loading

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Tracking

rspbot commented Oct 10, 2023

devongovett commented Oct 10, 2023

snowystinger commented Oct 11, 2023

rspbot commented Oct 12, 2023

rspbot commented Oct 17, 2023

rspbot commented Oct 17, 2023

rspbot commented Oct 17, 2023

rspbot commented Oct 18, 2023

rspbot commented Oct 18, 2023

yihuiliao left a comment • edited Loading

Choose a reason for hiding this comment

rspbot commented Oct 20, 2023

rspbot commented Oct 20, 2023

yihuiliao Oct 20, 2023

Choose a reason for hiding this comment

yihuiliao Oct 24, 2023

Choose a reason for hiding this comment

snowystinger Oct 25, 2023

Choose a reason for hiding this comment

rspbot commented Oct 23, 2023

yihuiliao Oct 24, 2023

Choose a reason for hiding this comment

yihuiliao Oct 24, 2023

Choose a reason for hiding this comment

rspbot commented Oct 25, 2023

rspbot commented Oct 25, 2023

rspbot commented Oct 25, 2023

rspbot commented Oct 26, 2023

LFDanLu left a comment

Choose a reason for hiding this comment

rspbot commented Oct 26, 2023

rspbot commented Oct 26, 2023

snowystinger commented Sep 8, 2023 •

edited

Loading

yihuiliao left a comment •

edited

Loading