thlack.surfs.blocks.components — thlack/surfs 2021.01.25

A hiccup-like interface for creating views in Slack applications via blocks. https://api.slack.com/reference/block-kit/blocks

actions clj

(actions & args)

A block that is used to hold interactive elements.

Component usage:

[:actions {:block_id "B123"}
 [:radio-buttons {:action_id "A123"}
  [:option {:value "1"} "Pepperoni"]
  [:option {:value "2" :selected? true} "Pineapple"]
  [:option {:value "3"} "Mushrooms"]]
 [:channels-select {:action_id "A456" :initial_channel "C123"}
  [:placeholder "Select channel"]]]

Without props:

[:actions
 [:radio-buttons {:action_id "A123"}
  [:option {:value "1"} "Pepperoni"]
  [:option {:value "2" :selected? true} "Pineapple"]
  [:option {:value "3"} "Mushrooms"]]
 [:channels-select {:action_id "A456" :initial_channel "C123"}
  [:placeholder "Select channel"]]]

context clj

(context & args)

Displays message context, which can include both images and text.

Component usage:

[:context {:block_id "B123"}
 [:image {:alt_text "It's Bill" :image_url "http://www.fillmurray.com/200/300"}]
 [:text "This is some text"]]

Without props:

[:context
 [:image {:alt_text "It's Bill" :image_url "http://www.fillmurray.com/200/300"}]
 [:text "This is some text"]]

divider clj

(divider)

(divider props)

A content divider. Functions much like HTML's <hr> element.

Component usage:

[:divider]

fields clj

(fields & texts)

Not technically an element provided by Slack, but this component is useful for adding semantic value to section blocks.

Component usage:

[:fields
 [:markdown "# Field 1"]
 [:plain-text "Field 2"]]

header clj

(header text)

(header props text)

A plain-text block that displays in a larger, bold font.

Component usage:

[:header {:block_id "B123"} "Hello"]

Without props:

[:header "Hello"]

image clj

(image props)

(image props title)

A simple image block.

Component usage:

[:image {:image_url "http://www.fillmurray.com/200/300"
         :alt_text "It's Bill"
         :block_id "B123"}
 [:title "Wowzers!"]]

input clj

(input & args)

A block that collects information from users. In order to distinguish between hint and label children, the label child (or a child that evaluates to a plain text element) MUST be the first child included in the component.

Component usage:

[:input {:block_id "B123" :dispatch_action false :optional false}
 [:label "Some input"]
 [:hint "Do something radical"]
 [:plain-text-input {:action_id "A123"
                     :initial_value "hello"}
  [:placeholder "Greeting"]]]

Without props:

[:input
 [:label "Some input"]
 [:hint "Do something radical"]
 [:plain-text-input {:action_id "A123"
                     :initial_value "hello"}
  [:placeholder "Greeting"]]]

section clj

(section & args)

Can be used as a simple text block, or in combination with multiple text fields. Can contain a single accessory block element.

The section block is unique in how it handles text and fields. When rendering a section block with 3 arguments - that is a props map and 2 children, some care must be taken. See the fdef for the section function to see the permutation of arguments supported.

Component usage:

[:section {:block_id "B123"}
 [:text "This is an important action"]
 [:datepicker {:action_id "A123" :initial_date "2020-11-30"}
  [:placeholder "The date"]
  [:confirm {:confirm "Ok!" :deny "Nah!" :title "You sure?!?!?"}
   [:text "This is irreversible!"]]]]

Without props:

[:section
 [:text "This is an important action"]
 [:datepicker {:action_id "A123" :initial_date "2020-11-30"}
  [:placeholder "The date"]
  [:confirm {:confirm "Ok!" :deny "Nah!" :title "You sure?!?!?"}
   [:text "This is irreversible!"]]]]