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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: 馃幐 run Radio codemod #878

Merged
merged 2 commits into from Oct 4, 2021
Merged

feat: 馃幐 run Radio codemod #878

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
81aa08e
feat: 馃幐 run Radio codemod
massao Oct 1, 2021
e301758
test: 馃拲 Update selector on cypress to get input correctly
massao Oct 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions cypress/integration/LocationEditor.spec.ts
View file
Open in desktop
Expand Up @@ -10,10 +10,10 @@ const LOCATION_2 = {
describe('Location Editor', () => {
const selectors = {
getAddressRadio: () => {
return cy.findByTestId('location-editor-address-radio');
return cy.findByTestId('location-editor-address-radio').find('input');
},
getCoordinatesRadio: () => {
return cy.findByTestId('location-editor-coordinates-radio');
return cy.findByTestId('location-editor-coordinates-radio').find('input');
},
getSearchInput: () => {
return cy.findByTestId('location-editor-search');
Expand Down
16 changes: 7 additions & 9 deletions packages/boolean/src/BooleanEditor.tsx
View file
Open in desktop
Expand Up @@ -2,9 +2,8 @@ import * as React from 'react';
import get from 'lodash/get';
import { nanoid } from 'nanoid';
import { FieldAPI, ParametersAPI, FieldConnector } from '@contentful/field-editor-shared';
import { RadioButtonField } from '@contentful/forma-36-react-components';

import { TextLink, Flex } from '@contentful/f36-components';
import { TextLink, Flex, Radio } from '@contentful/f36-components';

export interface BooleanEditorProps {
/**
Expand Down Expand Up @@ -57,19 +56,18 @@ export function BooleanEditor(props: BooleanEditorProps) {
const checked = value === item.value;
return (
<Flex marginRight="spacingM" key={id}>
<RadioButtonField
labelIsLight
<Radio
id={id}
checked={checked}
labelText={item.label}
disabled={disabled}
isDisabled={disabled}
value={item.value === undefined ? '' : String(item.value)}
isChecked={checked}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.checked) {
setOption(e.target.value);
}
}}
/>
}}>
{item.label}
</Radio>
</Flex>
);
})}
Expand Down
38 changes: 16 additions & 22 deletions packages/location/src/LocationSelector.tsx
View file
Open in desktop
@@ -1,12 +1,12 @@
import React from 'react';
import { css } from 'emotion';
import tokens from '@contentful/forma-36-tokens';
import { RadioButtonField, FieldGroup } from '@contentful/forma-36-react-components';
import { FieldGroup } from '@contentful/forma-36-react-components';
import { LocationSearchInput } from './LocationSearchInput';

import { Coords, ViewType, GeocodeApiResponse } from './types';

import { TextLink, TextInput } from '@contentful/f36-components';
import { TextLink, TextInput, Radio } from '@contentful/f36-components';

interface LocationSelectorProps {
disabled: boolean;
Expand Down Expand Up @@ -53,34 +53,28 @@ export function LocationSelector(props: LocationSelectorProps) {
<div className={styles.root}>
<div className={styles.main}>
<FieldGroup row>
<RadioButtonField
labelText="Address"
labelIsLight
disabled={props.disabled}
<Radio
id={ViewType.Address}
testId="location-editor-address-radio"
isDisabled={props.disabled}
value={ViewType.Address}
isChecked={props.view === ViewType.Address}
onChange={() => {
props.onChangeView(ViewType.Address);
}}
inputProps={{
testId: 'location-editor-address-radio',
}}
checked={props.view === ViewType.Address}
/>
<RadioButtonField
labelText="Coordinates"
labelIsLight
disabled={props.disabled}
}}>
Address
</Radio>
<Radio
id={ViewType.Coordinates}
testId="location-editor-coordinates-radio"
isDisabled={props.disabled}
value={ViewType.Coordinates}
isChecked={props.view === ViewType.Coordinates}
onChange={() => {
props.onChangeView(ViewType.Coordinates);
}}
inputProps={{
testId: 'location-editor-coordinates-radio',
}}
checked={props.view === ViewType.Coordinates}
/>
}}>
Coordinates
</Radio>
</FieldGroup>
{props.view === ViewType.Address && (
<div className={styles.inputsRow}>
Expand Down
25 changes: 12 additions & 13 deletions packages/markdown/src/dialogs/EmdebExternalContentDialog.tsx
View file
Open in desktop
Expand Up @@ -10,8 +10,9 @@ import {
TextLink,
Button,
Checkbox,
Radio,
} from '@contentful/f36-components';
import { TextField, RadioButtonField, Form } from '@contentful/forma-36-react-components';
import { TextField, Form } from '@contentful/forma-36-react-components';
import { isValidUrl } from '../utils/isValidUrl';

const styles = {
Expand Down Expand Up @@ -118,24 +119,22 @@ export const EmbedExternalContentModal = ({ onClose }: EmbedExternalContentModal
}
/>
<div className={styles.radioButtonGroup}>
<RadioButtonField
className={styles.radioButton}
<Radio
id="unit-option-percent"
checked={selectedUnit === 'percent'}
labelText="percent"
value="percent"
isChecked={selectedUnit === 'percent'}
onChange={() => setUnit('percent')}
labelIsLight
/>
<RadioButtonField
className={styles.radioButton}
className={styles.radioButton}>
percent
</Radio>
<Radio
id="unit-option-pixels"
checked={selectedUnit === 'px'}
labelText="pixels"
value="pixels"
isChecked={selectedUnit === 'px'}
onChange={() => setUnit('px')}
labelIsLight
/>
className={styles.radioButton}>
pixels
</Radio>
</div>
</div>
<Checkbox
Expand Down
17 changes: 8 additions & 9 deletions packages/radio/src/RadioEditor.tsx
View file
Open in desktop
Expand Up @@ -7,10 +7,10 @@ import {
LocalesAPI,
} from '@contentful/field-editor-shared';
import { getOptions, parseValue } from '@contentful/field-editor-dropdown';
import { Form, RadioButtonField } from '@contentful/forma-36-react-components';
import { Form } from '@contentful/forma-36-react-components';
import * as styles from './styles';

import { TextLink, Flex } from '@contentful/f36-components';
import { TextLink, Flex, Radio } from '@contentful/f36-components';

export interface RadioEditorProps {
/**
Expand Down Expand Up @@ -64,19 +64,18 @@ export function RadioEditor(props: RadioEditorProps) {
const checked = value === item.value;
return (
<Flex key={id} alignItems="center">
<RadioButtonField
labelIsLight
<Radio
id={id}
checked={checked}
labelText={item.label}
disabled={disabled}
isDisabled={disabled}
value={item.value === undefined ? '' : String(item.value)}
isChecked={checked}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.checked) {
setOption(e.target.value);
}
}}
/>
}}>
{item.label}
</Radio>
{checked && (
<TextLink as="button" className={styles.clearBtn} onClick={clearOption}>
Clear
Expand Down