-
Notifications
You must be signed in to change notification settings - Fork 116
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* chore: dropdown popover * chore: improvements on bl-button * chore: added autoUpdate at popover * chore: added tests * chore: add dropdown button stories * chore(dropdown): styling improvements * fix(dropdown): new line before custom variable * chore(dropdown): add play functions at story to support chromatic * chore(dropdown): add warning to user if dropdown-item has wrong parents * chore(dropdown): improvements on variable naming * docs(dropdown): improvements on jsdoc * chore(dropdown): improvements on variable naming * fix(dropdown): improvements on dropdown-group css * fix(dropdown): typos * fix(dropdown): tests with custom event * fix(dropdown): variable naming * fix(dropdown): improvements on variable naming and a11y * chore(dropdown): add keyboard navigation * fix(dropdown): test * fix(dropdown): test
- Loading branch information
1 parent
ce67b45
commit a5ce174
Showing
18 changed files
with
1,091 additions
and
15 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -23,6 +23,7 @@ module.exports = { | |
| 'radio', | ||
| 'dialog', | ||
| 'drawer', | ||
| 'dropdown', | ||
| ], | ||
| ], | ||
| }, | ||
|
|
||
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,46 @@ | ||
| :host { | ||
| position: relative; | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .popover { | ||
| --left: 0; | ||
| --top: 0; | ||
| --border-color: var(--bl-color-primary); | ||
|
|
||
| position: fixed; | ||
|
|
||
| /* FIXME: Use z-index variable */ | ||
| z-index: 1; | ||
| display: none; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| padding: var(--bl-size-m); | ||
| gap: var(--bl-size-xs); | ||
| overflow-y: auto; | ||
| background: var(--bl-color-primary-background); | ||
| border: 1px solid var(--border-color); | ||
|
|
||
| /* FIXME: Use variables */ | ||
| box-shadow: 0 10px 15px -8px #27314226; | ||
| border-radius: var(--bl-size-3xs); | ||
| left: var(--left); | ||
| top: var(--top); | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| :host([kind='neutral']) .popover { | ||
| --border-color: var(--bl-color-secondary); | ||
| } | ||
|
|
||
| :host([kind='success']) .popover { | ||
| --border-color: var(--bl-color-success); | ||
| } | ||
|
|
||
| :host([kind='danger']) .popover { | ||
| --border-color: var(--bl-color-danger); | ||
| } | ||
|
|
||
| .visible { | ||
| display: flex; | ||
| } |
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,147 @@ | ||
| import { html } from 'lit'; | ||
| import { ifDefined } from 'lit/directives/if-defined.js'; | ||
| import { styleMap } from 'lit/directives/style-map.js'; | ||
| import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addon-docs'; | ||
| import { userEvent } from '@storybook/testing-library'; | ||
|
|
||
| <Meta | ||
| title="Components/Dropdown Button" | ||
| component="bl-dropdown" | ||
| argTypes={{ | ||
| label: { | ||
| control: { | ||
| type: 'text' | ||
| } | ||
| }, | ||
| variant: { | ||
| options: ['primary', 'secondary', 'tertiary'], | ||
| default: 'primary', | ||
| control: { type: 'select' } | ||
| }, | ||
| kind: { | ||
| options: ['default', 'neutral', 'success', 'danger'], | ||
| default: 'default', | ||
| control: { type: 'select' } | ||
| }, | ||
| disabled: { | ||
| control: 'boolean' | ||
| }, | ||
| size: { | ||
| options: ['large', 'medium', 'small'], | ||
| control: { type: 'select' } | ||
| } | ||
| }} | ||
| /> | ||
|
|
||
| export const dropdownOpener = async ({ canvasElement }) => { | ||
| const dropdown = canvasElement?.querySelector('bl-dropdown') | ||
| if(dropdown.shadowRoot) { | ||
| const button = dropdown.shadowRoot.querySelector('bl-button') | ||
| await userEvent.click(button); | ||
| } | ||
| } | ||
|
|
||
| export const SingleDropdownButtonTemplate = (args) => html`<bl-dropdown | ||
| variant=${ifDefined(args.variant)} | ||
| kind=${ifDefined(args.kind)} | ||
| size=${ifDefined(args.size)} | ||
| label="${ifDefined(args.label)}" | ||
| ?disabled=${args.disabled} | ||
| style=${ifDefined(args.styles ? styleMap(args.styles) : undefined)} | ||
| ><bl-dropdown-group caption="Caption"> | ||
| <bl-dropdown-item>${args.content || 'Action 1'}</bl-dropdown-item> | ||
| <bl-dropdown-item>Action 2</bl-dropdown-item> | ||
| </bl-dropdown-group> | ||
| <bl-dropdown-item>Action 3</bl-dropdown-item> | ||
| <bl-dropdown-item icon="info">Action 4</bl-dropdown-item> | ||
| <bl-dropdown-item>Action 5</bl-dropdown-item> | ||
| <bl-dropdown-group caption="Caption"> | ||
| <bl-dropdown-item icon="heart">Action 6</bl-dropdown-item> | ||
| <bl-dropdown-item>Action 7</bl-dropdown-item> | ||
| </bl-dropdown-group> | ||
| </bl-dropdown>` | ||
|
|
||
| export const Template = (args) => html` | ||
| ${SingleDropdownButtonTemplate({...args})} | ||
| ${SingleDropdownButtonTemplate({variant: 'secondary', ...args})} | ||
| ${SingleDropdownButtonTemplate({variant: 'tertiary', ...args})}` | ||
|
|
||
| export const ButtonTypes = (args) => html` | ||
| ${SingleDropdownButtonTemplate({...args})} | ||
| ${SingleDropdownButtonTemplate({kind: 'neutral', ...args})} | ||
| ${SingleDropdownButtonTemplate({kind: 'success', ...args})} | ||
| ${SingleDropdownButtonTemplate({kind: 'danger', ...args})}` | ||
|
|
||
| export const SizesTemplate = (args) => html` | ||
| ${SingleDropdownButtonTemplate({size: 'large', ...args})} | ||
| ${SingleDropdownButtonTemplate({size: 'medium', ...args})} | ||
| ${SingleDropdownButtonTemplate({size: 'small', ...args})}` | ||
|
|
||
| # Dropdown Button | ||
|
|
||
| Dropdown Button is used to display a list of actions. | ||
|
|
||
| <bl-alert variant="warning" icon caption="Note">Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert> | ||
|
|
||
| ## Dropdown Button Variants | ||
|
|
||
| Dropdown Button has the same variants ([Primary](/docs/components-button--primary-buttons), [Secondary](/docs/components-button--secondary-buttons) and [Tertiary](/docs/components-button--tertiary-buttons)) with the [Button](/docs/components-button--variants). | ||
| Every variant represents the importance of the actions inside it. | ||
|
|
||
| <Canvas> | ||
| <Story name="Variants" play={dropdownOpener}> | ||
| {Template.bind({})} | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| ## Dropdown Button Kinds | ||
|
|
||
| Dropdown Button has the same kinds as the button has. | ||
| Every kind indicates a state of the dropdown buttons. It can has 4 different "kind"s. `default`, `neutral`, `success` and `danger`. | ||
|
|
||
| <Canvas> | ||
| <Story name="Kinds" play={dropdownOpener}> | ||
| {ButtonTypes.bind({})} | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| ## Dropdown Button Sizes | ||
|
|
||
| We have 3 sizes of dropdown buttons: **Large**, **Medium**, **Small**. Default size is **Medium**. | ||
|
|
||
| <Canvas> | ||
| <Story name="Dropdown Button Sizes" play={dropdownOpener}> | ||
| {SizesTemplate.bind({})} | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| If dropdown button has an action with a long text that can not fit in a single line, popover will be automatically widen to the right side of the dropdown button. | ||
|
|
||
| <Canvas> | ||
| <Story name="Automatic Left Align" args={{ content: 'Action with very long text' }} play={dropdownOpener}> | ||
| {SingleDropdownButtonTemplate.bind({})} | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| ## Disabling Dropdown Buttons | ||
|
|
||
| We have 2 types of disabled dropdown buttons: Disable version of Primary and Secondary buttons is the same. | ||
|
|
||
| <Canvas columns={1}> | ||
| <Story name="Disabling Dropdown Buttons" args={{ disabled: true }} play={dropdownOpener}> | ||
| {SizesTemplate.bind({})} | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| Whereas Tertiary buttons keep their transparent backgrounds. | ||
|
|
||
| <Canvas columns={1}> | ||
| <Story name="Disabling Tertiary Dropdown Buttons" args={{ disabled: true, variant:"tertiary" }} play={dropdownOpener}> | ||
| {SizesTemplate.bind({})} | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
|
|
||
| ## Reference | ||
|
|
||
| <ArgsTable of="bl-dropdown" /> |
Oops, something went wrong.