Skip to content

Commit

Permalink
feat: update icon button, update button classes, fix helper text
Browse files Browse the repository at this point in the history
  • Loading branch information
@laurelfulford
laurelfulford committed Apr 19, 2024
1 parent 75bd158 commit 9e7bdd4
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 37 deletions.
17 changes: 2 additions & 15 deletions assets/newspack-ui/scss/_modals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@
display: flex;
justify-content: space-between;
position: sticky;
top: 0;
top: 0;

h2 {
font-family: var( --newspack-ui-font-family );
Expand All @@ -143,20 +143,7 @@
}

&__close {
margin: -2px -5px 0 0; // Offsets a padding in the SVG.
padding: 0 0 0 var( --newspack-ui-spacer-base );
background: transparent;
color: var( --newspack-ui-color-neutral-90 );
cursor: pointer;

&:focus,
&:hover {
background: transparent;
color: var( --newspack-ui-color-neutral-70 );
}
svg {
display: block;
}
margin: -6px -6px -6px 0; // Accounts for the header padding. TODO: Can this be improved to work w/variables?
}

&__content {
Expand Down
2 changes: 1 addition & 1 deletion assets/newspack-ui/scss/elements/forms/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@
// Icon-only
&--icon {
display: grid;
height: var( --newspack-ui-spacer-7 ); // This is the XS size, we will need S, and M
height: var( --newspack-ui-spacer-7 ); // TODO: This is the XS size, we will need S, and M
padding: 0;
place-items: center;
width: var( --newspack-ui-spacer-7 );
Expand Down
6 changes: 5 additions & 1 deletion assets/newspack-ui/scss/elements/forms/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,16 @@
}

// Container for input description.
&__field-description {
&__helper-text {
color: var( --newspack-ui-color-neutral-60 );
display: block;
font-size: var( --newspack-ui-font-size-xs );
line-height: var( --newspack-ui-line-height-s );
margin: var( --newspack-ui-spacer-base ) 0 var( --newspack-ui-spacer-5 );

label & {
margin: 0;
}
}

// Form response inline error text.
Expand Down
32 changes: 16 additions & 16 deletions includes/class-newspack-ui.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,31 +173,31 @@ public static function return_demo_content() {
<input type="checkbox" name="checkbox-option-1">
<span>
<strong>The Weekly</strong><br>
Friday roundup of the most relevant stories.
<span class="newspack-ui__helper-text">Friday roundup of the most relevant stories.</span>
</span>
</label>

<label class="newspack-ui__input-list">
<input type="checkbox" name="checkbox-option-2">
<span>
<strong>The Weekly</strong><br>
Friday roundup of the most relevant stories.
<span class="newspack-ui__helper-text">Friday roundup of the most relevant stories.</span>
</span>
</label>
<br>
<label class="newspack-ui__input-list">
<input type="radio" name="list-radio-option">
<span>
<strong>The Weekly</strong><br>
Friday roundup of the most relevant stories.
<span class="newspack-ui__helper-text">Friday roundup of the most relevant stories.</span>
</span>
</label>

<label class="newspack-ui__input-list">
<input type="radio" name="list-radio-option">
<span>
<strong>The Weekly</strong><br>
Friday roundup of the most relevant stories.
<span class="newspack-ui__helper-text">Friday roundup of the most relevant stories.</span>
</span>
</label>

Expand Down Expand Up @@ -341,7 +341,7 @@ public static function return_demo_content() {
<div class="newspack-ui__modal">
<header class="newspack-ui__modal__header">
<h2>This is a header</h2>
<button class="newspack-ui__modal__close">
<button class="newspack-ui__button newspack-ui__button--icon newspack-ui__button--ghost newspack-ui__modal__close">
<span class="screen-reader-text"><?php esc_html_e( 'Close', 'newspack-plugin' ); ?></span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
Expand All @@ -366,7 +366,7 @@ public static function return_demo_content() {
<header class="newspack-ui__modal__header">
<h2>Auth Modal Contents Default</h2>

<button class="newspack-ui__modal__close">
<button class="newspack-ui__button newspack-ui__button--icon newspack-ui__button--ghost newspack-ui__modal__close">
<span class="screen-reader-text"><?php esc_html_e( 'Close', 'newspack-plugin' ); ?></span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
Expand Down Expand Up @@ -414,7 +414,7 @@ public static function return_demo_content() {
<header class="newspack-ui__modal__header">
<h2>Auth Modal Contents OTP</h2>

<button class="newspack-ui__modal__close">
<button class="newspack-ui__button newspack-ui__button--icon newspack-ui__button--ghost newspack-ui__modal__close">
<span class="screen-reader-text"><?php esc_html_e( 'Close', 'newspack-plugin' ); ?></span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
Expand Down Expand Up @@ -451,7 +451,7 @@ public static function return_demo_content() {
<header class="newspack-ui__modal__header">
<h2>Auth Modal Contents Success</h2>

<button class="newspack-ui__modal__close">
<button class="newspack-ui__button newspack-ui__button--icon newspack-ui__button--ghost newspack-ui__modal__close">
<span class="screen-reader-text"><?php esc_html_e( 'Close', 'newspack-plugin' ); ?></span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
Expand Down Expand Up @@ -487,7 +487,7 @@ public static function return_demo_content() {
<header class="newspack-ui__modal__header">
<h2>Auth Modal Contents Success + PW</h2>

<button class="newspack-ui__modal__close">
<button class="newspack-ui__button newspack-ui__button--icon newspack-ui__button--ghost newspack-ui__modal__close">
<span class="screen-reader-text"><?php esc_html_e( 'Close', 'newspack-plugin' ); ?></span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
Expand All @@ -513,7 +513,7 @@ public static function return_demo_content() {
<p>
<label>Set a display name</label>
<input type="text">
<span class="newspack-ui__field-description">This will be used to address you in emails, and when you leave comments.</span>
<span class="newspack-ui__helper-text">This will be used to address you in emails, and when you leave comments.</span>
</p>

<p>
Expand All @@ -523,7 +523,7 @@ public static function return_demo_content() {
<p>
<label>Confirm Password</label>
<input type="password">
<span class="newspack-ui__field-description">If you don't set a password, you can always log in with a magic link or one-time code sent to your email.</span>
<span class="newspack-ui__helper-text">If you don't set a password, you can always log in with a magic link or one-time code sent to your email.</span>
</p>
</form>

Expand All @@ -539,7 +539,7 @@ public static function return_demo_content() {
<header class="newspack-ui__modal__header">
<h2>Auth Modal Newsletter Sign Up</h2>

<button class="newspack-ui__modal__close">
<button class="newspack-ui__button newspack-ui__button--icon newspack-ui__button--ghost newspack-ui__modal__close">
<span class="screen-reader-text"><?php esc_html_e( 'Close', 'newspack-plugin' ); ?></span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
Expand All @@ -556,15 +556,15 @@ public static function return_demo_content() {
<input type="checkbox" name="checkbox-option-1">
<span>
<strong>The Weekly</strong><br>
Friday roundup of the most relevant stories.
<span class="newspack-ui__helper-text">Friday roundup of the most relevant stories.</span>
</span>
</label>

<label class="newspack-ui__input-list">
<input type="checkbox" name="checkbox-option-2">
<span>
<strong>The Weekly</strong><br>
Friday roundup of the most relevant stories.
<span class="newspack-ui__helper-text">Friday roundup of the most relevant stories.</span>
</span>
</label>

Expand All @@ -580,7 +580,7 @@ public static function return_demo_content() {
<header class="newspack-ui__modal__header">
<h2>Auth Modal Contents Default</h2>

<button class="newspack-blocks-modal__close newspack-ui__modal__close">
<button class="newspack-ui__button newspack-ui__button--icon newspack-ui__button--ghost newspack-ui__modal__close">
<span class="screen-reader-text"><?php esc_html_e( 'Close', 'newspack-plugin' ); ?></span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
Expand Down Expand Up @@ -613,7 +613,7 @@ public static function return_demo_content() {
</p>

<button class="newspack-ui__button newspack-ui__button--primary newspack-ui__button--wide">Sign In</button>
<button class="newspack-ui__button newspack-ui__button--tertiary newspack-ui__button--wide">Sign in to existing account</button>
<button class="newspack-ui__button newspack-ui__button--ghost newspack-ui__button--wide">Sign in to existing account</button>
</form>
</section>

Expand Down
8 changes: 4 additions & 4 deletions includes/reader-activation/class-reader-activation.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1125,9 +1125,9 @@ public static function render_auth_form() {
<button type="button" class="newspack-ui__button newspack-ui__button--wide newspack-ui__button--secondary" data-action="otp" data-send-code><?php \esc_html_e( 'Resend code', 'newspack-plugin' ); ?></button>
<button type="button" class="newspack-ui__button newspack-ui__button--wide newspack-ui__button--secondary" data-action="pwd" data-send-code><?php \esc_html_e( 'Email me a one-time code instead', 'newspack-plugin' ); ?></button>
<a class="newspack-ui__button newspack-ui__button--wide newspack-ui__button--secondary" data-action="pwd" href="<?php echo \esc_url( \wp_lostpassword_url() ); ?>"><?php \esc_html_e( 'Forgot password', 'newspack-plugin' ); ?></a>
<button type="button" class="newspack-ui__button newspack-ui__button--wide newspack-ui__button--tertiary newspack-ui__last-child" data-action="signin" data-set-action="register"><?php \esc_html_e( 'Create an account', 'newspack-plugin' ); ?></button>
<button type="button" class="newspack-ui__button newspack-ui__button--wide newspack-ui__button--tertiary newspack-ui__last-child" data-action="register" data-set-action="signin"><?php \esc_html_e( 'Sign in to an existing account', 'newspack-plugin' ); ?></button>
<button type="button" class="newspack-ui__button newspack-ui__button--wide newspack-ui__button--tertiary newspack-ui__last-child" data-action="otp pwd" data-back><?php \esc_html_e( 'Go back', 'newspack-plugin' ); ?></button>
<button type="button" class="newspack-ui__button newspack-ui__button--wide newspack-ui__button--ghost newspack-ui__last-child" data-action="signin" data-set-action="register"><?php \esc_html_e( 'Create an account', 'newspack-plugin' ); ?></button>
<button type="button" class="newspack-ui__button newspack-ui__button--wide newspack-ui__button--ghost newspack-ui__last-child" data-action="register" data-set-action="signin"><?php \esc_html_e( 'Sign in to an existing account', 'newspack-plugin' ); ?></button>
<button type="button" class="newspack-ui__button newspack-ui__button--wide newspack-ui__button--ghost newspack-ui__last-child" data-action="otp pwd" data-back><?php \esc_html_e( 'Go back', 'newspack-plugin' ); ?></button>
</form>
<a href="#" class="auth-callback newspack-ui__button newspack-ui__button--wide newspack-ui__button--primary" data-action="success"><?php \esc_html_e( 'Continue', 'newspack-plugin' ); ?></a>
<a href="#" class="set-password newspack-ui__button newspack-ui__button--wide newspack-ui__button--secondary" data-action="success"><?php \esc_html_e( 'Set a password (optional)', 'newspack-plugin' ); ?></a>
Expand Down Expand Up @@ -1159,7 +1159,7 @@ public static function render_auth_modal() {
<div class="newspack-ui__modal newspack-ui__modal--small">
<div class="newspack-ui__modal__header">
<h2><?php _e( 'Sign In', 'newspack-plugin' ); ?></h2>
<button class="newspack-ui__modal__close">
<button class="newspack-ui__button newspack-ui__button--icon newspack-ui__button--ghost newspack-ui__modal__close">
<span class="screen-reader-text"><?php esc_html_e( 'Close', 'newspack-plugin' ); ?></span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
Expand Down

0 comments on commit 9e7bdd4

Please sign in to comment.