import { Tooltip } from './Tooltip';
import { ClipboardBase } from './clipboard';
import { Checkbox } from './input/Checkbox';
-import { RadioButton } from './input/RadioButton';
interface Props extends React.HtmlHTMLAttributes<HTMLMenuElement> {
children?: React.ReactNode;
);
}
-interface ItemRadioButtonProps extends ListItemProps {
- checked: boolean;
- disabled?: boolean;
- onCheck: (value: string) => void;
- value: string;
-}
-
-export function ItemRadioButton(props: ItemRadioButtonProps) {
- const { checked, children, className, disabled, innerRef, onCheck, value, ...liProps } = props;
- return (
- <li ref={innerRef} role="none" {...liProps}>
- <ItemRadioButtonStyled
- checked={checked}
- className={classNames(className, { disabled })}
- disabled={disabled}
- onCheck={onCheck}
- value={value}
- >
- {children}
- </ItemRadioButtonStyled>
- </li>
- );
-}
-
interface ItemCopyProps {
children?: React.ReactNode;
className?: string;
--color: ${themeContrast('dropdownMenu')};
${itemStyle}
`;
-
-const ItemRadioButtonStyled = styled(RadioButton)`
- --color: ${themeContrast('dropdownMenu')};
- ${itemStyle}
-`;
ItemHeader,
ItemLink,
ItemNavLink,
- ItemRadioButton,
} from '../DropdownMenu';
import { Tooltip } from '../Tooltip';
import { MenuIcon } from '../icons/MenuIcon';
<ItemCheckbox checked onCheck={noop}>
Checkbox item
</ItemCheckbox>
- <ItemRadioButton checked={false} onCheck={noop} value="radios">
- Radio item
- </ItemRadioButton>
</DropdownMenu>,
);
}
| ({ onCheck: (value: string) => void; value: string } & PropsBase)
| ({ onCheck: () => void; value: never } & PropsBase);
+/** @deprecated Use RadioButtonGroup from Echoes instead.
+ *
+ * Individual Radio Buttons can't be used anymore.
+ * Instead, build the list of options and pass it to the RadioButtonGroup component.
+ */
export function RadioButton({
checked,
children,
}
`;
+/** @deprecated Use RadioButtonGroup from Echoes instead.
+ *
+ * Individual Radio Buttons can't be used anymore.
+ * Instead, build the list of options and pass it to the RadioButtonGroup component.
+ */
export const RadioButtonStyled = styled.input`
appearance: none; //disables native style
border: ${themeBorder('default', 'radioBorder')};
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { Link, RadioButtonGroup } from '@sonarsource/echoes-react';
import { subDays } from 'date-fns';
import {
DateRangePicker,
LargeCenteredLayout,
- Link,
PageContentFontWrapper,
PopupZLevel,
- RadioButton,
Title,
} from 'design-system';
import * as React from 'react';
return rangeOptions;
};
-export default function AuditAppRenderer(props: AuditAppRendererProps) {
+export default function AuditAppRenderer(props: Readonly<AuditAppRendererProps>) {
const { dateRange, downloadStarted, housekeepingPolicy, selection } = props;
return (
<div className="sw-mb-6">
<h3 className="sw-mb-4">{translate('audit_logs.download')}</h3>
- <ul>
- {getRangeOptions(housekeepingPolicy).map((option) => (
- <li key={option} className="sw-mb-2">
- <RadioButton
- checked={selection === option}
- onCheck={props.handleOptionSelection}
- value={option}
- >
- {translate('audit_logs.range_option', option)}
- </RadioButton>
- </li>
- ))}
- </ul>
+ <RadioButtonGroup
+ id="audit-logs-housekeeping-radio"
+ options={getRangeOptions(housekeepingPolicy).map((option) => ({
+ label: translate('audit_logs.range_option', option),
+ value: option,
+ }))}
+ value={selection}
+ onChange={props.handleOptionSelection}
+ />
<DateRangePicker
className="sw-w-abs-350 sw-mt-4"
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { Checkbox, Spinner } from '@sonarsource/echoes-react';
+import { Checkbox, RadioButtonGroup, Spinner } from '@sonarsource/echoes-react';
import {
ButtonPrimary,
FlagMessage,
LabelValueSelectOption,
LightLabel,
Modal,
- RadioButton,
} from 'design-system';
import { countBy, flattenDeep, pickBy, sortBy } from 'lodash';
import * as React from 'react';
<Highlight as="legend" className="sw-mb-2">
{translate('issue.change_status')}
</Highlight>
- {transitions.map((transition) => (
- <div
- className="sw-mb-1 sw-flex sw-items-center sw-justify-between"
- key={transition.transition}
- >
- <RadioButton
- checked={this.state.transition === transition.transition}
- onCheck={this.handleRadioTransitionChange}
- value={transition.transition}
- >
- {translate('issue.transition', transition.transition)}
- </RadioButton>
- <LightLabel>
- ({translateWithParameters('issue_bulk_change.x_issues', transition.count)})
- </LightLabel>
- </div>
- ))}
+
+ <RadioButtonGroup
+ id="bulk-change-transition"
+ options={transitions.map(({ transition, count }) => ({
+ label: translate('issue.transition', transition),
+ value: transition,
+ helpText: translateWithParameters('issue_bulk_change.x_issues', count),
+ }))}
+ onChange={this.handleRadioTransitionChange}
+ />
</fieldset>
</div>
);
return (
<FormField label={translate('issue_bulk_change.resolution_comment')}>
<InputTextArea
- autoFocus
aria-label={translate('issue_bulk_change.resolution_comment')}
onChange={this.handleCommentChange}
placeholder={translate(
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { ButtonPrimary, FlagMessage, Modal, RadioButton, TextSubdued } from 'design-system';
+import { RadioButtonGroup } from '@sonarsource/echoes-react';
+import { ButtonPrimary, FlagMessage, Modal } from 'design-system';
import React, { useState } from 'react';
import { translate } from '../../helpers/l10n';
import { useGithubProvisioningEnabledQuery } from '../../queries/identity-provider/github';
const FORM_ID = 'change-default-visibility-form';
-export default function ChangeDefaultVisibilityForm(props: Props) {
+export default function ChangeDefaultVisibilityForm(props: Readonly<Props>) {
const [visibility, setVisibility] = useState(props.defaultVisibility);
const { data: githubProbivisioningEnabled } = useGithubProvisioningEnabledQuery();
const body = (
<form id={FORM_ID} onSubmit={handleConfirmClick}>
- {Object.values(Visibility).map((visibilityValue) => (
- <div className="sw-mb-4" key={visibilityValue}>
- <RadioButton
- value={visibilityValue}
- checked={visibility === visibilityValue}
- onCheck={handleVisibilityChange}
- >
- <div>
- {translate('visibility', visibilityValue)}
- <TextSubdued as="p" className="sw-mt-2">
- {translate('visibility', visibilityValue, 'description.short')}
- </TextSubdued>
- </div>
- </RadioButton>
- </div>
- ))}
+ <RadioButtonGroup
+ id="settings-projects-visibility-radio"
+ options={Object.values(Visibility).map((visibilityValue) => ({
+ label: translate('visibility', visibilityValue),
+ helpText: translate('visibility', visibilityValue, 'description.short'),
+ value: visibilityValue,
+ }))}
+ value={visibility}
+ onChange={handleVisibilityChange}
+ />
+
<FlagMessage variant="warning">
{translate(
`settings.projects.change_visibility_form.warning${
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { ButtonPrimary, FormField, Modal, RadioButton } from 'design-system';
+import { RadioButtonGroup } from '@sonarsource/echoes-react';
+import { ButtonPrimary, FormField, Modal } from 'design-system';
import * as React from 'react';
import { getLocalizedMetricName, translate } from '../../../helpers/l10n';
import { isDiffMetric } from '../../../helpers/measures';
return (
<form onSubmit={handleFormSubmit} id={ADD_CONDITION_MODAL_ID}>
<FormField label={translate('quality_gates.conditions.where')}>
- <div className="sw-flex sw-gap-4">
- <RadioButton checked={scope === 'new'} onCheck={handleScopeChange} value="new">
- <span data-test="quality-gates__condition-scope-new">
- {translate('quality_gates.conditions.new_code')}
- </span>
- </RadioButton>
- <RadioButton checked={scope === 'overall'} onCheck={handleScopeChange} value="overall">
- <span data-test="quality-gates__condition-scope-overall">
- {translate('quality_gates.conditions.overall_code')}
- </span>
- </RadioButton>
- </div>
+ <RadioButtonGroup
+ id="quality_gates-add-condition-scope-radio"
+ options={[
+ { label: translate('quality_gates.conditions.new_code'), value: 'new' },
+ { label: translate('quality_gates.conditions.overall_code'), value: 'overall' },
+ ]}
+ value={scope}
+ onChange={handleScopeChange}
+ />
</FormField>
<FormField
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { ButtonPrimary, FlagMessage, Modal, RadioButton } from 'design-system';
+import { RadioButtonGroup } from '@sonarsource/echoes-react';
+import { ButtonPrimary, FlagMessage, Modal } from 'design-system';
import * as React from 'react';
import { setLogLevel } from '../../../api/system';
import { translate } from '../../../helpers/l10n';
onClose={this.props.onClose}
body={
<form id={FORM_ID} onSubmit={this.handleFormSubmit}>
- {LOGS_LEVELS.map((level) => (
- <RadioButton
- key={level}
- checked={level === newLevel}
- className="sw-mb-2"
- id={`loglevel-${level}`}
- name="system.log_levels"
- onCheck={this.handleLevelChange}
- value={level}
- >
- <label className="text-middle" htmlFor={`loglevel-${level}`}>
- {level}
- </label>
- </RadioButton>
- ))}
+ <div className="sw-mt-1">
+ <RadioButtonGroup
+ id="system-loglevel-radio"
+ options={LOGS_LEVELS.map((level) => ({ label: level, value: level }))}
+ value={newLevel}
+ onChange={this.handleLevelChange}
+ />
+ </div>
+
<FlagMessage className="sw-mt-2" variant="info">
{this.props.infoMsg}
</FlagMessage>
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { RadioButtonGroup } from '@sonarsource/echoes-react';
import classNames from 'classnames';
-import { RadioButton } from 'design-system';
import * as React from 'react';
import { translate } from '../../helpers/l10n';
import { Visibility } from '../../types/component';
loading?: boolean;
}
-export default function VisibilitySelector(props: VisibilitySelectorProps) {
+export default function VisibilitySelector(props: Readonly<VisibilitySelectorProps>) {
const { className, canTurnToPrivate, visibility, disabled, loading = false } = props;
return (
<div className={classNames(className)}>
- {Object.values(Visibility).map((v) => (
- <RadioButton
- className={`sw-mr-10 it__visibility-${v}`}
- key={v}
- value={v}
- checked={v === visibility}
- onCheck={props.onChange}
- disabled={disabled || (v === Visibility.Private && !canTurnToPrivate) || loading}
- >
- <div>{translate('visibility', v)}</div>
- </RadioButton>
- ))}
+ <RadioButtonGroup
+ id="project-visiblity-radio"
+ isDisabled={disabled}
+ options={Object.values(Visibility).map((v) => ({
+ label: translate('visibility', v),
+ value: v,
+ isDisabled: (v === Visibility.Private && !canTurnToPrivate) || loading,
+ }))}
+ value={visibility}
+ onChange={props.onChange}
+ />
</div>
);
}
projects / sonarqube.git / commitdiff