mirror of
https://github.com/sourcegraph/sourcegraph.git
synced 2026-02-06 19:21:50 +00:00
[SG-36482] Wildcard V2: <Input /> Ban usage of input component and migrate remaining <input /> component usage (#36529)
This commit is contained in:
GitStart-SourceGraph
GitHub
parent
348de218ef
commit
8c8b185398
@ -104,6 +104,10 @@ See https://handbook.sourcegraph.com/community/faq#is-all-of-sourcegraph-open-so
|
||||
message:
|
||||
'Use the Form component in src/components/Form.tsx instead of the native HTML form element to get proper form validation feedback',
|
||||
},
|
||||
{
|
||||
element: 'input',
|
||||
message: 'Use the <Input/> component from @sourcegraph/wildcard instead.',
|
||||
},
|
||||
{
|
||||
element: 'select',
|
||||
message: 'Use the <Select /> component from @sourcegraph/wildcard instead.',
|
||||
|
||||
@ -484,8 +484,7 @@ export const Forms: Story = () => (
|
||||
</Form>
|
||||
|
||||
<H2 className="mt-3">Readonly</H2>
|
||||
<input className="form-control" type="text" value="I'm a readonly value" readOnly={true} />
|
||||
|
||||
<Input value="I'm a readonly value" readOnly={true} />
|
||||
<H2 className="mt-3">Sizing</H2>
|
||||
<Text>Form fields can be made smaller</Text>
|
||||
<div className="d-flex">
|
||||
|
||||
@ -180,17 +180,18 @@ export const AddCredentialModal: React.FunctionComponent<React.PropsWithChildren
|
||||
<div className="form-group">
|
||||
{requiresUsername && (
|
||||
<>
|
||||
<Label htmlFor="username">Username</Label>
|
||||
<input
|
||||
<Input
|
||||
id="username"
|
||||
name="username"
|
||||
autoComplete="off"
|
||||
className="mb-2"
|
||||
inputClassName="mb-2"
|
||||
className="mb-0"
|
||||
required={true}
|
||||
spellCheck="false"
|
||||
minLength={1}
|
||||
value={username}
|
||||
onChange={onChangeUsername}
|
||||
label="Username"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -18,6 +18,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.insight-name {
|
||||
margin-left: 0.5rem;
|
||||
.checkbox-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ import React from 'react'
|
||||
import { escapeRegExp } from 'lodash'
|
||||
|
||||
import { ErrorAlert } from '@sourcegraph/branded/src/components/alerts'
|
||||
import { Button, Label, Input, Link } from '@sourcegraph/wildcard'
|
||||
import { Button, Input, Link, Label, Checkbox } from '@sourcegraph/wildcard'
|
||||
|
||||
import { LoaderButton } from '../../../../../../../../../components/LoaderButton'
|
||||
import { TruncatedText } from '../../../../../../../components'
|
||||
@ -68,16 +68,17 @@ export const AddInsightModalContent: React.FunctionComponent<
|
||||
<fieldset className={styles.insightsContainer}>
|
||||
{filteredInsights.map(insight => (
|
||||
<Label key={insight.id} weight="medium" className={styles.insightItem}>
|
||||
<input
|
||||
type="checkbox"
|
||||
<Checkbox
|
||||
name="insightIds"
|
||||
value={insight.id}
|
||||
checked={isChecked(insight.id)}
|
||||
onChange={onChange}
|
||||
onBlur={onBlur}
|
||||
aria-labelledby={insight.id}
|
||||
className={styles.checkbox}
|
||||
wrapperClassName={styles.checkboxWrapper}
|
||||
/>
|
||||
|
||||
<TruncatedText className={styles.insightName}>{insight.title}</TruncatedText>
|
||||
<TruncatedText id={insight.id}>{insight.title}</TruncatedText>
|
||||
</Label>
|
||||
))}
|
||||
</fieldset>
|
||||
|
||||
@ -20,6 +20,7 @@ import {
|
||||
Label,
|
||||
H5,
|
||||
Text,
|
||||
Input,
|
||||
} from '@sourcegraph/wildcard'
|
||||
|
||||
import { AccessTokenScopes } from '../../../auth/accessToken'
|
||||
@ -165,17 +166,15 @@ export const UserSettingsCreateAccessTokenCallbackPage: React.FunctionComponent<
|
||||
{newToken && requester && (
|
||||
<Form>
|
||||
<Container className="mb-3">
|
||||
<div className="form-group">
|
||||
<Label htmlFor="user-settings-create-access-token-page__note">Token description</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="user-settings-create-access-token-page__note"
|
||||
placeholder={note}
|
||||
disabled={true}
|
||||
data-testid="test-create-access-token-description"
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
data-testid="test-create-access-token-description"
|
||||
id="user-settings-create-access-token-page__note"
|
||||
placeholder={note}
|
||||
disabled={true}
|
||||
label="Token description"
|
||||
className="form-group"
|
||||
/>
|
||||
|
||||
<div className="form-group mb-0">
|
||||
<Label htmlFor="user-settings-create-access-token-page__scope-user:all" className="mb-0">
|
||||
Token scope
|
||||
|
||||
@ -3,7 +3,7 @@ import { DecoratorFn, Meta, Story } from '@storybook/react'
|
||||
import { BrandedStory } from '@sourcegraph/branded/src/components/BrandedStory'
|
||||
import webStyles from '@sourcegraph/web/src/SourcegraphWebApp.scss'
|
||||
|
||||
import { H1, H2, H3, Text } from '..'
|
||||
import { H1, H2, H3, Text, Input } from '..'
|
||||
import { Alert } from '../Alert'
|
||||
import { Button } from '../Button'
|
||||
|
||||
@ -49,12 +49,12 @@ export const Overview: Story = () => (
|
||||
<H3>Section I</H3>
|
||||
<Text>Here you change the username.</Text>
|
||||
<div className="form-group">
|
||||
<input type="text" className="form-control" />
|
||||
<Input />
|
||||
</div>
|
||||
<H3>Section II</H3>
|
||||
<Text>Here you change your email.</Text>
|
||||
<div className="form-group mb-0">
|
||||
<input type="text" className="form-control" />
|
||||
<Input type="email" />
|
||||
</div>
|
||||
</Container>
|
||||
<div className="mb-3">
|
||||
@ -71,7 +71,7 @@ export const Overview: Story = () => (
|
||||
<H3>Section I</H3>
|
||||
<Text>Here you change the username.</Text>
|
||||
<div className="form-group">
|
||||
<input type="text" className="form-control" />
|
||||
<Input />
|
||||
</div>
|
||||
<Button className="mb-2" variant="secondary">
|
||||
Save
|
||||
@ -80,7 +80,7 @@ export const Overview: Story = () => (
|
||||
<H3>Section II</H3>
|
||||
<Text>Here you change your email.</Text>
|
||||
<div className="form-group">
|
||||
<input type="text" className="form-control" />
|
||||
<Input type="email" />
|
||||
</div>
|
||||
<Button variant="secondary">Save</Button>
|
||||
</Container>
|
||||
|
||||
@ -42,6 +42,7 @@ export const IconRadioButtons: React.FunctionComponent<React.PropsWithChildren<P
|
||||
{Object.values(icons).map(({ icon: Icon, name: iconName, value }) => (
|
||||
<li key={iconName} className="d-flex">
|
||||
<Label className={styles.label}>
|
||||
{/* eslint-disable-next-line react/forbid-elements */}
|
||||
<input
|
||||
disabled={disabled}
|
||||
type="radio"
|
||||
|
||||
@ -26,6 +26,7 @@ export type ControlInputProps = AccessibleFieldProps<React.InputHTMLAttributes<H
|
||||
export const BaseControlInput: React.FunctionComponent<React.PropsWithChildren<ControlInputProps>> = React.forwardRef(
|
||||
({ children, className, message, isValid, type, wrapperClassName, ...props }, reference) => (
|
||||
<div className={classNames('form-check', wrapperClassName)}>
|
||||
{/* eslint-disable-next-line react/forbid-elements */}
|
||||
<input
|
||||
ref={reference}
|
||||
type={type}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user