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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve dialog component design #10444

Closed
blesildaramirez opened this issue Sep 18, 2024 · 0 comments
Closed

Improve dialog component design #10444

blesildaramirez opened this issue Sep 18, 2024 · 0 comments
Assignees
@blesildaramirez
Labels
Enhancement:1:Minor A new feature or improvement that can be implemented in less than 3 days. UI/UX Issues affecting the user interface/user experience
Milestone
3.5.0 LTS

Comments

@blesildaramirez
Copy link
Contributor

blesildaramirez commented Sep 18, 2024 •
edited
Loading

Goal:

Improve the existing dialog component to align with the new design coming from Figma.
Introduce a new prop called "modalStyle" which will indicate the styling to be used: ["success", "primary", "negative", "basic"]

Mockups:
For negative state:
image

For success state:
image

Primary Style (default):
image

Basic:
image

Pull requests:
ui-library: pkp/ui-library#415
pkp-lib: #10510
ojs: pkp/ojs#4465
omp: pkp/omp#1726
ops: pkp/ops#790
customBlockManager: pkp/customBlockManager#89 (plugin)
staticPages: pkp/staticPages#87 (plugin)
@blesildaramirez blesildaramirez added Enhancement:1:Minor A new feature or improvement that can be implemented in less than 3 days. UI/UX Issues affecting the user interface/user experience labels Sep 18, 2024
@blesildaramirez blesildaramirez self-assigned this Sep 19, 2024
@blesildaramirez blesildaramirez changed the title Improve dialog component design based on Figma mockups Improve dialog component design Sep 23, 2024
@blesildaramirez blesildaramirez added this to the 3.5.0 LTS milestone Sep 23, 2024
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 25, 2024
@blesildaramirez
pkp/pkp-lib#10444 Change Dialog component styling
ebb1132
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 25, 2024
@blesildaramirez
pkp/pkp-lib#10444 Rename prop type with modalStyle
87312df
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 30, 2024
@blesildaramirez
pkp/pkp-lib#10444 Change Dialog component styling
f9b8710
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 30, 2024
@blesildaramirez
pkp/pkp-lib#10444 Rename prop type with modalStyle
c868e30
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 30, 2024
@blesildaramirez
pkp/pkp-lib#10444 Update default Dialog modal styling
88ccf87
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 1, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add modalStyle param to existing openDialog calls
5f25cff
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 7, 2024
@blesildaramirez
pkp/pkp-lib#10444 Change Dialog component styling
9f088c8
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 7, 2024
@blesildaramirez
pkp/pkp-lib#10444 Rename prop type with modalStyle
136b3e3
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 7, 2024
@blesildaramirez
pkp/pkp-lib#10444 Update default Dialog modal styling
51dda57
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 7, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add modalStyle param to existing openDialog calls
82c1c1e
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 7, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add isDismissible prop to the Dialog component, and…
500adf1 
… add the X button when there are no actions in the props
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Oct 7, 2024
@blesildaramirez
pkp#10444 Remove titleIcon and instead add modalStyle param the to Mo…
10c7579 
…dal classes
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Oct 7, 2024
@blesildaramirez
pkp#10444 Add modalStyle to template files that use dialog component
02eda4c
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Oct 7, 2024
@blesildaramirez
pkp#10444 Use isWarnable button when using 'negative' modalStyle
7fcf7ca
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Oct 7, 2024
@blesildaramirez
pkp#10444 Define modalStyle when using dialog component
d81d33d
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Oct 7, 2024
@blesildaramirez
pkp/pkp-lib#10444 Define modalStyle when using dialog component
e6b552d
blesildaramirez added a commit to blesildaramirez/customBlockManager that referenced this issue Oct 8, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add modalStyle when using dialog component
78f2acc
blesildaramirez added a commit to blesildaramirez/staticPages that referenced this issue Oct 8, 2024
@blesildaramirez
pkp/pkp-lib#10444 Fix URL for managing static page in plugins listing
23bad13
blesildaramirez added a commit to blesildaramirez/staticPages that referenced this issue Oct 8, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add modalStyle when using dialog component
37f6375
blesildaramirez added a commit to blesildaramirez/customBlockManager that referenced this issue Oct 8, 2024
@blesildaramirez
pkp/pkp-lib#10444 Adjust cypress test to click the Appearance tab fir…
49511b1 
…st before clicking its content
blesildaramirez added a commit to blesildaramirez/customBlockManager that referenced this issue Oct 8, 2024
@blesildaramirez
pkp/pkp-lib#10444 [cypress] Reload website page after adding new cust…
08c3bfe 
…omBlock
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 8, 2024
@blesildaramirez
pkp/pkp-lib#10444 Change Dialog component styling
6eb60ee
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 8, 2024
@blesildaramirez
pkp/pkp-lib#10444 Rename prop type with modalStyle
6649b30
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 8, 2024
@blesildaramirez
pkp/pkp-lib#10444 Update default Dialog modal styling
59e465d
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 8, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add modalStyle param to existing openDialog calls
3224f24
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Remove unused classes for dialog component
bfdb3f2
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Remove css style for modal--popup class
8a0f2bf
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Update param name for onClose function in Dialog co…
3a1f364 
…mponent
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Define modalStyle when using dialog component
9d1aa56
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add modalStyle when using AjaxModal
406f612
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add modalStyle when using RemoteActionConfirmationM…
6337d5d 
…odal modal
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add modalStyle to plugins that use modal confirmati…
e1d06c5 
…onns
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Remove modalStyle param when using AjaxModal class
2f9bf49
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Submodule update ##blesildaramirez/i10444##
05ece37
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add modalStyle when using AjaxModal modal
6fbb378
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add modalStyle when using RemoteActionConfirmationM…
66139ac 
…odal modal
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Remove modalStyle param value when using AjaxModal
d1661c5
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Submodule update ##blesildaramirez/i10444##
3973ecc
blesildaramirez added a commit to blesildaramirez/ops that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add modalStyle when using AjaxModal modal
54ec46f
blesildaramirez added a commit to blesildaramirez/ops that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add modalStyle when using RemoteActionConfirmationM…
0241182 
…odal modal
blesildaramirez added a commit to blesildaramirez/ops that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Remove modalStyle param value when using AjaxModal
ccb1de1
blesildaramirez added a commit to blesildaramirez/ops that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Submodule update ##blesildaramirez/i10444##
e3b7cf0
blesildaramirez added a commit to pkp/customBlockManager that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Improve dialog component design (#89)
dd8c68d 
* pkp/pkp-lib#10444 Add modalStyle when using dialog component

* pkp/pkp-lib#10444 Adjust cypress test to click the Appearance tab first before clicking its content

* pkp/pkp-lib#10444 [cypress] Reload website page after adding new customBlock

* pkp/pkp-lib#10444 Change modalStyle value when opening custom block modal

* pkp/pkp-lib#10444 Remove modalStyle param when using AjaxModal class
blesildaramirez added a commit to pkp/staticPages that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Improve dialog component design (#87)
a66ed2b 
* pkp/pkp-lib#10444 Fix URL for managing static page in plugins listing

* pkp/pkp-lib#10444 Add modalStyle when using dialog component

* pkp/pkp-lib#10444 remove modalStyle param when using AjaxModal class
blesildaramirez added a commit that referenced this issue Nov 17, 2024
@blesildaramirez
#10444 Improve dialog component design (#10510)
8355f0c 
* #10444 Remove titleIcon and instead add modalStyle param the to Modal classes

* #10444 Add modalStyle to template files that use dialog component

* #10444 Use isWarnable button when using 'negative' modalStyle

* #10444 Define modalStyle when using dialog component

* #10444 Add modalStyle when using AjaxModal

* #10444 Add modalStyle when using ConfirmationModal modal

* #10444 Add modalStyle when using RedirectConfirmationModal modal

* #10444 Add notes for modalStyle parameter to FormBuilderVocabulary.php and formButtons template

* #10444 Add modalStyle when using RemoteActionConfirmationModal modal

* #10444 Add modalStyle when using AjaxModal modal

* #10444 Remove unexpected comma on ConfirmationModalHandler.js file

* #10444 Update button click when showing an error on DOI modal

* #10444 DOI cypress - use correct text when clicking the button

* #10444 Use primary modal style when showing install confirmation modal

* #10444 Remove modalStyle param when using AjaxModal class

* #10444 Use modalStyle 'default' for Modal class

* #10444 Use basic modalStyle for legacy use of Dialog component

* #10444 Update documentation for Modal classes

* #10444 DOI - Cypress: Click button that contains text OK instead of Close
blesildaramirez added a commit to pkp/ui-library that referenced this issue Nov 17, 2024
@blesildaramirez
pkp/pkp-lib#10444 Improve dialog component design (#415)
b67a68d 
* pkp/pkp-lib#10444 Change Dialog component styling

* pkp/pkp-lib#10444 Rename prop type with modalStyle

* pkp/pkp-lib#10444 Update default Dialog modal styling

* pkp/pkp-lib#10444 Add modalStyle param to existing openDialog calls

* pkp/pkp-lib#10444 Add isDismissible prop to the Dialog component, and add the X button when there are no actions in the props

* pkp/pkp-lib#10444 Add modalStyle to components that use the openDialog api

* pkp/pkp-lib#10444 Update Dialog component to add basic modalStyle and add documentation how the styles are used

* pkp/pkp-lib#10444 Remove computed defination of default modalStyle in Dialog component

* pkp/pkp-lib#10444 Add modalStyle to new dialogs related to user invitations

* pkp/pkp-lib#10444 Remove unused classes for dialog component

* pkp/pkp-lib#10444 Remove css style for modal--popup class

* pkp/pkp-lib#10444 Update param name for onClose function in Dialog component
blesildaramirez added a commit to pkp/ojs that referenced this issue Nov 17, 2024
@blesildaramirez
Merge pull request #4465 from blesildaramirez/i10444
48841b4 
pkp/pkp-lib#10444 [OJS] Improve dialog component design
blesildaramirez added a commit to pkp/omp that referenced this issue Nov 17, 2024
@blesildaramirez
Merge pull request #1726 from blesildaramirez/i10444
43f4ea8 
pkp/pkp-lib#10444 [OMP] Improve dialog component design
blesildaramirez added a commit to pkp/ops that referenced this issue Nov 17, 2024
@blesildaramirez
Merge pull request #790 from blesildaramirez/i10444
73a8259 
pkp/pkp-lib#10444 [OPS] Improve dialog component design
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 18, 2024
@blesildaramirez
pkp/pkp-lib#10444 Re-add removed classes for modal component
89081c6
blesildaramirez added a commit to pkp/ui-library that referenced this issue Nov 18, 2024
@blesildaramirez
pkp/pkp-lib#10444 Re-add removed classes for modal component (#448)
bc1ba17
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 27, 2024
@blesildaramirez
pkp/pkp-lib#10444 Remove inline class for icon title in the Dialog co…
fd3c02f 
…mponent
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 27, 2024
@blesildaramirez
pkp/pkp-lib#10444 Remove font-size css rule when displaying close but…
90ad26a 
…ton in Modal component
blesildaramirez added a commit to pkp/ui-library that referenced this issue Nov 27, 2024
@blesildaramirez
pkp/pkp-lib#10444 Remove inline class for icon title in the Dialog co… (
145ce66 
#452)

* pkp/pkp-lib#10444 Remove inline class for icon title in the Dialog component

* pkp/pkp-lib#10444 Remove font-size css rule when displaying close button in Modal component
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@blesildaramirez blesildaramirez

Labels
Enhancement:1:Minor A new feature or improvement that can be implemented in less than 3 days. UI/UX Issues affecting the user interface/user experience
Projects
None yet
Milestone
3.5.0 LTS
Development

No branches or pull requests
1 participant
@blesildaramirez