Skip to content

Commit

Permalink
style(toast): replace icon with sgds icon
Browse files Browse the repository at this point in the history
  • Loading branch information
@tonghauhive
tonghauhive committed Nov 22, 2024
1 parent 1710e17 commit aa83697
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 65 deletions.
62 changes: 26 additions & 36 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1182,61 +1182,51 @@ <h2>Input</h2>
<h2>Toast</h2>
<div class="row">
<div class="col is-6">
<sgds-toast dismissable >
his is a toast notifications This is a toast notifications his is a toast notifications his is a toast notifications his is a toast notifications his is a toast notifications his is a toast notifications
<sgds-toast dismissable >
<sgds-icon slot="icon" name="info-circle-fill"></sgds-icon>
This is a toast notifications This is a toast notifications his is a toast notifications his is a toast notifications his is a toast notifications his is a toast notifications his is a toast notifications
</sgds-toast>
<sgds-button id="show-toast-btn">show toast</sgds-button>
<sgds-toast autohide id="toast-autohide">
<sgds-icon slot="icon" name="info-circle-fill"></sgds-icon>
autohide
</sgds-toast>
<sgds-toast show="" dismissable>
<sgds-toast show dismissable>
<sgds-icon slot="icon" name="info-circle-fill"></sgds-icon>
This is a toast notifications helklo world
</sgds-toast>
<sgds-toast show="" >
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-airplane" viewBox="0 0 16 16">
<path
d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Zm.894.448C7.111 2.02 7 2.569 7 3v4a.5.5 0 0 1-.276.447l-5.448 2.724a.5.5 0 0 0-.276.447v.792l5.418-.903a.5.5 0 0 1 .575.41l.5 3a.5.5 0 0 1-.14.437L6.708 15h2.586l-.647-.646a.5.5 0 0 1-.14-.436l.5-3a.5.5 0 0 1 .576-.411L15 11.41v-.792a.5.5 0 0 0-.276-.447L9.276 7.447A.5.5 0 0 1 9 7V3c0-.432-.11-.979-.322-1.401C8.458 1.159 8.213 1 8 1c-.213 0-.458.158-.678.599Z">
</path>
</svg>
<sgds-toast show variant="success">
<sgds-icon slot="icon" name="check-circle-fill"></sgds-icon>
<span slot="duration">2 mins ago</span>
This is a toast notifications
</sgds-toast>
<sgds-toast show="" >
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-airplane" viewBox="0 0 16 16">
<path
d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Zm.894.448C7.111 2.02 7 2.569 7 3v4a.5.5 0 0 1-.276.447l-5.448 2.724a.5.5 0 0 0-.276.447v.792l5.418-.903a.5.5 0 0 1 .575.41l.5 3a.5.5 0 0 1-.14.437L6.708 15h2.586l-.647-.646a.5.5 0 0 1-.14-.436l.5-3a.5.5 0 0 1 .576-.411L15 11.41v-.792a.5.5 0 0 0-.276-.447L9.276 7.447A.5.5 0 0 1 9 7V3c0-.432-.11-.979-.322-1.401C8.458 1.159 8.213 1 8 1c-.213 0-.458.158-.678.599Z">
</path>
</svg>
<sgds-toast show variant="danger">
<sgds-icon slot="icon" name="exclamation-circle-fill"></sgds-icon>
<sgds-link slot="action" href="#" target="_blank">Action</sgds-link>
This is a toast notifications
</sgds-toast>
<sgds-toast show="" dismissable >
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-airplane" viewBox="0 0 16 16">
<path
d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Zm.894.448C7.111 2.02 7 2.569 7 3v4a.5.5 0 0 1-.276.447l-5.448 2.724a.5.5 0 0 0-.276.447v.792l5.418-.903a.5.5 0 0 1 .575.41l.5 3a.5.5 0 0 1-.14.437L6.708 15h2.586l-.647-.646a.5.5 0 0 1-.14-.436l.5-3a.5.5 0 0 1 .576-.411L15 11.41v-.792a.5.5 0 0 0-.276-.447L9.276 7.447A.5.5 0 0 1 9 7V3c0-.432-.11-.979-.322-1.401C8.458 1.159 8.213 1 8 1c-.213 0-.458.158-.678.599Z">
</path>
</svg>
<sgds-toast show dismissable variant="warning">
<sgds-icon slot="icon" name="exclamation-triangle-fill"></sgds-icon>
<span slot="action">Action</span>
This is a toast notifications
</sgds-toast>
<sgds-toast show dismissable variant="neutral">
<sgds-icon slot="icon" name="info-circle-fill"></sgds-icon>
<span slot="action">Action</span>
This is a toast notifications
</sgds-toast>
<sgds-toast-container position="bottom-start">
<sgds-toast show>
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-airplane" viewBox="0 0 16 16">
<path
d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Zm.894.448C7.111 2.02 7 2.569 7 3v4a.5.5 0 0 1-.276.447l-5.448 2.724a.5.5 0 0 0-.276.447v.792l5.418-.903a.5.5 0 0 1 .575.41l.5 3a.5.5 0 0 1-.14.437L6.708 15h2.586l-.647-.646a.5.5 0 0 1-.14-.436l.5-3a.5.5 0 0 1 .576-.411L15 11.41v-.792a.5.5 0 0 0-.276-.447L9.276 7.447A.5.5 0 0 1 9 7V3c0-.432-.11-.979-.322-1.401C8.458 1.159 8.213 1 8 1c-.213 0-.458.158-.678.599Z" />
</svg>
<sgds-toast show dismissible>
<sgds-icon slot="icon" name="info-circle-fill"></sgds-icon>
<sgds-link slot="action" href="#" target="_blank">Action</sgds-link>
This is a toast notifications
</sgds-toast>
<sgds-toast show dismissible variant="warning">
<sgds-icon slot="icon" name="exclamation-triangle-fill"></sgds-icon>
<sgds-link slot="action" href="#" target="_blank">Action</sgds-link>
This is a toast notifications
</sgds-toast>
<sgds-toast show bg="warning" status="success"></sgds-toast>
</sgds-toast-container>
<!-- <sgds-toast-container position="top-center">
<sgds-toast show title="hello">This is a toast <span slot="duration">just
now</span></sgds-toast>
<sgds-toast show title="hello">This is a toast</sgds-toast>
</sgds-toast-container> -->
</div>
</div>
</div>
Expand Down
18 changes: 3 additions & 15 deletions src/components/Toast/sgds-toast.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import toastStyle from "./toast.css";
*
* @slot default - The content to pass into toast's body
* @slot action - The content to pass into toast's action
* @slot icon - The icon in toast
*
*
* @event sgds-show - Emitted on show.
Expand Down Expand Up @@ -125,24 +126,11 @@ export class SgdsToast extends ScopedElementsMixin(SgdsElement) {
aria-live="assertive"
aria-atomic="true"
>
<i>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-airplane"
viewBox="0 0 16 16"
>
<path
d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Zm.894.448C7.111 2.02 7 2.569 7 3v4a.5.5 0 0 1-.276.447l-5.448 2.724a.5.5 0 0 0-.276.447v.792l5.418-.903a.5.5 0 0 1 .575.41l.5 3a.5.5 0 0 1-.14.437L6.708 15h2.586l-.647-.646a.5.5 0 0 1-.14-.436l.5-3a.5.5 0 0 1 .576-.411L15 11.41v-.792a.5.5 0 0 0-.276-.447L9.276 7.447A.5.5 0 0 1 9 7V3c0-.432-.11-.979-.322-1.401C8.458 1.159 8.213 1 8 1c-.213 0-.458.158-.678.599Z"
></path>
</svg>
</i>
<slot name="icon"></slot>
<div class="toast-content">
<div class="toast-body">
<strong>${this.title}</strong>
<slot></slot>
<span><slot></slot></span>
</div>
<slot class="toast-action" name="action"></slot>
</div>
Expand Down
38 changes: 24 additions & 14 deletions src/components/Toast/toast.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,62 +2,72 @@
--sgds-toast-border-radius: var(--sgds-border-radius-md)
}

:host([variant="warning"]) {

:host([variant="info"]) slot[name="icon"]::slotted(*) {
color: var(--sgds-primary-color);
}

:host([variant="danger"]) {

:host([variant="success"]) slot[name="icon"]::slotted(*) {
color: var(--sgds-success-color);
}

:host([variant="success"]) {
:host([variant="danger"]) slot[name="icon"]::slotted(*) {
color: var(--sgds-danger-color);
}

:host([variant="info"]) {

:host([variant="warning"]) slot[name="icon"]::slotted(*) {
color: var(--sgds-warning-color);
}

.toast {
--toast-border-color: var(--sgds-gray-800);
--toast-header-color: light-dark(var(--sgds-gray-800), var(--sgds-gray-200));
--toast-header-icon-color: var(--sgds-body-color);
display: flex;
flex-direction: row;
align-items: flex-start;
gap: var(--sgds-gap-xs);
padding: var(--sgds-padding-md) var(--sgds-padding-md);
padding: var(--sgds-padding-md);
background-clip: padding-box;
background-color: var(--sgds-neutral-bg-inverse);
border-radius: var(--sgds-border-radius-md);
color: var(--sgds-subtitle-color);
pointer-events: auto;
width: 320px;
min-width: var(--sgds-dimension-320);
max-width: var(--sgds-dimension-480);
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14);
}

.toast-content {
word-wrap: break-word;
display:flex;
flex-direction:column;
color: var(--sgds-gray-600);
gap: var(--sgds-gap-sm);
}

.toast-body {
display: flex;
flex-direction: column;
}
}

.toast-body strong {
line-height: var(--sgds-line-height-min);
}

.toast-body span {
color: var(--sgds-default-color-subtle);
}

.toast-action {
word-wrap: break-word;
color: var(--sgds-primary-color);
}

.toast-header strong {
margin-right: auto;
word-break: break-all;
}

.close-btn {
margin-left: auto;
}

.d-none{
display: none;
}

0 comments on commit aa83697

Please sign in to comment.