-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[PBNTR-515] Remove margin bottom from Typeahead kit, un-revert PBNTR-…
…479 (#3680) **What does this PR do?** A clear and concise description with your runway ticket url. [PBNTR-515](https://runway.powerhrg.com/backlog_items/PBNTR-515) is attempt #2 at [PBNTR-479](https://runway.powerhrg.com/backlog_items/PBNTR-479), which had to be reverted from the Playbook 14.3.1 release due to an issue found in ninja testing where the [Creatable-async-data](https://playbook.powerapp.cloud/kits/typeahead/react#createable-async-data) typeahead used here ([nitroqa link](https://nitro.powerhrg.com/connect/nitroqa.powerhrg.com/powerlife/admin/dizzles_sizzle/new), [component code link](https://github.com/powerhome/nitro-web/blob/297ab6ada0a694f65d91740d17572c2b04d98036/components/brand_headlines/app/javascript/Shared/TagSelector.tsx#L5)) did not work. The change to the React in this PR vs PBNTR-479 mirrors the Rails version of the code much more closely - I realized that there was no need to pass the `marginBottom` prop from the Typeahead.tsx component to it's Control.tsx subcomponent because the `marginBottom="none"` in the subcomponent was being applied to a TextInput, not to anything Typeahead related (so no need to pass props). Steps for PR completion: - [x] Step 1: rectify this specific issue by reworking the React Typeahead margin bottom change (still inspired by the previous datepicker change) and alpha test immediately in nitro-web in this specific location. - [x] Step 2: add in the rest of the work (Rails Typeahead margin bottom work and dark mode margin bottom work from [PBNTR-479's PR](#3654) into this one, and re-alpha test. (Note, the [React Radio Children doc example](https://playbook.powerapp.cloud/kits/radio/react#children) alignment task will no longer included here as PBNTR-373 required a revert as well - this task will likely be a part of that ticket's fix PR). **Screenshots:** Screenshots to visualize your addition/change Rails margin bottom doc example <img width="1308" alt="for PR rails dark mode mb" src="https://github.com/user-attachments/assets/03cab2f3-6c4a-4713-ac4f-3b3d40e08c32"> React margin bottom doc example <img width="1319" alt="for PR react light mode mb" src="https://github.com/user-attachments/assets/3d0c4a0c-0ae9-4826-8e1e-c536544a1765"> Datepicker dark mode margin bottom doc example works (compare vs current prod) <img width="1316" alt="for PR datepicker rails dark" src="https://github.com/user-attachments/assets/761c0100-4335-4bb7-89ae-18ebfde9e548"> **How to test?** Steps to confirm the desired behavior: 1. Go to margin bottom doc example ([rails](https://pr3680.playbook.beta.px.powerapp.cloud/kits/typeahead#margin-bottom)/[react](https://pr3690.playbook.beta.px.powerapp.cloud/kits/typeahead/react#margin-bottom)). 2. Inspect each typeahead to see margin_bottom prop in action. 3. Test typeaheads/typical paths in [nitro-web milano environment](https://pr42423.nitro-web.beta.gm.powerapp.cloud/) to ensure works. The particular typeahead with issues initially inspiring the revert is located [here](https://pr42423.nitro-web.beta.gm.powerapp.cloud/powerlife/admin/dizzles_sizzle/new) (definitely test this one). #### 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. - [x] **TESTS** I have added test coverage to my code.
- Loading branch information
1 parent
f7117bf
commit 80f9134
Showing
13 changed files
with
185 additions
and
10 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
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
88 changes: 88 additions & 0 deletions
88
playbook/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb
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,88 @@ | ||
<% | ||
options = [ | ||
{ label: 'Orange', value: '#FFA500' }, | ||
{ label: 'Red', value: '#FF0000' }, | ||
{ label: 'Green', value: '#00FF00' }, | ||
{ label: 'Blue', value: '#0000FF' }, | ||
] | ||
%> | ||
<%= pb_rails("typeahead", props: { | ||
id: "typeahead-default", | ||
placeholder: "All Colors", | ||
options: options, | ||
label: "None", | ||
name: :foo, | ||
is_multi: false, | ||
margin_bottom: "none", | ||
}) | ||
%> | ||
<%= pb_rails("typeahead", props: { | ||
id: "typeahead-default", | ||
placeholder: "All Colors", | ||
options: options, | ||
label: "XXS", | ||
name: :foo, | ||
is_multi: false, | ||
margin_bottom: "xxs", | ||
}) | ||
%> | ||
<%= pb_rails("typeahead", props: { | ||
id: "typeahead-default", | ||
placeholder: "All Colors", | ||
options: options, | ||
label: "XS", | ||
name: :foo, | ||
is_multi: false, | ||
margin_bottom: "xs", | ||
}) | ||
%> | ||
<%= pb_rails("typeahead", props: { | ||
id: "typeahead-default", | ||
placeholder: "All Colors", | ||
options: options, | ||
label: "Default - SM", | ||
name: :foo, | ||
is_multi: false, | ||
}) | ||
%> | ||
<%= pb_rails("typeahead", props: { | ||
id: "typeahead-default", | ||
placeholder: "All Colors", | ||
options: options, | ||
label: "MD", | ||
name: :foo, | ||
is_multi: false, | ||
margin_bottom: "md", | ||
}) | ||
%> | ||
<%= pb_rails("typeahead", props: { | ||
id: "typeahead-default", | ||
placeholder: "All Colors", | ||
options: options, | ||
label: "LG", | ||
name: :foo, | ||
is_multi: false, | ||
margin_bottom: "lg", | ||
}) | ||
%> | ||
<%= pb_rails("typeahead", props: { | ||
id: "typeahead-default", | ||
placeholder: "All Colors", | ||
options: options, | ||
label: "XL", | ||
name: :foo, | ||
is_multi: false, | ||
margin_bottom: "xl", | ||
}) | ||
%> | ||
<%= javascript_tag defer: "defer" do %> | ||
document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) { | ||
console.log('Single Option selected') | ||
console.dir(event.detail) | ||
}) | ||
document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() { | ||
console.log('All options cleared') | ||
}) | ||
<% end %> |
60 changes: 60 additions & 0 deletions
60
playbook/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
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,60 @@ | ||
import React from 'react' | ||
|
||
import Typeahead from '../_typeahead' | ||
|
||
const options = [ | ||
{ label: 'Orange', value: '#FFA500' }, | ||
{ label: 'Red', value: '#FF0000' }, | ||
{ label: 'Green', value: '#00FF00' }, | ||
{ label: 'Blue', value: '#0000FF' }, | ||
] | ||
|
||
const TypeaheadMarginBottom = (props) => { | ||
return ( | ||
<> | ||
<Typeahead | ||
label="None" | ||
marginBottom="none" | ||
options={options} | ||
{...props} | ||
/> | ||
<Typeahead | ||
label="XXS" | ||
marginBottom="xxs" | ||
options={options} | ||
{...props} | ||
/> | ||
<Typeahead | ||
label="XS" | ||
marginBottom="xs" | ||
options={options} | ||
{...props} | ||
/> | ||
<Typeahead | ||
label="Default - SM" | ||
options={options} | ||
{...props} | ||
/> | ||
<Typeahead | ||
label="MD" | ||
marginBottom="md" | ||
options={options} | ||
{...props} | ||
/> | ||
<Typeahead | ||
label="LG" | ||
marginBottom="lg" | ||
options={options} | ||
{...props} | ||
/> | ||
<Typeahead | ||
label="XL" | ||
marginBottom="xl" | ||
options={options} | ||
{...props} | ||
/> | ||
</> | ||
) | ||
} | ||
|
||
export default TypeaheadMarginBottom |
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
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