This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-01-16
Channels
- # announcements (2)
- # babashka (51)
- # beginners (165)
- # biff (39)
- # clara (1)
- # clj-kondo (20)
- # cljsrn (6)
- # clojure (64)
- # clojure-belgium (11)
- # clojure-conj (2)
- # clojure-europe (12)
- # clojure-nl (3)
- # clojure-norway (7)
- # clojure-uk (6)
- # clojurescript (11)
- # conf-proposals (1)
- # conjure (1)
- # core-async (19)
- # cursive (6)
- # data-science (16)
- # datomic (6)
- # deps-new (4)
- # fulcro (60)
- # funcool (3)
- # graalvm (9)
- # helix (14)
- # introduce-yourself (4)
- # jobs-discuss (13)
- # joyride (1)
- # kaocha (2)
- # malli (12)
- # off-topic (25)
- # polylith (9)
- # portal (3)
- # practicalli (1)
- # rdf (43)
- # re-frame (7)
- # reagent (5)
- # releases (5)
- # remote-jobs (8)
- # sci (5)
- # shadow-cljs (42)
- # squint (6)
- # xtdb (5)
In RAD, what I am doing wrong here in trying to use an icon for an action ?
ro/row-actions [{:label (fn [_ {:thing/keys [id]}] (ui-icon {:key (str id) :name "trash"}))[com.fulcrologic.semantic-ui.elements.icon.ui-icon :refer [ui-icon]]I’m doing a similar thing in my reports. Works fine. RAD Version? There were some places where I wasn’t doing labels right that I fixed a few versions ago
No error or warning. According to React Components view, the element is in dom just does not render anything visible..
Do I need to include it explicitly, is it not baked into semantic ui?
the only css I have is semantic.min.css
locally
right, I see url(themes/default/assets/fonts/icons.woff2) in the .css
you can pull in the node module using package.json and mirror it from there, or follow their instructions for building a custom version that installs into local directories
ah, not, sorry, it is from CDN: Request URL:
hm, https://cdn.jsdelivr.net/npm/[email protected]/dist/themes/default/assets/fonts/icons.woff2 exists and works fine
Ah, the icons are downloaded fine it seems Request URL: I priginally filtered only for css files 😅
In the html I see <i aria-hidden="true" class="trash icon"></i> which seems correct to me, so now figuring out what the issue is…
The only trash -related class applied to the element is
i.icon.trash:before {
content: "\f1f8";
}somehow the font is not applied 😭
not sure what I am missing. This trivial page is displaying no icons either:
The icons work in this minimalist example:
<html>
<head><link type="text/css" rel="stylesheet" href="" /></head>
<body><h1>Icon: <i class="edit icon"></i> / <i class="trash icon"></i></h1></body>
</html> Hm, something is wrong with the label. Having (dom/i :.trash.icon {:key "xxx"}) elsewhere in the app works fine but this:
ro/row-actions {:label (fn [_ _] (dom/i :.trash.icon {:key "xxx"}))
:action ...}]FOUND IT! If I remove the class buttons from the parent div (ie. <div class="ui buttons"> -> <div class="ui"> then the icon shows up.
WRONG: `ro/row-actions [{:label (fn [ ] (i :.trash.icon {:key "xxx"})) …`
CORRECT:
ro/row-actions [{:label (fn [_ _] (button :.ui.icon.button {:key "xxx"} (i :.trash.icon))) …Ok, the saga does not end. @U0CKQ19AQ if I make a button icon label like ☝️ then clicking it will have no effect and will instead trigger the :event/select-row event. And here is why:
(if (string? label)
(dom/button :.ui.button {:key idx
:disabled disabled?
:onClick onClick}
label)
label)I see that report-level controls support :icon param that makes this much simpler…
correct the third arg of your row action for label includes the control itself, so you can grab action
:label (fn [this props {:keys [action]}]
(su/icon
{:name "trash"
:onClick (fn [] (when action (action this props)))Perhaps it would make sense to send PR to add :icon support to row action controls, just as we do for report controls?
ro/row-actions docstring reads
>
* `:label` : REQUIRED. A string or `(fn [report-instance row-props] string-or-element?)`.Will do. I guess it will also be so that only one of label / icon is required, i.e. if I provide icon I can omit label.
So, one thing to consider but maybe the cat’s already out of the bag: in the case of label one can argue that it is sufficiently general to be a simple keyword. Once we move into icons it get a little more grey. I was trying to make things so general that you could use a text terminal library with RAD, and icons might be a no-go in some places. However, for assistive technologies unlabled icons are also a no-no, so I think label is always required, and icon is an optional UI-specific (possibly unsupported) option where in HTML-land it gets and aria-label if it is just an icon? But then what if you want a button with an icon and a label. Then you’re back to just doing a custom control with :label as a fn.
meh. I kinda got tired of thinking of all the edge cases and have just been adding practical things as I go…but just throwing that out there so you at least have some context on a wider goal.
thank you for that! and it makes perfect sense.
I guess I will just follow what ActionButton does, i.e. (when icon ... )(when label label) though it would be nicer to support a hidden aria label as you rightly pointed out
Better to be consistently wrong than inconsistently and occasionally right 🙂
Eh, you are right …. again 😅 Maybe I need to think about it more overnight.
you see why I’ve slowed down on dev. Running two business and trying to do this lift in open-source space is too much for one person 🙂
::suo/report-row-button-renderer is wonderful and I will use it ❤️
That way I have 100% control of what is rendered, without too much typing for each control
FOUND IT! If I remove the class buttons from the parent div (ie. <div class="ui buttons"> -> <div class="ui"> then the icon shows up.
WRONG: `ro/row-actions [{:label (fn [ ] (i :.trash.icon {:key "xxx"})) …`
CORRECT:
ro/row-actions [{:label (fn [_ _] (button :.ui.icon.button {:key "xxx"} (i :.trash.icon))) …https://github.com/fulcrologic/fulcro-i18n/blob/main/I18N.adoc#13-configuring-i18n mentions requiring
The solution was to upgrade from 0.0.5-alpha to 1.0.0 😅 com.fulcrologic.fulcro-i18n.icu-formatter :as icu] but I do see no such namespace there?!
I'm getting Use of undeclared Var error when I try to make a defsc-form use hooks:
(defsc-form Signup
[_this _props]
{fo/attributes [account/email
account/password
account/password-confirmation
account/first-name
account/birthday]
fo/id account/id
:use-hooks? true})This is my error message:
------ WARNING #1 - :undeclared-var --------------------------------------------
File: [file location]/signup.cljc:64:13
--------------------------------------------------------------------------------
61 | :username email}))
62 | uism-env))
63 |
64 | (defsc-form Signup
-------------------^------------------------------------------------------------
Use of undeclared Var match-cloud.ui.account.signup/Signup
--------------------------------------------------------------------------------
65 | [this {::form/keys [errors] :ui/keys [active-step] :or {active-step 0} :as props}]
66 | {fo/attributes [account/email
67 | account/password
68 | account/password-confirmation
--------------------------------------------------------------------------------
[:cards] Build completed. (1725 files, 3 compiled, 1 warnings, 2.12s)
------ WARNING #1 - :undeclared-var --------------------------------------------
File: [file location]/signup.cljc:64:13
--------------------------------------------------------------------------------
61 | :username email}))
62 | uism-env))
63 |
64 | (defsc-form Signup
-------------------^------------------------------------------------------------
Use of undeclared Var match-cloud.ui.account.signup/Signup
--------------------------------------------------------------------------------
65 | [this {::form/keys [errors] :ui/keys [active-step] :or {active-step 0} :as props}]
66 | {fo/attributes [account/email
67 | account/password
68 | account/password-confirmation
--------------------------------------------------------------------------------Hey, sorry, I got busy and didn’t have a chance to look at this. I know there is code in place for hooks support in forms, but I’m not sure I have any production code using the feature. I’ll try to look at it. The original form stuff was never meant to be used with hooks, and I added it somewhat recently. I’m sure I tested it then, but who knows maybe there is a regression.