Changelog
v2.0.0
Breaking changes
These changes are breaking and will require you to update your Views code in order to use the new
version.
Table columns prop sets rather than merges
Previously, the
column
prop was merged into the columns inferred from the Table data. Now,
columns
sets the columns for the Table
.Suppose you have a task-backed
Table
that executes a task my_task
that returns a list of data
with id
and name
fields. You pass a columns
prop to the Table
for the name
column.tsxCopied1<Table task="my_task" columns={[{ accessor: "name", label: "My custom name" }]} />
Previously, the
Table
would show the inferred id
and name
columns with the name column
overridden with the custom label.Now, the
Table
will only show the name
column. For Table
components relying on the column
merging behavior, we recommend explicitly defining the columns of your Table
. To achieve the same
behavior as before in the example, simply add back the missing id
column.tsxCopied1<Table task="my_task" columns={["id", { accessor: "name", label: "My custom name" }]} />
Table columns prop respects column order
Since the
columns
prop now sets rather than merges, you can now define the order of the columns
with just the columns
prop.For example, if you want to re-order the columns to show the
name
column first, previously you
could do this by using the shownColumns
prop.tsxCopied1<Table2task="my_task"3columns={[4{ accessor: "id", label: "ID" },5{ accessor: "name", label: "Name" },6]}7showColumns={["name", "id"]}8/>
Now, you simply pass in the re-ordered
columns
prop.tsxCopied1<Table2task="my_task"3columns={[4{ accessor: "name", label: "Name" },5{ accessor: "id", label: "ID" },6]}7/>
As a result, the
shownColumns
prop has been removed.Table columns are statically typechecked
When you define a table column as
{ accessor: "id", label: "ID" }
, the typechecker will now ensure
that id
is present in your table data. One caveat is that if your columns are defined separately
from the Table, e.g. columns={myColumns}
, then you will need to type the columns object to prevent
TypeScript from getting confused: const myColumns: Column[] = ...
SQL task-backed Table removes Q1 from output before outputTransform
SQL tasks return each executed query in a separate key in the output. For example, a SQL task
executes two queries, the output would include
Q1
and Q2
, which include results of the two
queries.If the SQL task only includes one query, the SQL task-backed
Table
components automatically
removes the outer Q1
object from the SQL task output.Previously,
outputTransform
was applied before the removal of Q1
. You would have to manually
reference the Q1
field in the output
to access the data rows.tsxCopied1<Table2task="my_sql_task"3outputTransform={(output) =>4output.Q1.map((row) => {5// ...6})7}8/>
Now, the
outputTransform
prop is applied after the removal of Q1
, so outputTransform
can be
simplified.tsxCopied1<Table2task="my_sql_task"3outputTransform={(output) =>4output.map((row) => {5// ...6})7}8/>
Stack no longer behaves like a grid when direction="row"
Previously, you could use the
Stack
as a grid by setting direction="row"
. The Stack
items
accepted a width
prop that could accept a 12-column Bootstrap-style column width. Stack
items
also accepted an offset
prop that created empty space within the grid.For example, you could previously use
Stack
to arrange a grid like the following.tsxCopied1<Stack direction="row">2<Card width={6}>Content</Card>3<Card width={6}>Content</Card>4<Card width={4}>Content</Card>5<Card width={4}>Content</Card>6<Card width={4}>Content</Card>7</Stack>
This would create a grid with the two rows: the first row with two cards and the second row with
three cards.
Now,
Stack
no longer behaves like a grid. Stack
items no longer accepts column widths in width
and offset
is removed. You can accomplish the similar results by splitting up the grid into a
Stack
per grid row and using the new sizing props.tsxCopied1<Stack direction="row">2<Card width="1/2">Content</Card>3<Card width="1/2">Content</Card>4</Stack>5<Stack direction="row">6<Card width="1/3">Content</Card>7<Card width="1/3">Content</Card>8<Card width="1/3">Content</Card>9</Stack>
Breakpoints are removed for width
Previously, the
width
prop on Stack
items accepted an object where you could specify different
widths for different screen size breakpoints.tsxCopied1<Card width={{ xs: "100%", sm: "33%" }}>1</Card>
We have removed this behavior as it added too much complexity to the item props. You can still
introduce a level of responsiveness by using the
Stack
wrap prop.Stack.Item is removed
We found the
Stack.Item
component unnecessary and have removed it.weight prop in Text uses tokens
Previously, the
weight
prop accepted a number representing the CSS font-weight
value.tsxCopied1<Text weight={700}>Bold text</Text>
Now, the
weight
prop accepts a token that maps to a font weight.tsxCopied1<Text weight="bold">Bold text</Text>
Table
Tables are core to almost every internal tool, so we've continued to polish our
Table
component in
order to make it even more powerful and easier to use.- Change
columns
to set rather than merge. Read more. - Add a dirty indicator when the cell has been changed from its original value.
- Integrate custom column components with our table editing system. Read more.
- Add ability to customize the row ID so that row selection works even when the backing data changes.
- Improve the look of the row action column by tightening its size.
- We removed double-click to edit, but you can still edit by clicking on the edit icon.
Layout
While our
Stack
component worked fine for most cases, we found that it was too complicated. We've
simplified the Stack
component to make it easier to use.- Simplify
Stack
.- Remove grid-like behavior when
direction="row"
. - Remove
Stack.Item
component. - Add
wrap
prop to control wrapping behavior. - Allow
Stack
to scroll with thescroll
prop.
- Remove grid-like behavior when
- Add
grow
prop to our components that will cause them to grow within aStack
. - Add common layout props
width
andheight
that work outside ofStack
. These props accept our new sizing tokens.
For more information on how to arrange your components in your View, check out the
layout docs and the
Stack
docs.Routing
We've added more ways to connect your view to other views and tasks within the Airplane ecosystem.
Debugging
Nothing ever works perfectly the first time, so we've added some tools to help you debug your views
during development.
- Add a new expandable debug panel on the bottom of your view.
- Move the activity panel into the debug panel.
- Improve the activity panel.
- Add filters and better ways to preview the tasks executed by your view.
- Add a panel that allows you to visualize the component state.
For more information, check out how to
debug component state and how to use the
activity panel.
Other
- Allow
DescriptionList
to be task-backed by passing in atask
prop. - Improve
Form
.- Add
onSuccess
andonError
props. - Add
refetchTasks
, which allows you to specify tasks to refetch after a form submission. - Add
beforeSubmitTransform
, which allows you to transform the form data before it's submitted. - The ids of auto-generated inputs in a task-backed form are now prefixed by the form id, to avoid collisions.
- Add
- Add styling props
style
andclassName
to all components. Read more. - Improve some Typescript types.
Deprecated
These changes are deprecated. The deprecated features still exist but will be removed in a future
release.
- The
sx
prop is deprecated. Usestyle
orclassName
instead. - The
transform
andalign
props onText
are deprecated. Usestyle
orclassName
instead. - The
Title
component is deprecated. UseHeading
instead. - The
itemComponent
prop onSelect
andMultiSelect
is deprecated. UseItemComponent
instead.