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

Jump to bottom

tweak: Resize editable directions textbox #2883

Merged
merged 11 commits into from
Oct 31, 2024
Merged

tweak: Resize editable directions textbox #2883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e8925f6
feat: Add connectionPoints and missedStops to the “Review Detour” panel
hannahpurcell Oct 23, 2024
2d66e24
tweak: Rename detourText to copyableDetourText, fix typo
hannahpurcell Oct 23, 2024
b992232
feat: Put directions text in state machine to allow edits
hannahpurcell Oct 23, 2024
8f881d0
feat: Split apart copyable text and editable text in diversionPage
hannahpurcell Oct 23, 2024
0612a58
tweak: Style to force minimum textArea height
hannahpurcell Oct 23, 2024
46c2e19
test: update stories and test
hannahpurcell Oct 23, 2024
e14e24e
tweak: update test snapshot
hannahpurcell Oct 23, 2024
3d59ab0
tweak: Updated storybook story
hannahpurcell Oct 23, 2024
ace274e
tweak: Make an auto-resizing textarea
hannahpurcell Oct 24, 2024
2c86f93
tweak: update the explanatory comment
hannahpurcell Oct 25, 2024
3063370
Merge branch 'main' into hp/resize-editable-directions-textbox
hannahpurcell Oct 31, 2024
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
28 changes: 28 additions & 0 deletions assets/css/_autosized_textarea.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
.c-autosized-textarea {
display: grid;
// The main area that the textarea and the "'Sizer" occupy
grid-template-areas: "slot";

&::after, // "Sizer"
> textarea {
grid-area: slot;
}

&::after {
content: attr(data-replicated-value) " ";
white-space: pre-wrap;
visibility: hidden;
}
> textarea {
resize: none;
overflow: hidden;
}
&::after,
> textarea {
border: 1px solid $list-group-border-color;
padding: 0.5rem;
font: inherit;
margin-bottom: 1rem;
line-height: 1.5rem;
}
}
1 change: 1 addition & 0 deletions assets/css/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ $vpp-location-padding: 1rem;
@import "leaflet";
@import "skate_ui";

@import "autosized_textarea";
@import "basic_notification_modal";
@import "circle_x_icon";
@import "card";
Expand Down
32 changes: 22 additions & 10 deletions assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,28 @@ export const DetourFinishedPanel = ({
</Button>

<h2 className="c-diversion-panel__h2">Directions</h2>
<Form.Control
as="textarea"
value={editableDirections}
onChange={({ target: { value } }) => onChangeDetourText(value)}
className="flex-grow-1 mb-3"
style={{
resize: "none",
}}
data-fs-element="Detour Text"
/>
{/*
We need a way to let the form area take up exactly the space of its content
(to avoid double scrollbars). We used this approach:
https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas

The result is that the Form.Control has an invisible twin that helps the
wrapper grow to the appropriate size, and then the Form.Control likewise
assumes that space. All styles that affect layout must be identical
(e.g., `border`, `padding`, `margin`, `font`) between the `<Form.Control/>`
and the `.c-autosized-textarea::after` pseudo-element.
*/}
<div
className="c-autosized-textarea"
data-replicated-value={editableDirections}
>
<Form.Control
as="textarea"
value={editableDirections}
onChange={({ target: { value } }) => onChangeDetourText(value)}
data-fs-element="Detour Text"
/>
</div>

{connectionPoints && (
<ConnectionPoints connectionPoints={connectionPoints} />
Expand Down
32 changes: 20 additions & 12 deletions assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -460,13 +460,17 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
>
Directions
</h2>
<textarea
class="flex-grow-1 mb-3 form-control"
data-fs-element="Detour Text"
style="resize: none;"
<div
class="c-autosized-textarea"
data-replicated-value="From null"
>
From null
</textarea>
<textarea
class="form-control"
data-fs-element="Detour Text"
>
From null
</textarea>
</div>
<section
class="pb-3"
>
Expand Down Expand Up @@ -1269,13 +1273,17 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
>
Directions
</h2>
<textarea
class="flex-grow-1 mb-3 form-control"
data-fs-element="Detour Text"
style="resize: none;"
<div
class="c-autosized-textarea"
data-replicated-value="From null"
>
From null
</textarea>
<textarea
class="form-control"
data-fs-element="Detour Text"
>
From null
</textarea>
</div>
<section
class="pb-3"
>
Expand Down
Loading