Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Separating border:none from .cell and removing from .root to avoid style override in DetailsColumn #7211

Merged
merged 6 commits into from
Dec 5, 2018

Conversation

arkogupta
Copy link
Contributor

@arkogupta arkogupta commented Nov 22, 2018

Pull request checklist

Description 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 : none property which the root class of detailsColumn was being passed. Due to some extra property being passed to the root by the consumer, there was another instance of the same property being applied which was overridding the border properties applied to the borderWhileDragging class. The <div> tag containing the column gets 2 classes : borderWhileDragging-x and root-y where y > x meaning the style properties for the root class was overridding the one applied to borderWhileDragging. border:undefined doesn't inject any border styling specifically thus preventing any kind of override. Since border:none and undefined would essentially be the same, this fix is much better than the previous.

Microsoft Reviewers: Open in CodeFlow

@arkogupta arkogupta changed the title Arkgupta/drag drop border fix Changing border:none to border:undefined to avoid style override in DetailsColumn Nov 22, 2018
Copy link
Member

@KevinTCoughlin KevinTCoughlin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

👍

Copy link
Member

@KevinTCoughlin KevinTCoughlin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕐

@arkogupta arkogupta changed the title Changing border:none to border:undefined to avoid style override in DetailsColumn Separating border:none from .cell and removing from .root to avoid style override in DetailsColumn Dec 3, 2018
@micahgodbolt micahgodbolt merged commit 0492281 into microsoft:master Dec 5, 2018
@msft-github-bot
Copy link
Contributor

🎉[email protected] has been released which incorporates this pull request.:tada:

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)
  ...
@microsoft microsoft locked as resolved and limited conversation to collaborators Aug 30, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Border CSS getting overridden by consumer
6 participants