3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-03 00:31:40 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Add a default appearance to context notifications

Browse source
This commit is contained in:
Xavier Julian 2025-03-07 12:54:32 +01:00 • committed by Xaviju
parent e5bccc470b
commit 721760d679
5 changed files with 21 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/app/main/ui/ds/colors.scss
View file

@ -86,6 +86,9 @@ $grayish-red: #bfbfbf;
--color-foreground-error: #{$red-500};
--color-accent-info: #{$blue-500};
--color-background-info: #{$blue-200};
--color-background-default: #{$white};
--color-accent-default: #{$gray-100};
--color-icon-default: #{$blue-teal-700};
--color-background-primary: #{$white};
--color-background-secondary: #{$gray-200};
@ -124,6 +127,9 @@ $grayish-red: #bfbfbf;
--color-foreground-error: #{$red-500};
--color-accent-info: #{$blue-500};
--color-background-info: #{$blue-950};
--color-background-default: #{$gray-950};
--color-accent-default: #{$gray-800};
--color-icon-default: #{$grayish-blue-500};
--color-background-primary: #{$gray-950};
--color-background-secondary: #{$black};

4
frontend/src/app/main/ui/ds/notifications/context-notification.stories.jsx
View file

@ -21,7 +21,7 @@ export default {
control: { type: "select" },
},
level: {
options: ["info", "error", "warning", "success"],
options: ["default", "info", "error", "warning", "success"],
control: { type: "select" },
},
},
@ -30,7 +30,7 @@ export default {
isHtml: false,
type: "context",
appearance: "neutral",
level: "info",
level: "default",
},
parameters: {
controls: {

5
frontend/src/app/main/ui/ds/notifications/context_notification.cljs
View file

@ -17,7 +17,7 @@
[:class {:optional true} :string]
[:type {:optional true} [:maybe [:enum :toast :context]]]
[:appearance {:optional true} [:enum :neutral :ghost]]
[:level {:optional true} [:maybe [:enum :info :warning :error :success]]]
[:level {:optional true} [:maybe [:enum :default :info :warning :error :success]]]
[:is-html {:optional true} :boolean]])
(mf/defc context-notification*
@ -28,13 +28,14 @@
[{:keys [class type appearance level is-html children] :rest props}]
(let [class (dm/str class " " (stl/css-case :contextual-notification true
:contain-html is-html
:level-default (= level :default)
:level-warning (= level :warning)
:level-error (= level :error)
:level-success (= level :success)
:level-info (= level :info)))
level (if (string? level)
(keyword level)
(d/nilv level :info))
(d/nilv level :default))
type (if (string? type)
(keyword type)
(d/nilv type :context))

4
frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs
View file

@ -15,6 +15,7 @@
[level]
(case level
:info i/info
:default i/msg-neutral
:warning i/msg-neutral
:error i/delete-text
:success i/status-tick
@ -22,7 +23,7 @@
(def ^:private schema:notification-pill
[:map
[:level [:enum :info :warning :error :success]]
[:level [:enum :default :info :warning :error :success]]
[:type [:enum :toast :context]]
[:appearance {:optional true} [:enum :neutral :ghost]]
[:is-html {:optional true} :boolean]])
@ -36,6 +37,7 @@
:appearance-ghost (= appearance :ghost)
:type-toast (= type :toast)
:type-context (= type :context)
:level-default (= level :default)
:level-warning (= level :warning)
:level-error (= level :error)
:level-success (= level :success)

7
frontend/src/app/main/ui/ds/notifications/shared/notification_pill.scss
View file

@ -43,6 +43,13 @@
background-color: transparent;
}
.level-default {
--notification-bg-color: var(--color-background-default);
--notification-fg-color: var(--color-foreground-primary);
--notification-border-color: var(--color-accent-default);
--notification-icon-color: var(--color-icon-default);
}
.level-info {
--notification-bg-color: var(--color-background-info);
--notification-fg-color: var(--color-foreground-primary);