Skip to content

Commit

Permalink
fix: use trailingElement for video uploader input button
Browse files Browse the repository at this point in the history 
Also styles the button so it looks the same on hover/active.
  • Loading branch information
@ArturGaspar
ArturGaspar committed Dec 4, 2023
1 parent 204a70f commit 67a53d0
Show file tree
Hide file tree
Showing 4 changed files with 153 additions and 130 deletions.
29 changes: 15 additions & 14 deletions src/editors/containers/VideoUploadEditor/VideoUploader.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,20 +36,21 @@ const URLUploader = () => {
borderless
onClick={(event) => { event.stopPropagation(); }}
onChange={(event) => { setTextInputValue(event.target.value); }}
/>
<IconButton
className="position-absolute align-self-center text-muted bg-transparent shadow-none"
style={{ marginLeft: '20.25rem' }}
alt={intl.formatMessage(messages.submitButtonAltText)}
src={ArrowForward}
iconAs={Icon}
size="inline"
onClick={(event) => {
event.stopPropagation();
if (textInputValue.trim() !== '') {
onURLUpload(textInputValue);
}
}}
trailingElement={(
<IconButton
className="url-submit-button"
alt={intl.formatMessage(messages.submitButtonAltText)}
src={ArrowForward}
iconAs={Icon}
size="inline"
onClick={(event) => {
event.stopPropagation();
if (textInputValue.trim() !== '') {
onURLUpload(textInputValue);
}
}}
/>
)}
/>
</InputGroup>
</div>
Expand Down
122 changes: 64 additions & 58 deletions src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ Object {
class="input-group"
>
<div
class="pgn__form-control-decorator-group m-0"
class="pgn__form-control-decorator-group has-appended-node has-trailing-element m-0"
>
<input
aria-describedby="basic-addon2"
Expand All @@ -116,37 +116,40 @@ Object {
placeholder="Paste your video ID or URL"
value=""
/>
</div>
<button
aria-label="Submit"
class="btn-icon btn-icon-primary btn-icon-inline position-absolute align-self-center text-muted bg-transparent shadow-none"
style="margin-left: 20.25rem;"
type="button"
>
<span
class="btn-icon__icon-container"
<div
class="pgn__form-control-decorator pgn__form-control-decorator-trailing"
>
<span
class="pgn__icon btn-icon__icon"
<button
aria-label="Submit"
class="btn-icon btn-icon-primary btn-icon-inline url-submit-button"
type="button"
>
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
<span
class="btn-icon__icon-container"
>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</button>
<span
class="pgn__icon btn-icon__icon"
>
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -259,7 +262,7 @@ Object {
class="input-group"
>
<div
class="pgn__form-control-decorator-group m-0"
class="pgn__form-control-decorator-group has-appended-node has-trailing-element m-0"
>
<input
aria-describedby="basic-addon2"
Expand All @@ -268,37 +271,40 @@ Object {
placeholder="Paste your video ID or URL"
value=""
/>
</div>
<button
aria-label="Submit"
class="btn-icon btn-icon-primary btn-icon-inline position-absolute align-self-center text-muted bg-transparent shadow-none"
style="margin-left: 20.25rem;"
type="button"
>
<span
class="btn-icon__icon-container"
<div
class="pgn__form-control-decorator pgn__form-control-decorator-trailing"
>
<span
class="pgn__icon btn-icon__icon"
<button
aria-label="Submit"
class="btn-icon btn-icon-primary btn-icon-inline url-submit-button"
type="button"
>
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
<span
class="btn-icon__icon-container"
>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</button>
<span
class="pgn__icon btn-icon__icon"
>
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
Expand Down
122 changes: 64 additions & 58 deletions src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ Object {
class="input-group"
>
<div
class="pgn__form-control-decorator-group m-0"
class="pgn__form-control-decorator-group has-appended-node has-trailing-element m-0"
>
<input
aria-describedby="basic-addon2"
Expand All @@ -119,37 +119,40 @@ Object {
placeholder="Paste your video ID or URL"
value=""
/>
</div>
<button
aria-label="Submit"
class="btn-icon btn-icon-primary btn-icon-inline position-absolute align-self-center text-muted bg-transparent shadow-none"
style="margin-left: 20.25rem;"
type="button"
>
<span
class="btn-icon__icon-container"
<div
class="pgn__form-control-decorator pgn__form-control-decorator-trailing"
>
<span
class="pgn__icon btn-icon__icon"
<button
aria-label="Submit"
class="btn-icon btn-icon-primary btn-icon-inline url-submit-button"
type="button"
>
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
<span
class="btn-icon__icon-container"
>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</button>
<span
class="pgn__icon btn-icon__icon"
>
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -266,7 +269,7 @@ Object {
class="input-group"
>
<div
class="pgn__form-control-decorator-group m-0"
class="pgn__form-control-decorator-group has-appended-node has-trailing-element m-0"
>
<input
aria-describedby="basic-addon2"
Expand All @@ -275,37 +278,40 @@ Object {
placeholder="Paste your video ID or URL"
value=""
/>
</div>
<button
aria-label="Submit"
class="btn-icon btn-icon-primary btn-icon-inline position-absolute align-self-center text-muted bg-transparent shadow-none"
style="margin-left: 20.25rem;"
type="button"
>
<span
class="btn-icon__icon-container"
<div
class="pgn__form-control-decorator pgn__form-control-decorator-trailing"
>
<span
class="pgn__icon btn-icon__icon"
<button
aria-label="Submit"
class="btn-icon btn-icon-primary btn-icon-inline url-submit-button"
type="button"
>
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
<span
class="btn-icon__icon-container"
>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</button>
<span
class="pgn__icon btn-icon__icon"
>
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
Expand Down
10 changes: 10 additions & 0 deletions src/editors/containers/VideoUploadEditor/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import "@edx/paragon/scss/core/core";

.dropzone-middle {
border: 2px dashed #ccc;

Expand Down Expand Up @@ -25,6 +27,14 @@
background-color: #FFFFFF;
}

.btn-icon.url-submit-button {
&, &:active, &:hover {
background-color: transparent !important;
border: none !important;
color: $gray-500 !important;
}
}

.prompt-button {
background: rgba(239, 234, 247, 0.70);
}
Expand Down

0 comments on commit 67a53d0

Please sign in to comment.