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

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

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/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 Remove titleIcon and instead add modalStyle param the to Mo…
5747247 
…dal classes
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 Add modalStyle to template files that use dialog component
3bd602d
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 Use isWarnable button when using 'negative' modalStyle
3978726
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 Define modalStyle when using dialog component
3bc4a9a
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 Add modalStyle when using AjaxModal
44fda73
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 Add modalStyle when using ConfirmationModal modal
afd1e1f
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 Add modalStyle when using RedirectConfirmationModal modal
46a28be
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 Add notes for modalStyle parameter to FormBuilderVocabulary…
7de8703 
….php and formButtons template
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 Add modalStyle when using RemoteActionConfirmationModal modal
baca9c9
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 Add modalStyle when using AjaxModal modal
324b2fa
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 Remove unexpected comma on ConfirmationModalHandler.js file
9a6db7e
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 Update button click when showing an error on DOI modal
abc0657
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 DOI cypress - use correct text when clicking the button
c0610ec
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 Use primary modal style when showing install confirmation m…
3f65008 
…odal
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 Remove modalStyle param when using AjaxModal class
2ea528d
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 Use modalStyle 'default' for Modal class
39494cd
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 Use basic modalStyle for legacy use of Dialog component
76e235c
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 Update documentation for Modal classes
90204d0
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 14, 2024
@blesildaramirez
pkp#10444 DOI - Cypress: Click button that contains text OK instead o…
fe5c54d 
…f Close
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Nov 14, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add modalStyle when using AjaxModal modal
3abd2ed
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Nov 14, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add modalStyle when using RemoteActionConfirmationM…
27db2f3 
…odal modal
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Nov 14, 2024
@blesildaramirez
pkp/pkp-lib#10444 Remove modalStyle param value when using AjaxModal
8ed5af6
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Nov 14, 2024
@blesildaramirez
pkp/pkp-lib#10444 Submodule update ##blesildaramirez/i10444##
fe3bc41
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Nov 14, 2024
@blesildaramirez
pkp/pkp-lib#10444 Define modalStyle when using dialog component
247883a
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Nov 14, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add modalStyle when using AjaxModal
ad6a7d3
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Nov 14, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add modalStyle when using RemoteActionConfirmationM…
eaf92e2 
…odal modal
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Nov 14, 2024
@blesildaramirez
pkp/pkp-lib#10444 Add modalStyle to plugins that use modal confirmati…
73c931e 
…onns
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Nov 14, 2024
@blesildaramirez
pkp/pkp-lib#10444 Remove modalStyle param when using AjaxModal class
8f8cf76
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Nov 14, 2024
@blesildaramirez
pkp/pkp-lib#10444 Submodule update ##blesildaramirez/i10444##
7113452
blesildaramirez added a commit to blesildaramirez/ops that referenced this issue Nov 14, 2024
@blesildaramirez
pkp/pkp-lib#10444 Submodule update ##blesildaramirez/i10444##
40cabd6
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