Skip to content

Commit

Permalink
👌 [#454] PR feedback round 1
Browse files Browse the repository at this point in the history
  • Loading branch information
sergei-maertens committed Oct 25, 2023
1 parent 1065d09 commit 9c855e7
Show file tree
Hide file tree
Showing 8 changed files with 32 additions and 33 deletions.
5 changes: 2 additions & 3 deletions src/components/EditGrid/EditGrid.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import {ButtonGroup} from '@utrecht/component-library-react';
import {Button, ButtonGroup} from '@utrecht/component-library-react';
import PropTypes from 'prop-types';
import React from 'react';
import {FormattedMessage} from 'react-intl';

import Button from 'components/Button';
import FAIcon from 'components/FAIcon';

const DefaultAddButtonLabel = () => (
Expand All @@ -22,7 +21,7 @@ const EditGrid = ({children, onAddItem, addButtonLabel}) => (

{onAddItem && (
<ButtonGroup>
<Button type="button" variant="primary" onClick={onAddItem}>
<Button type="button" appearance="primary-action-button" onClick={onAddItem}>
{addButtonLabel || <DefaultAddButtonLabel />}
</Button>
</ButtonGroup>
Expand Down
7 changes: 4 additions & 3 deletions src/components/EditGrid/EditGrid.stories.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {Button} from '@utrecht/component-library-react';

import Body from 'components/Body';
import Button from 'components/Button';

import {EditGrid, EditGridButtonGroup, EditGridItem} from '.';

Expand All @@ -17,7 +18,7 @@ export default {
heading="Item 1"
buttons={
<EditGridButtonGroup>
<Button variant="primary">A button</Button>
<Button appearance="primary-action-button">A button</Button>
</EditGridButtonGroup>
}
>
Expand All @@ -27,7 +28,7 @@ export default {
heading="Item 2"
buttons={
<EditGridButtonGroup>
<Button variant="primary">A button</Button>
<Button appearance="primary-action-button">A button</Button>
</EditGridButtonGroup>
}
>
Expand Down
13 changes: 4 additions & 9 deletions src/components/EditGrid/EditGridButtonGroup.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,12 @@ import {ButtonGroup} from '@utrecht/component-library-react';
import PropTypes from 'prop-types';
import React from 'react';

const EditGridButtonGroup = ({children}) => {
const role = children && React.Children.count(children) > 1 ? 'group' : undefined;
return (
<ButtonGroup role={role} className="utrecht-button-group--openforms-editgrid">
{children}
</ButtonGroup>
);
};
const EditGridButtonGroup = ({children}) => (
<ButtonGroup className="utrecht-button-group--openforms-editgrid">{children}</ButtonGroup>
);

EditGridButtonGroup.propTypes = {
children: PropTypes.arrayOf(PropTypes.node.isRequired),
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
};

export default EditGridButtonGroup;
9 changes: 6 additions & 3 deletions src/components/EditGrid/EditGridItem.stories.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {Button} from '@utrecht/component-library-react';

import Body from 'components/Body';
import Button from 'components/Button';

import {EditGridButtonGroup, EditGridItem as EditGridItemComponent} from '.';

Expand All @@ -15,8 +16,10 @@ export default {
children: <Body>Item body, typically form fields</Body>,
buttons: (
<EditGridButtonGroup>
<Button variant="primary">Save</Button>
<Button variant="danger">Remove</Button>
<Button appearance="primary-action-button">Save</Button>
<Button appearance="primary-action-button" hint="danger">
Remove
</Button>
</EditGridButtonGroup>
),
},
Expand Down
4 changes: 2 additions & 2 deletions src/components/appointments/steps/ChooseProductStep.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import {Button} from '@utrecht/component-library-react';
import {FieldArray, Form, Formik} from 'formik';
import produce from 'immer';
import PropTypes from 'prop-types';
Expand All @@ -8,7 +9,6 @@ import {useNavigate} from 'react-router-dom';
import {z} from 'zod';
import {toFormikValidationSchema} from 'zod-formik-adapter';

import Button from 'components/Button';
import {CardTitle} from 'components/Card';
import {EditGrid, EditGridButtonGroup, EditGridItem} from 'components/EditGrid';
import FAIcon from 'components/FAIcon';
Expand Down Expand Up @@ -117,7 +117,7 @@ const ProductWrapper = ({index, numProducts, onRemove, children}) => {

const buttonRow = numProducts > 1 && (
<EditGridButtonGroup>
<Button type="button" variant="danger" onClick={onRemove}>
<Button type="button" appearance="primary-action-button" hint="danger" onClick={onRemove}>
<FormattedMessage
description="Appointments: remove product/service button text"
defaultMessage="Remove"
Expand Down
6 changes: 5 additions & 1 deletion src/formio/components/TextField.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,11 @@ export const TextFieldsWithLocation = {
await waitFor(async () => {
expect(canvas.getByLabelText('Street')).toHaveDisplayValue('Keizersgracht');
});
expect(canvas.getByLabelText('City')).toHaveDisplayValue('Amsterdam');
// form.io renderer is a bit flaky and one field being updated does not guarantee
// the next is too.
await waitFor(async () => {
expect(canvas.getByLabelText('City')).toHaveDisplayValue('Amsterdam');
});
});
},
};
Expand Down
15 changes: 6 additions & 9 deletions src/formio/templates/editGrid.ejs
Original file line number Diff line number Diff line change
@@ -1,32 +1,29 @@
<div class="openforms-editgrid">
<div>
{% ctx.rows.forEach(function(row, rowIndex) { %}
<div class="utrecht-form-fieldset openforms-editgrid__item" ref="{{ctx.ref.row}}">
<div class="utrecht-form-fieldset openforms-editgrid__item">
<fieldset class="utrecht-form-fieldset__fieldset utrecht-form-fieldset--html-fieldset">
{% if (!!ctx.component.groupLabel) { %}
<legend class="utrecht-form-fieldset__legend utrecht-form-fieldset__legend--html-legend openforms-editgrid__item-heading">
{{ ctx.t(ctx.component.groupLabel, { _userInput: true }) }} {{ rowIndex + 1 }}
</legend>
{% } %}

<div>{{row}}</div>
<div ref="{{ctx.ref.row}}">{{row}}</div>

{% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
<p
class="utrecht-button-group utrecht-button-group--openforms-editgrid"
{% if (ctx.component.removeRow) { %}role="group"{% } %}
>
<p class="utrecht-button-group utrecht-button-group--openforms-editgrid">

<button
class="openforms-button openforms-button--primary utrecht-button utrecht-button--html-button utrecht-button--primary-action"
class="utrecht-button utrecht-button--html-button utrecht-button--primary-action"
ref="{{ctx.ref.saveRow}}"
>
{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}
</button>

{% if (ctx.component.removeRow) { %}
<button
class="openforms-button openforms-button--danger utrecht-button utrecht-button--html-button utrecht-button--secondary-action utrecht-button--danger"
class="utrecht-button utrecht-button--html-button utrecht-button--primary-action utrecht-button--danger"
ref="{{ctx.ref.cancelRow}}"
>
{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}
Expand All @@ -49,7 +46,7 @@
{% if (!ctx.readOnly && ctx.hasAddButton) { %}
<p class="utrecht-button-group">
<button
class="openforms-button openforms-button--primary utrecht-button utrecht-button--html-button utrecht-button--primary-action"
class="utrecht-button utrecht-button--html-button utrecht-button--primary-action"
ref="{{ctx.ref.addRow}}"
>
<i class="{{ctx.iconClass('plus')}}"></i>
Expand Down
6 changes: 3 additions & 3 deletions src/formio/templates/editGridRow.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@
{% } %}

{% if (!ctx.self.options.readOnly) { %}
<p class="utrecht-button-group utrecht-button-group--openforms-editgrid" role="group">
<button class="{{ctx.ofPrefix}}button editRow">
<p class="utrecht-button-group utrecht-button-group--openforms-editgrid">
<button class="utrecht-button utrecht-button--html-button utrecht-button--secondary-action editRow">
<i class="{{ ctx.iconClass('edit') }}"></i>
</button>
<button class="{{ctx.ofPrefix}}button {{ctx.ofPrefix}}button--danger removeRow">
<button class="utrecht-button utrecht-button--html-button utrecht-button--secondary-action utrecht-button--danger removeRow">
<i class="{{ ctx.iconClass('trash-can') }}"></i>
</button>
</p>
Expand Down

0 comments on commit 9c855e7

Please sign in to comment.