Skip to content

Commit

Permalink
Set MDX tables to full width + fix visual regressions (#605)
Browse files Browse the repository at this point in the history
* MdxProvider: Set `Table`s to `overflowX="scroll" width="full"`

* Try to fix up snapshot

* CodeBlock: Restore `bash` and `shell` syntax highlighting

* mermaid: Colour flowchart circle nodes

* Table: Restore `type="stripe"` styling

* Update tame-plants-float.md
  • Loading branch information
72636c authored Jan 24, 2024
1 parent f4ce024 commit 8b0efaf
Show file tree
Hide file tree
Showing 32 changed files with 84 additions and 47 deletions.
5 changes: 5 additions & 0 deletions .changeset/metal-emus-know.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'scoobie': patch
---

Table: Restore `type="stripe"` styling
5 changes: 5 additions & 0 deletions .changeset/swift-balloons-kick.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'scoobie': patch
---

CodeBlock: Restore `bash` and `shell` syntax highlighting
5 changes: 5 additions & 0 deletions .changeset/tame-plants-float.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'scoobie': minor
---

MdxProvider: Set `Table`s to `overflowX="scroll" width="full"`
5 changes: 5 additions & 0 deletions .changeset/twenty-months-crash.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'scoobie': patch
---

mermaid: Colour flowchart circle nodes
2 changes: 0 additions & 2 deletions .github/workflows/snapshot.yml
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,6 @@ jobs:

- name: Publish to npm
uses: seek-oss/changesets-snapshot@v0
with:
pre-publish: yarn build
env:
GITHUB_TOKEN: ${{ secrets.SEEK_OSS_CI_GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.SEEK_OSS_CI_NPM_TOKEN }}
4 changes: 2 additions & 2 deletions .loki/reference/chrome_laptop_MDX_MdxProvider_Blockquote.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions .loki/reference/chrome_laptop_MDX_MdxProvider_Code.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions .loki/reference/chrome_laptop_MDX_MdxProvider_Heading.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions .loki/reference/chrome_laptop_MDX_MdxProvider_Lists.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions .loki/reference/chrome_laptop_MDX_MdxProvider_Mermaid_ER.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions .loki/reference/chrome_laptop_MDX_MdxProvider_Table.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions .loki/reference/chrome_laptop_Standalone_CodeBlock_Multi.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions .loki/reference/chrome_laptop_Standalone_CodeBlock_Single.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions .loki/reference/chrome_laptop_Standalone_Table_Defaults.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions .loki/reference/chrome_laptop_Standalone_Table_Stripe.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions .loki/reference/chrome_laptop_Standalone_Table_Subtle.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions remark/mermaid/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ g.node foreignObject.label {
}

circle.label-container,
.node circle,
.node path,
.node polygon,
.node rect {
Expand Down
13 changes: 8 additions & 5 deletions src/private/Prism.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
import { Prism } from 'prism-react-renderer';
// @ts-ignore
// @ts-expect-error
import bashLang from 'refractor/lang/bash';
// @ts-expect-error
import csharpLang from 'refractor/lang/csharp';
// @ts-ignore
// @ts-expect-error
import diffLang from 'refractor/lang/diff';
// @ts-ignore
// @ts-expect-error
import httpLang from 'refractor/lang/http';
// @ts-ignore
// @ts-expect-error
import jsonLang from 'refractor/lang/json';
// @ts-ignore
// @ts-expect-error
import splunkSplLang from 'refractor/lang/splunk-spl';

bashLang(Prism);
csharpLang(Prism);
diffLang(Prism);
httpLang(Prism);
Expand Down
4 changes: 0 additions & 4 deletions src/private/Table.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,3 @@ export const table = style({
borderCollapse: 'separate',
borderSpacing: 0,
});

export const tableWrapper = style({
overflowX: 'auto',
});
6 changes: 3 additions & 3 deletions src/private/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,8 @@ export const MdxTable = ({
type,
}}
>
<Box className={styles.tableWrapper}>
<BaseTable>{children}</BaseTable>
</Box>
<BaseTable overflowX="scroll" width="full">
{children}
</BaseTable>
</TableContext.Provider>
);
5 changes: 3 additions & 2 deletions src/private/TableRow.css.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { style, styleVariants } from '@vanilla-extract/css';
import { vars } from 'braid-design-system/css';

import { codeBackgroundColor } from '../../styles';

export const tableRow = styleVariants({
stripe: {
selectors: {
'tbody &:nth-child(odd)': {
backgroundColor: vars.backgroundColor.body,
backgroundColor: codeBackgroundColor,
},
},
},
Expand Down
2 changes: 1 addition & 1 deletion styles/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Braid grey.50
// https://github.com/seek-oss/braid-design-system/blob/v31.14.0/lib/color/palette.ts
// https://github.com/seek-oss/braid-design-system/blob/braid-design-system%4032.14.4/packages/braid-design-system/src/lib/color/palette.ts#L13
export const codeBackgroundColor = '#F7F8FB';

// SEEK's corporate font + GitHub defaults
Expand Down

0 comments on commit 8b0efaf

Please sign in to comment.