edit recurrence button is aligned properly (#5590)

plone · Jan 5, 2024 · 0fcacc2 · 0fcacc2
1 parent 2bce3a3
commit 0fcacc2
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 4 deletions.
diff --git a/packages/volto/news/5359.bugfix b/packages/volto/news/5359.bugfix
@@ -0,0 +1 @@
+In the recurrence widget, set the vertical alignment of the `edit` button to `middle`. @Ravi-kumar9347
diff --git a/packages/volto/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx b/packages/volto/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx
@@ -746,7 +746,7 @@ class RecurrenceWidget extends Component {
         id={`${fieldSet || 'field'}-${id}`}
       >
         <Grid>
-          <Grid.Row stretched>
+          <Grid.Row stretched verticalAlign="middle">
             <Grid.Column width="4">
               <div className="wrapper">
                 <label htmlFor={`field-${id}`}>{title}</label>

diff --git a/packages/volto/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.test.jsx b/packages/volto/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.test.jsx
@@ -14,7 +14,7 @@ beforeAll(
 
 const mockStore = configureStore();
 
-test('renders a recurrence widget component', async () => {
+test('renders a recurrence widget component with aligned columns', async () => {
   const store = mockStore({
     intl: {
       locale: 'en',

diff --git a/...c/components/manage/Widgets/RecurrenceWidget/__snapshots__/RecurrenceWidget.test.jsx.snap b/...c/components/manage/Widgets/RecurrenceWidget/__snapshots__/RecurrenceWidget.test.jsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders a recurrence widget component 1`] = `
+exports[`renders a recurrence widget component with aligned columns 1`] = `
 <div
   className="inline field recurrence-widget"
   id="field-my-field"
@@ -9,7 +9,7 @@ exports[`renders a recurrence widget component 1`] = `
     className="ui grid"
   >
     <div
-      className="stretched row"
+      className="stretched middle aligned row"
     >
       <div
         className="four wide column"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		In the recurrence widget, set the vertical alignment of the `edit` button to `middle`. @Ravi-kumar9347