-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'release/14.2' into dev
- Loading branch information
Showing
6 changed files
with
180 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
This component is an own implementation for OpenProject requirements of contextual elements that affect the content of the page below. Such a component does not exist in the Primer Design System. | ||
|
||
## Overview | ||
|
||
<%= embed OpenProject::Common::SubHeaderPreview, :default %> | ||
|
||
## Anatomy | ||
|
||
**Filter input:** (Optional) It will change depending on the viewport: | ||
|
||
- **Desktop:** A basic [text input](https://primer.style/components/text-input) with a [search icon](https://primer.style/components/text-input#with-leading-and-trailing-visuals) which is mostly used on index pages to filter the elements below. | ||
- **Mobile:** | ||
- There will be an IconButton shown instead of the input | ||
- Clicking that, will show the input again and hide all other elements of the SubHeader | ||
- An additional cancel button is shown to return to the previous state | ||
|
||
**Filter button:** (Optional)A button which is shown next to the filter input (or on the very left, if there is no filter input) | ||
|
||
**Text:** (Optional) A bold text shown in the middle of the SubHeader | ||
|
||
**Action buttons**: (Optional) A set of buttons that are shown on the right side | ||
|
||
|
||
## Best practices | ||
|
||
**Do** | ||
|
||
- Restrict SubHeader actions to the page's content-specific actions (e.g. filtering or creating a new object). | ||
- Use IconButtons instead of Buttons for actions only when the icon is clear enough to describe the action. | ||
|
||
**Don't** | ||
|
||
- Use the SubHeader to perform generic view actions (should be part of the PageHeader) | ||
|
||
## Used in | ||
|
||
* Project list | ||
* Members | ||
* Meetings | ||
* Storages | ||
* ... | ||
|
||
## Examples | ||
|
||
|
||
For detailed examples have a look at the other [preview examples](../../inspect/primer/open_project/sub_header/playground) of the component. | ||
|
||
This is an exemplary playground of the `Primer::OpenProject::SubHeader`. | ||
|
||
<%= embed OpenProject::Common::SubHeaderPreview, :playground, panels: %i[params source] %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
lookbook/previews/open_project/common/sub_header_preview.rb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
module OpenProject | ||
module Common | ||
# @hidden | ||
class SubHeaderPreview < Lookbook::Preview | ||
def default | ||
render(Primer::OpenProject::SubHeader.new) do |component| | ||
component.with_filter_input(name: "filter", label: "Filter") | ||
component.with_filter_button do |button| | ||
button.with_trailing_visual_counter(count: "15") | ||
"Filter" | ||
end | ||
component.with_action_button(scheme: :primary) do |button| | ||
button.with_leading_visual_icon(icon: :plus) | ||
"Create" | ||
end | ||
end | ||
end | ||
|
||
# @label Playground | ||
# @param show_filter_input toggle | ||
# @param show_filter_button toggle | ||
# @param show_action_button toggle | ||
# @param text text | ||
def playground(show_filter_input: true, show_filter_button: true, show_action_button: true, text: "Monday, 12th") | ||
render(Primer::OpenProject::SubHeader.new) do |component| | ||
component.with_filter_input(name: "filter", label: "Filter") if show_filter_input | ||
if show_filter_button | ||
component.with_filter_button do |button| | ||
button.with_trailing_visual_counter(count: "15") | ||
"Filter" | ||
end | ||
end | ||
|
||
component.with_text { text } unless text.nil? | ||
|
||
if show_action_button | ||
component.with_action_button(scheme: :primary) do |button| | ||
button.with_leading_visual_icon(icon: :plus) | ||
"Create" | ||
end | ||
end | ||
end | ||
end | ||
end | ||
end | ||
end |