Skip to content

Commit

Permalink
feat: add Button icon
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomasguillot
thomasguillot committed Apr 18, 2024
1 parent 59e2362 commit 6a2d731
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 10 deletions.
4 changes: 2 additions & 2 deletions assets/newspack-ui/scss/elements/_icons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
align-items: center;
border-radius: 100%;
display: flex;
height: var( --newspack-ui-spacer-7 );
height: var( --newspack-ui-spacer-8 );
justify-content: center;
margin: 0 auto var( --newspack-ui-spacer-2 );
width: var( --newspack-ui-spacer-7 );
width: var( --newspack-ui-spacer-8 );

&--success {
background: var( --newspack-ui-color-success-50 );
Expand Down
25 changes: 20 additions & 5 deletions assets/newspack-ui/scss/elements/forms/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,7 @@
outline-offset: 1px;
}

&--wide {
display: flex;
width: 100%;
}

// Styles
&--primary {
background: var( --newspack-ui-color-button-bg );
color: var( --newspack-ui-color-button-text );
Expand Down Expand Up @@ -132,5 +128,24 @@
color: var( --newspack-ui-color-neutral-0 ) !important;
}
}

// Wide
&--wide {
display: flex;
width: 100%;
}

// Icon-only
&--icon {
display: grid;
height: var( --newspack-ui-spacer-7 ); // This is the XS size, we will need S, and M
padding: 0;
place-items: center;
width: var( --newspack-ui-spacer-7 );

svg {
fill: currentcolor;
}
}
}
}
7 changes: 4 additions & 3 deletions assets/newspack-ui/scss/variables/_spacing.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
--newspack-ui-spacer-4: calc( var( --newspack-ui-spacer-base ) * 2.5 ); // 20px
--newspack-ui-spacer-5: calc( var( --newspack-ui-spacer-base ) * 3 ); // 24px
--newspack-ui-spacer-6: calc( var( --newspack-ui-spacer-base ) * 4 ); // 32px - TODO: clamp?
--newspack-ui-spacer-7: calc( var( --newspack-ui-spacer-base ) * 5 ); // 40px - TODO: clamp?
--newspack-ui-spacer-8: calc( var( --newspack-ui-spacer-base ) * 6 ); // 48px - TODO: clamp?
--newspack-ui-spacer-9: calc( var( --newspack-ui-spacer-base ) * 8 ); // 64px - TODO: clamp?
--newspack-ui-spacer-7: calc( var( --newspack-ui-spacer-base ) * 4.5 ); // 36px - TODO: clamp?
--newspack-ui-spacer-8: calc( var( --newspack-ui-spacer-base ) * 5 ); // 40px - TODO: clamp?
--newspack-ui-spacer-9: calc( var( --newspack-ui-spacer-base ) * 6 ); // 48px - TODO: clamp?
--newspack-ui-spacer-10: calc( var( --newspack-ui-spacer-base ) * 8 ); // 64px - TODO: clamp?
}
40 changes: 40 additions & 0 deletions includes/class-newspack-ui.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,46 @@ public static function return_demo_content() {

<hr>

<h2>Buttons Icon</h2>
<p>Uses the same classes as the <code>newspack-ui__button</code> but we add an extra class to it <code>newspack-ui__button--icon</code></p>
<button class="newspack-ui__button newspack-ui__button--icon">
<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="M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z"/>
</svg>
</button>
<button class="newspack-ui__button newspack-ui__button--primary newspack-ui__button--icon">
<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="M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z"/>
</svg>
</button>
<button class="newspack-ui__button newspack-ui__button--branded newspack-ui__button--icon">
<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="M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z"/>
</svg>
</button>
<button class="newspack-ui__button newspack-ui__button--secondary newspack-ui__button--icon">
<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="M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z"/>
</svg>
</button>
<button class="newspack-ui__button newspack-ui__button--ghost newspack-ui__button--icon">
<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="M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z"/>
</svg>
</button>
<button class="newspack-ui__button newspack-ui__button--outline newspack-ui__button--icon">
<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="M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z"/>
</svg>
</button>
<button class="newspack-ui__button newspack-ui__button--destructive newspack-ui__button--icon">
<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="M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z"/>
</svg>
</button>

<hr>

<h2>Modals</h2>

<div class="newspack-ui__box">
Expand Down

0 comments on commit 6a2d731

Please sign in to comment.