blixify-ui-web-mcp 0.1.38 → 0.1.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -7,7 +7,10 @@ import axios from "axios";
|
|
|
7
7
|
import dayjs from "../../dayjs";
|
|
8
8
|
import { Button } from "../../action/button";
|
|
9
9
|
import { Loading } from "../../display/loading";
|
|
10
|
-
import {
|
|
10
|
+
import {
|
|
11
|
+
DataWrapperTestSchema,
|
|
12
|
+
RowAlignmentSchema,
|
|
13
|
+
} from "./dataWrapper.fixtures";
|
|
11
14
|
import { DataTemplateWrapper } from "./index";
|
|
12
15
|
import {
|
|
13
16
|
STORY_API_ENDPOINT,
|
|
@@ -114,6 +117,43 @@ export const DataWrapperTest = () => {
|
|
|
114
117
|
};
|
|
115
118
|
DataWrapperTest.storyName = "DTW Test";
|
|
116
119
|
|
|
120
|
+
// INFO: a create form whose two-column rows each mix a described field with an
|
|
121
|
+
// undescribed one. Every row's controls must sit on one baseline while the
|
|
122
|
+
// labels sit on another — the gap between them absorbs the difference.
|
|
123
|
+
export const RowAlignment = () => {
|
|
124
|
+
const mount = useStoryBackend({
|
|
125
|
+
collections: { "row-alignment": [] },
|
|
126
|
+
yieldToE2E: true,
|
|
127
|
+
});
|
|
128
|
+
|
|
129
|
+
if (!mount) {
|
|
130
|
+
return <Loading />;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
return (
|
|
134
|
+
<div className="w-full">
|
|
135
|
+
<div className="font-semibold mb-1 text-gray-900">Row Alignment</div>
|
|
136
|
+
<div className="text-sm font-light mb-4 text-gray-500">
|
|
137
|
+
Two-column create form where some fields carry a description and their
|
|
138
|
+
row neighbours do not. Controls align per row; labels align per row.
|
|
139
|
+
</div>
|
|
140
|
+
<DataTemplateWrapper
|
|
141
|
+
title="Row Alignment"
|
|
142
|
+
type="update"
|
|
143
|
+
id="new"
|
|
144
|
+
collectionId={"row-alignment"}
|
|
145
|
+
schema={RowAlignmentSchema}
|
|
146
|
+
workspace={storyWorkspace()}
|
|
147
|
+
edit={{ allEditable: true }}
|
|
148
|
+
bareSettings={{ bareUpdateActionBottom: true }}
|
|
149
|
+
organise={{ breadcrumbType: "hidden" }}
|
|
150
|
+
limit={1}
|
|
151
|
+
/>
|
|
152
|
+
</div>
|
|
153
|
+
);
|
|
154
|
+
};
|
|
155
|
+
RowAlignment.storyName = "Row Alignment";
|
|
156
|
+
|
|
117
157
|
// INFO: Story used exclusively by the hide-columns e2e block. Shares the
|
|
118
158
|
// dtw-test-collection alias so the spec's existing API mocks apply, and adds
|
|
119
159
|
// one developer-hidden column to prove users can never toggle it back on.
|
|
@@ -16,3 +16,9 @@ Sectioned card board. Desktop: horizontal columns. Mobile: tab switcher between
|
|
|
16
16
|
## Phone view
|
|
17
17
|
|
|
18
18
|
`mobileView` swaps the column row for a tab rail with one column visible. The first column is selected as soon as columns exist (data usually arrives after the first render). `className` styles the desktop column row only — the stacked phone layout ignores it, so a `flex` / `inline-flex` passed for the desktop row cannot turn the phone view into a row. Rail, count badges, hint text and the default card follow `darkMode`.
|
|
19
|
+
|
|
20
|
+
## Lane colours
|
|
21
|
+
|
|
22
|
+
Each lane carries an accent colour: a coloured top border and a matching dot beside its title (and on its tab in the phone view). Colours come from a fixed palette in lane order. `Unassigned` is always grey and is left out of the order, so switching `nullColumn` on does not change any other lane's colour. When `columns` is passed, a column's own `color` (any CSS colour) is used as it is.
|
|
23
|
+
|
|
24
|
+
The lane heading shows the title and the number of cards in a pill; the count pill carries `data-testid="new-kanban-count-<column id>"`.
|