Updated New Channel Modal

Important Links

Description

With the updates in the new Channel Settings modal, there is an opportunity to also update the ‘New Channel' modal since it will use a lot of the same input fields and UI.

For this update, the only functional update the is proposed is the function for editing the URL. Rather than opening another modal, it is proposed that we show the input field within the existing modal. A few other updates are noted below.

Open

New channel modal in context

Open

Channel name (required)

• When the modal first opens, focus on the channel name field immediately.

• This field is required

• Max character count = 64 (as in current)

• The ‘Create Channel’ button is disabled until a name is entered

Editing the channel URL

• Initially, the channel’s URL is displayed below the channel name along with an ‘Edit’ button.

• The URL should be truncated as needed placing the ... in the middle of the url

  • Hovering over a truncated URL displays a tooltip with the full URL

• The displayed URL auto-updates as the channel name is entered (unless the user has already customized it).

• When users click ‘Edit’, the URL slug input field is revealed (see below).

• Spaces and special characters (~, #, etc) are converted to dashes as you type to prevent errors. Uppercase letters are auto-converted to lowercase. Only lowercase letters, numbers, dashes, and underscores are allowed.

Channel Access

Defaults to Public access and can be toggled to Private.

Channel Purpose (optional)

No changes proposed to this input field. Does not accept markdown.

Channel Header - Removed

Since there is a callout in the channel header when no header is set, this field is removed from the channel creation modal. In an effort to reduce the number of fields presented when creating a channel, this has been removed. It can always be added after a channel has been created either through the Channel Settings modal or clicking on the header area.

Errors

When there are errors in the form, the ‘Create Channel’ button is also disabled until this is addressed.

Real-time validation on blur of the field

For the channel name and URL inputs, format/requirement validations happen as soon as the field loses focus (on blur).

Max character count exceeded

If the character count for the channel name is exceeded, the negative character count displays on the right of the input field (see new category modal for current example in-product)

Mobile Webview