From f4c5e2fd7f91cf286220ea89f16ae0c7b6b87f3b Mon Sep 17 00:00:00 2001 From: Nick Amantia <92755007+nickamantia@users.noreply.github.com> Date: Tue, 22 Oct 2024 15:35:56 -0400 Subject: [PATCH] [PBNTR-389](Dropdown work - States & Variant Prop [ 1 of 5]) (#3828) [PBNTR-389](https://runway.powerhrg.com/backlog_items/PBNTR-389) This PR adds new state styles and a variant prop with a subtle doc example! Screenshot 2024-09-30 at 2 04 45 PM **How to test?** Steps to confirm the desired behavior: 1. Go to the dropdown kit and confirm styles! #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review. - [ ] **TESTS** I have added test coverage to my code. --- .../playbook/pb_dropdown/_dropdown.scss | 87 ++++++++++++++++++- .../playbook/pb_dropdown/_dropdown.tsx | 9 +- .../docs/_dropdown_separators_hidden.html.erb | 9 ++ .../docs/_dropdown_separators_hidden.jsx | 33 +++++++ .../docs/_dropdown_subtle_variant.html.erb | 10 +++ .../docs/_dropdown_subtle_variant.jsx | 34 ++++++++ .../docs/_dropdown_subtle_variant.md | 1 + .../playbook/pb_dropdown/docs/example.yml | 4 + .../playbook/pb_dropdown/docs/index.js | 2 + .../pb_kits/playbook/pb_dropdown/dropdown.rb | 11 ++- 10 files changed, 195 insertions(+), 5 deletions(-) create mode 100644 playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb create mode 100644 playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx create mode 100644 playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb create mode 100644 playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx create mode 100644 playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss index a64e52f2aa..05b26b4b07 100644 --- a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +++ b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss @@ -69,15 +69,21 @@ padding-bottom: $space_xs; cursor: pointer; &:hover { - background-color: $border_light; + background-color: $bg_light; } &[class*="_focused"] { - background-color: $border_light; + background-color: $bg_light; } &[class*="_list"] { border-bottom: 1px solid $border_light; + + &:hover, &:focus { + .pb_body_kit { + color: $primary; + } + } } &[class*="selected"] { background-color: $primary; @@ -87,7 +93,7 @@ color: $white !important; } &:hover { - background-color: $primary !important; + background-color: $product_1_background !important; } } } @@ -125,6 +131,81 @@ } } + &.separators_hidden { + .dropdown_wrapper { + .pb_dropdown_container { + + [class*="pb_dropdown_option"] { + border: none; + } + } + } + } + + &.subtle { + .dropdown_wrapper { + .pb_dropdown_container { + + [class*="pb_dropdown_option"]:first-child { + margin-top: $space_xs; + } + + [class*="pb_dropdown_option"]:last-child { + margin-bottom: $space_xs; + } + + [class*="pb_dropdown_option"] { + margin: $space_xs; + padding: $space_xs; + border-radius: $border_radius_md; + border-bottom: none; + position: relative; + + &::after { + content: ""; + position: absolute; + left: -$space_xs; + right: -$space_xs; + bottom: -4.5px; + height: 1px; + background: $border_light; + } + } + + [class*="pb_dropdown_option"]:last-child::after { + display: none; + } + } + } + + &.separators_hidden { + .dropdown_wrapper { + .pb_dropdown_container { + [class*="pb_dropdown_option"]:first-child { + margin-top: $space_xs; + } + + [class*="pb_dropdown_option"]:last-child { + margin-bottom: $space_xs; + } + + [class*="pb_dropdown_option"] { + padding: $space_xxs $space_xs; + margin: $space_xxs $space_xs; + + &::after { + height: 0px; + } + + &[class*="selected"] { + border-bottom: none; + } + } + } + } + } + } + &.dark { .dropdown_wrapper { [class*="dropdown_trigger_wrapper"] { diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx index 27234c3fec..28af6eb76a 100644 --- a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +++ b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx @@ -35,7 +35,9 @@ type DropdownProps = { label?: string; onSelect?: (arg: GenericObject) => null; options: GenericObject; + separators: boolean; triggerRef?: any; + variant?: "default" | "subtle"; }; interface DropdownComponent @@ -62,15 +64,20 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => { label, onSelect, options, - triggerRef + separators = true, + triggerRef, + variant = "default", } = props; const ariaProps = buildAriaProps(aria); const dataProps = buildDataProps(data); const htmlProps = buildHtmlProps(htmlOptions); + const separatorsClass = separators ? '' : 'separators_hidden' const classes = classnames( buildCss("pb_dropdown"), globalProps(props), + variant, + separatorsClass, className ); diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb new file mode 100644 index 0000000000..98d2b41939 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb @@ -0,0 +1,9 @@ +<% + options = [ + { label: 'United States', value: 'United States', id: 'us' }, + { label: 'Canada', value: 'Canada', id: 'ca' }, + { label: 'Pakistan', value: 'Pakistan', id: 'pk' }, + ] + +%> +<%= pb_rails("dropdown", props: {options: options, separators: false}) %> \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx new file mode 100644 index 0000000000..053c60e339 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx @@ -0,0 +1,33 @@ +import React from 'react' +import { Dropdown } from 'playbook-ui' + +const DropdownSeparatorsHidden = (props) => { + + const options = [ + { + label: "United States", + value: "United States", + }, + { + label: "Canada", + value: "Canada", + }, + { + label: "Pakistan", + value: "Pakistan", + } + ]; + + + return ( +
+ +
+ ) +} + +export default DropdownSeparatorsHidden \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb new file mode 100644 index 0000000000..8e37f2390f --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb @@ -0,0 +1,10 @@ +<% + options = [ + { label: 'United States', value: 'United States', id: 'us' }, + { label: 'Canada', value: 'Canada', id: 'ca' }, + { label: 'Pakistan', value: 'Pakistan', id: 'pk' }, + ] + +%> + +<%= pb_rails("dropdown", props: { options: options, variant: "subtle", separators: false }) %> \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx new file mode 100644 index 0000000000..e2686d36b3 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx @@ -0,0 +1,34 @@ +import React from 'react' +import { Dropdown } from 'playbook-ui' + +const DropdownSubtleVariant = (props) => { + + const options = [ + { + label: "United States", + value: "United States", + }, + { + label: "Canada", + value: "Canada", + }, + { + label: "Pakistan", + value: "Pakistan", + } + ]; + + + return ( + <> + + + ) +} + +export default DropdownSubtleVariant diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md new file mode 100644 index 0000000000..723805e823 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md @@ -0,0 +1 @@ +For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a more cleaner look. \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/example.yml b/playbook/app/pb_kits/playbook/pb_dropdown/docs/example.yml index f707a2907c..5a88bb3075 100644 --- a/playbook/app/pb_kits/playbook/pb_dropdown/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/example.yml @@ -1,6 +1,7 @@ examples: rails: - dropdown_default: Default + - dropdown_subtle_variant: Subtle Variant - dropdown_subcomponent_structure_rails: Subcomponent Structure - dropdown_with_label: With Label - dropdown_with_custom_options_rails: Custom Options @@ -10,9 +11,11 @@ examples: - dropdown_error: Dropdown with Error - dropdown_default_value: Default Value - dropdown_blank_selection: Blank Selection + - dropdown_separators_hidden: Separators Hidden react: - dropdown_default: Default + - dropdown_subtle_variant: Subtle Variant - dropdown_subcomponent_structure: Subcomponent Structure - dropdown_with_label: With Label - dropdown_with_custom_options: Custom Options @@ -23,6 +26,7 @@ examples: - dropdown_default_value: Default Value - dropdown_blank_selection: Blank Selection - dropdown_clear_selection: Clear Selection + - dropdown_separators_hidden: Separators Hidden # - dropdown_with_autocomplete: Autocomplete # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display # - dropdown_with_external_control: useDropdown Hook diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/index.js b/playbook/app/pb_kits/playbook/pb_dropdown/docs/index.js index e246c75bf3..6753fe53cb 100644 --- a/playbook/app/pb_kits/playbook/pb_dropdown/docs/index.js +++ b/playbook/app/pb_kits/playbook/pb_dropdown/docs/index.js @@ -13,3 +13,5 @@ export { default as DropdownError } from './_dropdown_error.jsx' export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx' export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx' export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx' +export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx' +export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx' diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb index 4f839b17f0..30e6cbd2f5 100644 --- a/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb +++ b/playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb @@ -13,13 +13,18 @@ class Dropdown < Playbook::KitBase prop :default_value prop :blank_selection, type: Playbook::Props::String, default: "" + prop :variant, type: Playbook::Props::Enum, + values: %w[default subtle], + default: "default" + prop :separators, type: Playbook::Props::Boolean, + default: true def data Hash(prop(:data)).merge(pb_dropdown: true) end def classname - generate_classname("pb_dropdown") + generate_classname("pb_dropdown", variant, separators_class, separator: " ") end private @@ -32,6 +37,10 @@ def input_default_value default_value.present? ? default_value.transform_keys(&:to_s)["id"] : "" end + def separators_class + separators ? "" : "separators_hidden" + end + def options_with_blank blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + options : options end