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

Remove "Status" sections, migration guides from component pattern-library pages #890

Merged
merged 26 commits into from
Mar 1, 2023
Merged

Remove "Status" sections, migration guides from component pattern-library pages #890

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
c88bcf4
Convert `AspectRatio` page to TSX
lyzadanger Feb 28, 2023
5cb74d2
Remove migration/status from `AspectRatio` pattern-library docs
lyzadanger Feb 28, 2023
2177b44
Remove migration/status from `DataTable` pattern-library documentation
lyzadanger Feb 28, 2023
eb2e6fe
Convert Icons pattern-library page to TSX
lyzadanger Feb 28, 2023
936b495
Remove status/migration from Icons pattern-library documentation
lyzadanger Feb 28, 2023
7109e33
Convert `Scrollbox` pattern-library page to TSX
lyzadanger Feb 28, 2023
781031c
Remove status/migration sections from `Scroll*` pattern-library docs
lyzadanger Feb 28, 2023
29fe199
Remove status section from `Table*` pattern-library docs
lyzadanger Feb 28, 2023
2cc5b0d
Convert `Thumbnail` pattern-library docs to TSX
lyzadanger Feb 28, 2023
30acca7
Remove status/migration sections from `Thumbnail` pattern-library docs
lyzadanger Feb 28, 2023
682d370
Remove migration/status sections from `Modal` pattern-library docs
lyzadanger Feb 28, 2023
5c79654
Remove migration/status sections from `Spinner` pattern-library docs
lyzadanger Feb 28, 2023
401a496
Convert `Button` pattern-library page to TSX
lyzadanger Feb 28, 2023
018a769
Remove status/migrations section from `Button` pattern-library docs
lyzadanger Feb 28, 2023
b69af55
Convert Checkbox pattern-library docs to TSX
lyzadanger Feb 28, 2023
7555c97
Remove status/migration sections from `Checkbox` pattern-library docs
lyzadanger Feb 28, 2023
0705f3c
Convert `Input` pattern library docs to TSX and remove Status section
lyzadanger Mar 1, 2023
fcb8ccf
Remove status section from `InputGroup` pattern-library docs
lyzadanger Mar 1, 2023
9d7f825
Remove status section from `Select` pattern-library docs
lyzadanger Mar 1, 2023
a12e433
Remove status/migration sections from `Card` pattern-library docs
lyzadanger Mar 1, 2023
e56b4db
Convert `Overlay` docs to TSX and remove status section
lyzadanger Mar 1, 2023
05ab58d
Remove status/migration section from `Panel` pattern-library docs
lyzadanger Mar 1, 2023
84cfdc1
Convert `Link` pattern-library docs to TSX and remove status/migration
lyzadanger Mar 1, 2023
7bf69ec
Convert `LinkButton` docs to TSX and remove status/migration
lyzadanger Mar 1, 2023
cbbfec9
Convert `PointerButton` docs to TSX and remove status section
lyzadanger Mar 1, 2023
74e870e
Convert `Tab` pattern-library docs to TSX and remove status section
lyzadanger Mar 1, 2023
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
14 changes: 2 additions & 12 deletions ...mponents/patterns/data/AspectRatioPage.js → ...ponents/patterns/data/AspectRatioPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,15 @@ export default function AspectRatioPage() {
title="AspectRatio"
intro={
<p>
<code>AspectRatio</code> lays out content with a specified aspect
ratio.
<code>AspectRatio</code> is a simple component that controls the
aspect ratio of its first direct child.
</p>
}
>
<Library.Section title="AspectRatio">
<Library.Pattern title="Status">
<p>
<code>AspectRatio</code> is a new simple component.
</p>
</Library.Pattern>

<Library.Pattern title="Usage">
<Next.Usage componentName="AspectRatio" />
<Library.Example>
<p>
<code>AspectRatio</code> controls the aspect ratio and containment
of its first direct child.
</p>
<Library.Demo
title="AspectRatio with default 16:9 ratio"
withSource
Expand Down
13 changes: 0 additions & 13 deletions src/pattern-library/components/patterns/data/DataTablePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,19 +32,6 @@ export default function DataTablePage() {
}
>
<Library.Section title="DataTable">
<Library.Pattern title="Status">
<p>
<code>DataTable</code> is a new composite component loosely based
upon the legacy <code>Table</code> component.
</p>
<Library.Example title="Migrating to this component">
<p>
Because API changes to this component are so extensive, it should
be considered a new component.
</p>
</Library.Example>
</Library.Pattern>

<Library.Pattern title="Usage">
<Next.Usage componentName="DataTable" />

Expand Down
23 changes: 5 additions & 18 deletions ...ary/components/patterns/data/IconsPage.js → ...ry/components/patterns/data/IconsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,11 @@ export default function IconsPage() {
return (
<Library.Page
title="Icons"
intro={<p>Icons are simple, standalone components.</p>}
intro={
<p>Icons are simple, standalone components that wrap SVG source.</p>
}
>
<Library.Section title="Icon components">
<Library.Pattern title="Status">
<p>
These standalone icon components are new. These are intended to
replace the single legacy <code>Icon</code> component.
</p>
<Library.Example title="Migrating to updated icons">
<Next.Changelog>
<Next.ChangelogItem status="changed">
It is no longer necessary to import SVG source nor registration
functions from this package to use icons.
</Next.ChangelogItem>
</Next.Changelog>
</Library.Example>
</Library.Pattern>
<Library.Pattern title="Usage">
<Next.Usage componentName="CancelIcon" />
<Library.Example>
Expand All @@ -35,9 +23,8 @@ export default function IconsPage() {

<Library.Pattern title="Available icon components">
<div className="grid grid-cols-4 gap-6">
{Object.keys(Icons).map(iconName => {
const IconComponent =
Icons[/** @type {keyof Icons} */ (iconName)];
{(Object.keys(Icons) as Array<keyof typeof Icons>).map(iconName => {
const IconComponent = Icons[iconName];
return (
<div
className="flex flex-col gap-y-4 border rounded-sm p-4 items-center justify-center"
Expand Down
53 changes: 0 additions & 53 deletions ...components/patterns/data/ScrollBoxPage.js → ...omponents/patterns/data/ScrollBoxPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,41 +29,6 @@ export default function ScrollBoxPage() {
</p>
}
>
<Library.Pattern title="Status">
<p>
<code>ScrollBox</code> is a re-implementation of the legacy
component <code>Scrollbox</code> (note casing change).
</p>
<Library.Example title="Migrating to this component">
<Next.Changelog>
<Next.ChangelogItem status="breaking">
<strong>Watch out!</strong> The casing of this {"component's"}{' '}
name has changed:
<s>
<code>Scrollbox</code>
</s>{' '}
➜ <code>ScrollBox</code>
</Next.ChangelogItem>
<Next.ChangelogItem status="breaking">
Prop:
<s>
<code>withHeader</code>
</s>{' '}
➜ No longer supported. Use <code>Scroll</code> components
directly to add header-like non-scrolling content.
</Next.ChangelogItem>
<Next.ChangelogItem status="breaking">
Prop:
<s>
<code>classes</code>
</s>{' '}
➜ no longer supported. Use <code>Scroll</code>-family components
directly for more customization
</Next.ChangelogItem>
</Next.Changelog>
</Library.Example>
</Library.Pattern>

<Library.Pattern title="Usage">
<Next.Usage componentName="ScrollBox" />
<Library.Example title="Basic ScrollBox">
Expand Down Expand Up @@ -146,12 +111,6 @@ export default function ScrollBoxPage() {
</p>
}
>
<Library.Pattern title="Status">
<p>
<code>Scroll</code> is a new component.
</p>
</Library.Pattern>

<Library.Pattern title="Usage">
<Next.Usage componentName="Scroll" />
<Library.Example>
Expand Down Expand Up @@ -208,12 +167,6 @@ export default function ScrollBoxPage() {
</p>
}
>
<Library.Pattern title="Status">
<p>
<code>ScrollContent</code> is a new component.
</p>
</Library.Pattern>

<Library.Pattern title="Usage">
<Next.Usage componentName="ScrollContent" />
<Library.Example>
Expand Down Expand Up @@ -249,12 +202,6 @@ export default function ScrollBoxPage() {
</>
}
>
<Library.Pattern title="Status">
<p>
<code>ScrollContainer</code> is a new component.
</p>
</Library.Pattern>

<Library.Pattern title="Usage">
<Next.Usage componentName="ScrollContainer" />

Expand Down
11 changes: 0 additions & 11 deletions ...ary/components/patterns/data/TablePage.js → ...ry/components/patterns/data/TablePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,6 @@ export default function TablePage() {
}
>
<Library.Section title="Table">
<Library.Pattern title="Status">
<p>
<code>Table</code>, <code>TableHead</code>, <code>TableBody</code>,{' '}
<code>TableRow</code> and <code>TableCell</code> are new components.
</p>
<p>
<code>Table</code> is a presentational component, and, as such, is
not equivalent to the legacy <code>Table</code> component.
</p>
</Library.Pattern>

<Library.Pattern title="Usage">
<Next.Usage
componentName="Table, TableHead, TableBody, TableRow, TableCell"
Expand Down
40 changes: 0 additions & 40 deletions ...components/patterns/data/ThumbnailPage.js → ...omponents/patterns/data/ThumbnailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,46 +22,6 @@ export default function ThumbnailPage() {
</p>
}
>
<Library.Pattern title="Status">
<p>
<code>Thumbnail</code> is a reimplementation of a legacy component
with the same name.
</p>

<Library.Example title="Migrating to this component">
<Next.Changelog>
<Next.ChangelogItem status="breaking">
Prop name:{' '}
<s>
<code>classes</code>
</s>{' '}
➜ No longer supported. Style a parent container instead, or use{' '}
<code>AspectRatio</code> directly
</Next.ChangelogItem>
<Next.ChangelogItem status="breaking">
Prop name:{' '}
<s>
<code>isLoading</code>
</s>{' '}
➜ <code>loading</code>
</Next.ChangelogItem>
<Next.ChangelogItem status="breaking">
Prop values for <code>size</code>:{' '}
<s>
<code>{"'small'"}</code>,<code>{"'medium'"}</code>,
<code>{"'large'"}</code>
</s>{' '}
➜ Use <code>{"'sm'"}</code>, <code>{"'md'"}</code>, or{' '}
<code>{"'lg'"}</code>
</Next.ChangelogItem>
<Next.ChangelogItem status="added">
Prop <code>ratio</code> (default <code>{'"16/9"'}</code>) ➜ All
content is constrained to this aspect ratio
</Next.ChangelogItem>
</Next.Changelog>
</Library.Example>
</Library.Pattern>

<Library.Pattern title="Usage">
<Next.Usage componentName="Thumbnail" />
<Library.Example>
Expand Down
73 changes: 5 additions & 68 deletions src/pattern-library/components/patterns/feedback/ModalPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,80 +93,17 @@ export default function ModalPage() {
</p>
}
>
<Library.Section title="Modal">
<Library.Pattern title="Status">
<p>
<code>Modal</code> is a presentational component that combines
aspects of legacy <code>Modal</code> and <code>Dialog</code>{' '}
components.
</p>
<Library.Section
title="Modal"
intro={
<p>
This is an interim implementation of a modal dialog that conforms to
updated styling and API conventions. It does not yet fully implement
an accessible dialog. It routes focus, but does not trap or restore
focus, e.g.
</p>
<p>
This implementation should, however, provide a more flexible and
simplified API compared to its legacy counterpart.
</p>
<Library.Example title="Migrating to this component">
<Next.Changelog>
<Next.ChangelogItem status="breaking">
Prop removed:{' '}
<s>
<code>contentClass</code>
</s>{' '}
➜ use <code>classes</code> instead to style the outer container.
</Next.ChangelogItem>
<Next.ChangelogItem status="breaking">
Prop removed:{' '}
<s>
<code>cancelLabel</code>
</s>{' '}
➜ A cancel button is no longer automatically added when a close
handler is present. Pass a cancel button with the other buttons
in the <code>buttons</code> prop instead, and label it however
you like.
</Next.ChangelogItem>
<Next.ChangelogItem status="breaking">
Prop name:{' '}
<s>
<code>onCancel</code>
</s>{' '}
➜ <code>onClose</code>: This prop is forwarded to{' '}
<code>Panel</code> and its naming more clearly indicates that
its purpose is to handle the closing of the modal.
</Next.ChangelogItem>
<Next.ChangelogItem status="breaking">
Props removed:{' '}
<s>
<code>withCancelButton</code>
</s>{' '}
and{' '}
<s>
<code>withCloseButton</code>
</s>
➜ Cancel buttons are no longer automatically rendered based on
the presence of the close handler. A close button will now
always be rendered if <code>onClose</code> is provided.
</Next.ChangelogItem>
<Next.ChangelogItem status="changed">
<code>icon</code> prop: Now takes an <code>IconComponent</code>{' '}
instead of a <code>string</code>.
</Next.ChangelogItem>
<Next.ChangelogItem status="changed">
<code>initialFocus</code> prop: Set to <code>{"'manual'"}</code>{' '}
to opt out of automatic focus routing (formerly{' '}
<code>null</code>).
</Next.ChangelogItem>
<Next.ChangelogItem status="added">
Optional <code>width</code> prop
</Next.ChangelogItem>
</Next.Changelog>
</Library.Example>
</Library.Pattern>

}
>
<Library.Pattern title="Usage">
<Next.Usage componentName="Modal" />
<Library.Demo title="Basic modal" withSource>
Expand Down
35 changes: 0 additions & 35 deletions ...mponents/patterns/feedback/SpinnerPage.js → ...ponents/patterns/feedback/SpinnerPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,41 +31,6 @@ export default function SpinnerPage() {
</p>
}
>
<Library.Pattern title="Status">
<p>
<code>Spinner</code> is a new reimplementation of a legacy component
of the same name.
</p>

<Library.Example title="Migrating to this component">
<Next.Changelog>
<Next.ChangelogItem status="breaking">
Prop:{' '}
<s>
<code>classes</code>
</s>{' '}
removed
</Next.ChangelogItem>
<Next.ChangelogItem status="breaking">
Prop values for <code>size</code>:{' '}
<s>
<code>{"'small'"}</code>,<code>{"'medium'"}</code>,
<code>{"'large'"}</code>
</s>{' '}
➜ Use <code>{"'sm'"}</code>, <code>{"'md'"}</code>, or{' '}
<code>{"'lg'"}</code>
</Next.ChangelogItem>
<Next.ChangelogItem status="breaking">
Default <code>size</code>:{' '}
<s>
<code>{"'medium'"}</code>
</s>{' '}
➜ <code>{"'sm'"}</code>
</Next.ChangelogItem>
</Next.Changelog>
</Library.Example>
</Library.Pattern>

<Library.Pattern title="Usage">
<Next.Usage componentName="Spinner" />
<Library.Example>
Expand Down
Loading