Skip to content

feat(block-kit): add block element examples - #227

Merged
zimeg merged 14 commits into
mainfrom
block-element-examples
Sep 1, 2026
Merged

feat(block-kit): add block element examples#227
zimeg merged 14 commits into
mainfrom
block-element-examples

Conversation

@zimeg

@zimeg zimeg commented Aug 28, 2026

Copy link
Copy Markdown
Member

Summary

Adds dedicated block element examples under block-kit/, one file per element in src/elements/ with a matching test in tests/elements/.

Each example mirrors the JSON payload(s) from the element's docs.slack.dev reference page verbatim — hosted in a valid block (or input) where the element requires one, so each is a runnable payload rather than a bare element that can't be sent on its own. Where a reference page documents multiple payloads, every one is exemplified, and each test asserts the complete reference JSON.

The example directory is elements/ (not block_elements/) so the layout reads blocks/ + elements/, matching the docs.slack.dev path structure where Blocks and Block elements are siblings under Block Kit — and matching the sibling bolt-js-examples and bolt-java-examples PRs. The SDK's own slack_sdk.models.blocks.block_elements imports are unaffected by the rename.

This PR is the home for block elements the SDK implements; elements not yet implemented in the SDK are a separate follow-up.

Elements covered

34 elements, 49 examples.

Element Examples
Broadcast 1
Button 4 (regular, primary, link, hosted section + actions)
Channel 1
Checkboxes 1
Color 1
Date 1
Date picker 1
Datetime picker 1
Email input 1
Emoji 1
Feedback buttons 1
File input 1
Icon button 1
Image 3 (image_url, slack_file by url, slack_file by id)
Link 1
Multi-select menu 5 (static, external, users, conversations, channels)
Number input 1
Overflow menu 1
Plain-text input 1
Radio button group 1
Rich text input 1
Rich text list 2
Rich text preformatted 1
Rich text quote 1
Rich text section 1
Select menu 5 (static, external, users, conversations, channels)
Team 1
Text 1
Time picker 1
URL input 1
URL source 2
User 1
Usergroup 1
Workflow button 1

Deferred

The button reference page also documents an agent_prompt variant (Slackbot hand-off), which the SDK does not yet implement — deferred here rather than shipping an example whose serialized payload wouldn't include the field.

Testing

ruff check, ruff format --check, mypy, and pytest all pass in block-kit/ (83 tests).

@zimeg zimeg added the enhancement New feature or request label Aug 28, 2026
@zimeg zimeg self-assigned this Aug 28, 2026
@zimeg
zimeg force-pushed the block-element-examples branch 2 times, most recently from 156b8aa to e41731b Compare August 28, 2026 05:20
Add examples for the block elements that the SDK already implements,
each in its own file under block-kit/src/block_elements/ with a
matching test. Every example mirrors the JSON payload(s) from the
element's docs.slack.dev reference page verbatim -- hosted in a valid
block (or input) where the element requires one -- so each is a
runnable payload rather than a bare element that cannot be sent on its
own. Where a reference page documents several payloads, every one is
exemplified (for instance the select and multi-select menus each cover
all five source variants, and the image element covers image_url and
both slack_file forms). Tests assert the complete reference JSON.

Covered: button, checkboxes, date picker, datetime picker, email
input, file input, image, multi-select menu, number input, overflow
menu, plain-text input, radio button group, select menu, time picker,
URL input, and workflow button. Descriptions match the docs copy
verbatim, following the existing blocks/ convention.

The button page also documents an agent_prompt variant (Slackbot
hand-off) that the SDK does not yet implement -- deferred here.

This PR is the home for block elements the SDK implements; elements not
yet implemented in the SDK are a separate follow-up.

Co-Authored-By: Claude <svc-devxp-claude@slack-corp.com>
zimeg and others added 2 commits August 27, 2026 23:33
Adds examples for documented block elements the palette was missing: the rich-text sub-elements (emoji, broadcast, color, date, link, text, channel, user, usergroup, team), the rich-text containers (section, list, quote, preformatted), the rich-text input, the context_actions elements (feedback buttons, icon button), and the URL source. Each ships a matching test asserting the complete reference JSON from docs.slack.dev, plus an alphabetical README entry.

Also reformats every existing block_elements test's expected payload to one key per line with a magic trailing comma so ruff format keeps them exploded.

Co-Authored-By: Claude <svc-devxp-claude@slack-corp.com>
Renames src/block_elements/ -> src/elements/ (and the mirrored tests/)
so the example layout reads blocks/ + elements/, matching the
docs.slack.dev path structure (Blocks and Block elements are siblings
under Block Kit). Import paths and README implementation links follow;
the docs URL slug (block-elements, hyphenated) is unchanged, and the
SDK's own slack_sdk.models.blocks.block_elements imports are untouched.
zimeg and others added 10 commits August 31, 2026 15:26
…le05

Match the bolt-js-examples numbering: the section+actions button payload
is example05 in both, leaving example04 reserved for the deferred
agent_prompt button variant (unimplementable against slack_sdk 3.44.0).

Co-Authored-By: Claude <svc-devxp-claude@slack-corp.com>
The checkboxes example returned a bare SectionBlock, dropping the modal
view the docs example wraps it in. Rebuild example01 to return the
complete View (type: modal, title/submit/close, blocks) so it matches
the docs checkboxes-element payload field-for-field, and assert the full
view in the test.

Co-Authored-By: Claude <svc-devxp-claude@slack-corp.com>
… docs view

The docs.slack.dev reference pages show these two elements inside a full
view, not as a bare input block:

- file_input → a modal view (type/title/submit/close + blocks)
- rich_text_input → a home view (type: "home" + blocks)

Return the full View from example01() in each so the built payload matches
the docs sample JSON 1:1 (same view-wrapper class as the checkboxes fix),
and assert the complete view in each test.

Co-Authored-By: Claude <svc-devxp-claude@slack-corp.com>
The per-example docstring line (the descriptive line after the docs one-liner)
should match the wording reviewed in the JS examples, which are the source of
truth for these descriptions (slack-samples/bolt-js-examples#215). Conform every
Python element example's descriptive line to its JS counterpart verbatim; the
first docstring line (which tracks the docs.slack.dev reference one-liner) and
all payloads are unchanged. checkboxes and workflow_button have no JS example,
so their descriptions are left as-is.

Co-Authored-By: Claude <svc-devxp-claude@slack-corp.com>
Use the concise "A section block containing a group of checkboxes."
descriptive line, matching the reviewed wording style.

Co-Authored-By: Claude <svc-devxp-claude@slack-corp.com>
Drop the explicit emoji=None on plain_text objects whose docs.slack.dev
reference example omits the emoji field (feedback buttons, icon button,
rich text input placeholder). slack_sdk drops None fields, so the
serialized payload is unchanged — this only removes redundant source.
emoji=True is kept where the docs example shows "emoji": true.

Co-Authored-By: Claude <svc-devxp-claude@slack-corp.com>
Build rich text styling with RichTextElementParts.TextStyle(bold=...,
italic=..., strike=...) instead of a stringly-typed style={"bold": True}
dict, in the rich_text_section and text examples. TextStyle serializes
identically, so the payload is unchanged, but the examples now model the
idiomatic, type-checked way to style rich text with the SDK.

Co-Authored-By: Claude <svc-devxp-claude@slack-corp.com>
…rding

Match the element-purpose first line to the reviewed JS wording
("Displays a URL source for referencing within a task card block.") so
the two example sets read the same for this element.

Co-Authored-By: Claude <svc-devxp-claude@slack-corp.com>
…ding

Align the element-purpose first line to the reviewed JS example so the two
sets read identically. NB: the docs time-picker `summary:` frontmatter is
a known upstream bug (it carries the number-input text); JS mirrors it and
Python now matches. Both will be re-aligned to the corrected wording once
the docs summary fix lands (tracked in the devspace-dotfiles queue).

Co-Authored-By: Claude <svc-devxp-claude@slack-corp.com>
…ary)

The time-picker-element docs description: frontmatter carries the
number-input text upstream (docs repo content/reference/block-kit/
block-elements/time-picker-element.md:2). JS mirrors it verbatim; this
aligns the Python README implementation-list line the same way so the
docstring, README, and JS all move in lockstep when the upstream docs
fix lands. Traceability probe — do not pre-correct.

Co-Authored-By: Claude <svc-devxp-claude@slack-corp.com>

@zimeg zimeg left a comment

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🐍 Notes on more review after comparing to adjacent slack-samples/bolt-js-examples#215!

)


def example01() -> list[RichTextBlock]:

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 note: This pattern exists just for these returns but matches current implementation of this example:

def example01() -> list[RichTextBlock]:
"""
Displays formatted, structured representation of text.
https://docs.slack.dev/reference/block-kit/blocks/rich-text-block/
Four basic rich text section examples (basic, bold, italic, strikethrough).
"""
blocks = [
RichTextBlock(
elements=[
RichTextSectionElement(
elements=[
RichTextElementParts.Text(
text="Hello there, I am a basic rich text block!"
)
]
)
]
),
RichTextBlock(
elements=[
RichTextSectionElement(
elements=[
RichTextElementParts.Text(text="Hello there, "),
RichTextElementParts.Text(
text="I am a bold rich text block!", style={"bold": True}
),
]
)
]
),
RichTextBlock(
elements=[
RichTextSectionElement(
elements=[
RichTextElementParts.Text(text="Hello there, "),
RichTextElementParts.Text(
text="I am an italic rich text block!",
style={"italic": True},
),
]
)
]
),
RichTextBlock(
elements=[
RichTextSectionElement(
elements=[
RichTextElementParts.Text(text="Hello there, "),
RichTextElementParts.Text(
text="I am a strikethrough rich text block!",
style={"strike": True},
),
]
)
]
),
]
return blocks

Comment on lines +28 to +37
customizable_input_parameters=[
{
"name": "input_parameter_a",
"value": "Value for input param A",
},
{
"name": "input_parameter_b",
"value": "Value for input param B",
},
],

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🌲 note: These parameters within the workflow_button trigger don't have classes available so for now the example uses plain objects.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment thread block-kit/README.md
- **[Select menu](https://docs.slack.dev/reference/block-kit/block-elements/select-menu-element)**: Allows users to choose an option from a drop down menu. [Implementation](./src/elements/select_menu.py).
- **[Team](https://docs.slack.dev/reference/block-kit/block-elements/team-element)**: Renders as a mention of a workspace or team. [Implementation](./src/elements/team.py).
- **[Text](https://docs.slack.dev/reference/block-kit/block-elements/text-element)**: Displays text, optionally with styling. [Implementation](./src/elements/text.py).
- **[Time picker](https://docs.slack.dev/reference/block-kit/block-elements/time-picker-element)**: Allows users to enter numerical data into a single-line field. [Implementation](./src/elements/time_picker.py).

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⌛ note: This is perhaps unexpected working upstream according to some metadata but we're matching what's shown in HTML at this time.

The docs.slack.dev workflow-button-element page describes this example as
"a section block containing a workflow button element" — match that prose
(was "a section block with a workflow button as an accessory") and keep it
identical to bolt-java-examples.

Co-Authored-By: Claude <svc-devxp-claude@slack-corp.com>
@zimeg
zimeg marked this pull request as ready for review September 1, 2026 06:24
@zimeg
zimeg requested a review from a team as a code owner September 1, 2026 06:24
@zimeg

zimeg commented Sep 1, 2026

Copy link
Copy Markdown
Member Author

🚢 Merging after match with slack-samples/bolt-java-examples#69 and slack-samples/bolt-js-examples#215!

@zimeg
zimeg merged commit 2f3a1b7 into main Sep 1, 2026
7 checks passed
@zimeg
zimeg deleted the block-element-examples branch September 1, 2026 06:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request python Pull requests that update python code

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant