Storybook: Adds story and doc for url-input#68286
Storybook: Adds story and doc for url-input#68286singhakanshu00 wants to merge 3 commits intoWordPress:trunkfrom
Conversation
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @singhakanshu00! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
t-hamano
left a comment
There was a problem hiding this comment.
Sorry for the late reply.
I`ve left some feedback, so I'd appreciate it if you could check it.
| const Template = ( args ) => { | ||
| const [ value, setValue ] = useState( args.value || '' ); | ||
|
|
||
| return ( | ||
| <URLInput | ||
| className={ args.className } | ||
| value={ value } | ||
| onChange={ ( newValue ) => setValue( newValue ) } | ||
| { ...args } | ||
| /> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
It might be better to hard-code like this:
export const Default = {
render: function Template( { onChange, ...args } ) {
const [ value, setValue ] = useState();
return (
<URLInput
{ ...args }
value={ value }
onChange={ ( ...changeArgs ) => {
setValue( ...changeArgs );
onChange( ...changeArgs );
} }
/>
);
},
};| args: { | ||
| label: 'URL', | ||
| value: '', | ||
| placeholder: 'Enter URL...!!!', | ||
| className: 'url-input', | ||
| disableSuggestions: false, | ||
| }, |
There was a problem hiding this comment.
Unless you have a specific reason, we may not need these custom values.
| * @param {Object} props The component props. | ||
| * @param {Function} props.onChange Callback to handle input changes. | ||
| * @param {Function} props.onSubmit Callback to handle form submission. | ||
| * @param {Function} props.__experimentalFetchLinkSuggestions Function to fetch link suggestions. | ||
| * @param {Function} props.__experimentalHandleURLSuggestions Function to handle URL-specific suggestions. | ||
| * @param {boolean} props.disableSuggestions Whether to disable suggestions. | ||
| * @param {boolean} props.__experimentalShowInitialSuggestions Whether to show suggestions initially. | ||
| * @param {string} props.value The current input value. | ||
| * @param {string} props.placeholder Placeholder for the input field. | ||
| * @param {Function} props.debouncedSpeak Function for accessibility messages. | ||
| * @param {Function} props.speak Function for accessibility announcements. | ||
| * @param {Function} props.__experimentalRenderControl Custom render function for the control. | ||
| * @param {Function} props.__experimentalRenderSuggestions Custom render function for suggestions. | ||
| * @param {Function} props.autocompleteRef Reference for the autocomplete input. | ||
| * @param {Function} props.onKeyDown Optional handler for custom keydown logic. | ||
| * @param {Function} props.suffix Optional content to render as a suffix in the input field. |
There was a problem hiding this comment.
I think some type definitions are incorrect:
__experimentalHandleURLSuggestions: booleanautocompleteRef: object
Also, the following props are missing:
- label
- className
- isFullWidth
- hideLabelFromVison
- instanceId
| * A React component for handling URL input with suggestions, autocomplete, and keyboard navigation. | ||
| * It provides functionality for fetching and displaying link suggestions based on user input. | ||
| * | ||
| * @augments {Component} |
There was a problem hiding this comment.
@augments is non-standard and not used in the Gutenberg project. We can simply remove it.
Furthermore, when @param is on a constructor, I assume it means a description of the method itself.
A simple solution would be to do this:
/**
* URLInput Component
*
* Component description.
*
* @param {PropType} props.prop description
* @param {PropType} props.prop description
*/
class URLInput extends Component {
}
What?
This PR adds story for
url-inputcomponent.Also it adds the JSDoc for the same
Why?
Part of: #67165
Part of: #22891
Testing Instructions
Screenshots or screencast
Screen.Recording.2024-12-26.at.1.31.12.PM.mov