box-ui-elements icon indicating copy to clipboard operation
box-ui-elements copied to clipboard
verified publisher icon box

fix: update modal buttons alignments in element dialogs

Open tjuanitas opened this issue 2 years ago • 2 comments

This is updating the designs of the modals used in Content Explorer and Content Picker. There are three modal components that this is specifically targeting: CreateFolderDialog.js, DeleteConfirmationDialog.js, and RenameDialog.js

I decided to add width: 100%; to all text fields in the base elements stylesheet since 100% seems to be the most ideal value for width in majority of cases for input.

At the moment, components are inheriting width: 262px from the base components stylesheet but this seems to be an arbitrary value and components are overriding it. e.g.

  • Task modal in Sidebar: https://github.com/box/box-ui-elements/blob/b9d196fcf330d38de87890ca8ccf4a5c8433d313/src/elements/content-sidebar/activity-feed/task-form/TaskForm.scss#L14
  • Description in File Properties section in Sidebar: https://github.com/box/box-ui-elements/blob/b9d196fcf330d38de87890ca8ccf4a5c8433d313/src/features/item-details/ItemProperties.scss#L16
  • Content Sharing / USM: https://github.com/box/box-ui-elements/blob/b9d196fcf330d38de87890ca8ccf4a5c8433d313/src/features/unified-share-modal/UnifiedShareModal.scss#L181

Before Screenshot 2023-07-05 at 11 19 50 AM

After Screenshot 2023-07-05 at 11 19 35 AM

tjuanitas avatar Jun 21 '23 03:06 tjuanitas

note to self: the textarea in USM seems to render immediately while the rest of the UI is loading

tjuanitas avatar Jun 23 '23 03:06 tjuanitas

I'll continue more testing of the elements to verify width: 100% has no unintended side effects but PR is ready for review now.

tjuanitas avatar Jul 05 '23 18:07 tjuanitas