Separating border:none from .cell and removing from .root to avoid style override in DetailsColumn #7211
Conversation
This file contains hidden or 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
arkogupta
changed the title
2 tasks
shre-verse
approved these changes
Nov 23, 2018
KevinTCoughlin
approved these changes
Nov 26, 2018
Member
There was a problem hiding this comment.
Tested a few DetailsList examples with and without drag & drop enabled. The borders look to behave as they do on master so approving this PR. Thank you @arkogupta for this fix by reducing selector specificity.
👍
packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.styles.ts
Outdated
Show resolved
Hide resolved
common/changes/office-ui-fabric-react/arkgupta-dragDropBorderFix_2018-11-22-18-06.json
Outdated
Show resolved
Hide resolved
common/changes/office-ui-fabric-react/arkgupta-dragDropBorderFix_2018-11-22-18-06.json
Outdated
Show resolved
Hide resolved
KevinTCoughlin
approved these changes
Nov 30, 2018
arkogupta
changed the title
Contributor
|
🎉 Handy Links: |
Markionium
added a commit
to Markionium/office-ui-fabric-react
that referenced
this pull request
Dec 7, 2018
* master: (55 commits) Applying package updates. default spellCheck=false in BasePicker (microsoft#7301) Separating border:none from .cell and removing from .root to avoid style override in DetailsColumn (microsoft#7211) Dropdown component honors ariaLabel prop (microsoft#7292) Add extensions for PowerShell, HEIC, 3gp, mak to FileTypeIconMap (microsoft#7299) Fix microsoft#7258 - Documentation is missing for button (microsoft#7302) Applying package updates. Add customizer scope to TeachingBubbleContent (microsoft#7294) Applying package updates. DevExp: Part 2 of 2 - the codebase no longer uses const enums, enabling consumers to be able to use isolatedModules (microsoft#7119) Add card dgl functionality (microsoft#7287) Only support LTS versions of Node 8 and 10 (microsoft#7290) add shift into delete action (microsoft#7274) Update CODEOWNERS Adding RTL support for DetailsList drag-drop to reorder columns (microsoft#7267) Applying package updates. Improve TeachingBubble usage docs (microsoft#7266) Lifting the resolution of default and user provided style variables to Utilities. (microsoft#7261) Re-adding animation for drag-n-drop to reorder columns (microsoft#7213) Update DetailsList Drag & Drop Example Snapshot (microsoft#7272) ...
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
6 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Pull request checklist
$ npm run changeDescription of changes
The previous fix for the same issue (#7171) was not the best way to overcome the conflict which was present. This fix aims to solve the problem while also pinpointing the underlying cause. There was a
border : noneproperty which therootclass of detailsColumn was being passed. Due to some extra property being passed to therootby the consumer, there was another instance of the same property being applied which was overridding theborderproperties applied to theborderWhileDraggingclass. The<div>tag containing the column gets 2 classes :borderWhileDragging-xandroot-ywhere y > x meaning the style properties for the root class was overridding the one applied toborderWhileDragging.border:undefineddoesn't inject any border styling specifically thus preventing any kind of override. Sinceborder:noneandundefinedwould essentially be the same, this fix is much better than the previous.Microsoft Reviewers: Open in CodeFlow