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

URLInput: Replace input with InputControl #65158

Merged
merged 17 commits into from
Sep 18, 2024
Merged

URLInput: Replace input with InputControl #65158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
189b35b
replace input with InputControl
rahulharpal1603 Sep 9, 2024
351dbf1
change the code so that the suffix prop remains undefined if not assi…
rahulharpal1603 Sep 11, 2024
d3193d7
Update packages/block-editor/src/components/link-control/index.js
rahulharpal1603 Sep 11, 2024
6d97527
Update index.js
rahulharpal1603 Sep 11, 2024
95e9e3f
minor changes, removed unnecessary comments
rahulharpal1603 Sep 11, 2024
0cbb389
Merge remote-tracking branch 'upstream/trunk' into trunk
rahulharpal1603 Sep 11, 2024
37ac11b
Merge branch 'WordPress:trunk' into trunk
rahulharpal1603 Sep 11, 2024
4bebcbd
Merge branch 'trunk' of https://github.com/rahulharpal1603/gutenberg-…
rahulharpal1603 Sep 11, 2024
5e2e3cf
retrigger checks
rahulharpal1603 Sep 11, 2024
33d99b0
Merge branch 'WordPress:trunk' into trunk
rahulharpal1603 Sep 12, 2024
93ddf9c
added the newlines back for better readability
rahulharpal1603 Sep 12, 2024
8a46025
Merge branch 'WordPress:trunk' into trunk
rahulharpal1603 Sep 15, 2024
b10d627
Made LinkControl and Social Icons Consistent, fixed the auto-fill hig…
rahulharpal1603 Sep 15, 2024
57ed838
Lint Issues Fix
rahulharpal1603 Sep 15, 2024
0722a50
Merge branch 'WordPress:trunk' into trunk
rahulharpal1603 Sep 18, 2024
a2ef826
More CSS cleanup plus misc cleanup
rahulharpal1603 Sep 18, 2024
9f78165
CSS cleanup
rahulharpal1603 Sep 18, 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
33 changes: 19 additions & 14 deletions packages/block-editor/src/components/link-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
Notice,
TextControl,
__experimentalHStack as HStack,
__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useRef, useState, useEffect } from '@wordpress/element';
Expand Down Expand Up @@ -383,7 +384,7 @@ function LinkControl( {
value={ internalControlValue?.title }
onChange={ setInternalTextInputValue }
onKeyDown={ handleSubmitWithEnter }
size="__unstable-large"
__next40pxDefaultSize
/>
) }
<LinkControlSearchInput
Expand All @@ -404,20 +405,24 @@ function LinkControl( {
createSuggestionButtonText
}
hideLabelFromVision={ ! showTextControl }
suffix={
showActions ? undefined : (
<InputControlSuffixWrapper variant="control">
<Button
onClick={
isDisabled ? noop : handleSubmit
}
label={ __( 'Submit' ) }
icon={ keyboardReturn }
className="block-editor-link-control__search-submit"
aria-disabled={ isDisabled }
size="small"
/>
</InputControlSuffixWrapper>
)
}
props
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just noticed this props here which looks like a typo — should we remove it? Was it meant to be something like `{...props} ? @mirka

Copy link
Contributor Author

@rahulharpal1603 rahulharpal1603 Sep 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I think that this is a typo; "props" was never there in the first place.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cleanup in #65650

/>
{ ! showActions && (
<div className="block-editor-link-control__search-enter">
rahulharpal1603 marked this conversation as resolved.
Show resolved Hide resolved
<Button
// TODO: Switch to `true` (40px size) if possible
__next40pxDefaultSize={ false }
onClick={ isDisabled ? noop : handleSubmit }
label={ __( 'Submit' ) }
icon={ keyboardReturn }
className="block-editor-link-control__search-submit"
aria-disabled={ isDisabled }
/>
</div>
) }
</div>
{ errorMessage && (
<Notice
Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/link-control/search-input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ const LinkControlSearchInput = forwardRef(
withURLSuggestion = true,
createSuggestionButtonText,
hideLabelFromVision = false,
suffix,
},
ref
) => {
Expand Down Expand Up @@ -147,6 +148,7 @@ const LinkControlSearchInput = forwardRef(
}
} }
ref={ ref }
suffix={ suffix }
/>
{ children }
</div>
Expand Down
22 changes: 0 additions & 22 deletions packages/block-editor/src/components/link-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,34 +72,12 @@ $block-editor-link-control-number-of-actions: 1;
color: $gray-900;
}

input[type="text"],
// Specificity overide of URLInput defaults.
&.block-editor-url-input input[type="text"].block-editor-url-input__input {
@include input-control;
display: block;
border: $border-width solid $gray-600;
height: $button-size-next-default-40px; // components do not properly support unstable-large yet.
margin: 0;
padding: $grid-unit-10 $button-size-next-default-40px $grid-unit-10 $grid-unit-20;
position: relative;
width: 100%;

.has-actions & {
padding-right: $grid-unit-20;
}
}
}

.block-editor-link-control__search-error {
margin: -$grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
}

.block-editor-link-control__search-enter {
position: absolute;
right: 19px; // specific to place the button properly.
top: 3px;
}

.block-editor-link-control__search-actions {
padding: $grid-unit-10 $grid-unit-20 $grid-unit-20;
}
Expand Down
9 changes: 5 additions & 4 deletions packages/block-editor/src/components/url-input/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
import {
BaseControl,
Button,
__experimentalInputControl as InputControl,
Spinner,
withSpokenMessages,
Popover,
Expand Down Expand Up @@ -234,8 +235,8 @@ class URLInput extends Component {
this.suggestionsRequest = request;
}

onChange( event ) {
this.props.onChange( event.target.value );
onChange( newValue ) {
this.props.onChange( newValue );
}

onFocus() {
Expand Down Expand Up @@ -448,7 +449,6 @@ class URLInput extends Component {
id: inputId,
value,
required: true,
className: 'block-editor-url-input__input',
type: 'text',
onChange: this.onChange,
onFocus: this.onFocus,
Expand All @@ -464,6 +464,7 @@ class URLInput extends Component {
? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }`
: undefined,
ref: this.inputRef,
suffix: this.props.suffix,
};

if ( renderControl ) {
Expand All @@ -472,7 +473,7 @@ class URLInput extends Component {

return (
<BaseControl __nextHasNoMarginBottom { ...controlProps }>
<input { ...inputProps } />
<InputControl { ...inputProps } __next40pxDefaultSize />
{ loading && <Spinner /> }
</BaseControl>
);
Expand Down
29 changes: 3 additions & 26 deletions packages/block-editor/src/components/url-input/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,33 +9,14 @@ $input-size: 300px;
position: relative;
padding: 1px;

input[type="text"] {
width: 100%;
@include break-small() {
width: $input-size;
}
padding: $input-padding;
margin-left: 0;
margin-right: 0;

/* Fonts smaller than 16px causes mobile safari to zoom. */
font-size: $mobile-text-min-font-size;
@include break-small {
font-size: $default-font-size;
}

&::-ms-clear {
display: none;
}
@include break-small() {
min-width: $input-size;
width: auto;
}

&.is-full-width {
width: 100%;

.block-editor-url-input__input[type="text"] {
width: 100%;
}

&__suggestions {
width: 100%;
}
Expand All @@ -49,10 +30,6 @@ $input-size: 300px;
}
}

.block-editor-url-input__input[type="text"] {
@include input-control;
}

// Suggestions
.block-editor-url-input__suggestions {
max-height: 200px;
Expand Down
18 changes: 11 additions & 7 deletions packages/block-library/src/social-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
PanelBody,
PanelRow,
TextControl,
__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { keyboardReturn } from '@wordpress/icons';
Expand Down Expand Up @@ -78,15 +79,18 @@ const SocialLinkURLPopover = ( {
}
removeBlock( clientId );
} }
suffix={
<InputControlSuffixWrapper variant="control">
<Button
icon={ keyboardReturn }
label={ __( 'Apply' ) }
type="submit"
size="small"
/>
</InputControlSuffixWrapper>
}
/>
</div>
<Button
// TODO: Switch to `true` (40px size) if possible.
__next40pxDefaultSize={ false }
icon={ keyboardReturn }
label={ __( 'Apply' ) }
type="submit"
/>
</form>
</URLPopover>
);
Expand Down
Loading