Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: typeahead sort and styling (#396)

Browse Source
This commit is contained in:
Kristin Aoki
2023-09-27 12:09:27 -04:00
committed by GitHub
parent eb320abfed
commit a0089eb1be
5 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/editors/containers/VideoUploadEditor/VideoUploader.jsx
View File

@@ -26,7 +26,7 @@ const URLUploader = () => {
</div>
<div className="x-small align-self-center justify-content-center mx-2 text-dark font-weight-normal">OR</div>
<div className="zindex-9 video-id-prompt p-4">
<InputGroup>
<InputGroup className="video-upload-input-group">
<FormControl
placeholder={intl.formatMessage(messages.pasteURL)}
aria-label={intl.formatMessage(messages.pasteURL)}

4
src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap
View File

@@ -107,7 +107,7 @@ Object {
class="zindex-9 video-id-prompt p-4"
>
<div
class="input-group"
class="video-upload-input-group input-group"
>
<div
class="pgn__form-control-decorator-group"
@@ -265,7 +265,7 @@ Object {
class="zindex-9 video-id-prompt p-4"
>
<div
class="input-group"
class="video-upload-input-group input-group"
>
<div
class="pgn__form-control-decorator-group"

4
src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap
View File

@@ -111,7 +111,7 @@ Object {
class="zindex-9 video-id-prompt p-4"
>
<div
class="input-group"
class="video-upload-input-group input-group"
>
<div
class="pgn__form-control-decorator-group"
@@ -275,7 +275,7 @@ Object {
class="zindex-9 video-id-prompt p-4"
>
<div
class="input-group"
class="video-upload-input-group input-group"
>
<div
class="pgn__form-control-decorator-group"

19
src/editors/containers/VideoUploadEditor/index.scss
View File

@@ -37,13 +37,16 @@
}
}
.form-control {
font-size: 0.875rem !important;
width: 308px !important;
height: 44px !important;
.video-upload-input-group{
.form-control {
font-size: 0.875rem !important;
width: 308px !important;
height: 44px !important;
}
.pgn__icon.pgn__icon__lg {
width: 3.625rem !important;
height: 3.625rem !important;
}
}
.pgn__icon.pgn__icon__lg {
width: 3.625rem !important;
height: 3.625rem !important;
}

5
src/editors/sharedComponents/TypeaheadDropdown/index.jsx
View File

@@ -7,6 +7,7 @@ import {
} from '@edx/paragon';
import { Add, ExpandLess, ExpandMore } from '@edx/paragon/icons';
import PropTypes from 'prop-types';
import { sortBy } from 'lodash-es';
// eslint-disable-next-line import/no-unresolved
import onClickOutside from 'react-onclickoutside';
import FormGroup from './FormGroup';
@@ -45,7 +46,9 @@ class TypeaheadDropdown extends React.Component {
options = options.filter((option) => (option.toLowerCase().includes(strToFind.toLowerCase())));
}
return options.sort().map((opt) => {
const sortedOptions = sortBy(options, (option) => option.toLowerCase());
return sortedOptions.map((opt) => {
let value = opt;
if (value.length > 30) {
value = value.substring(0, 30).concat('...');