TextField: Adds borderless option.#1739
Merged
micahgodbolt merged 10 commits intomicrosoft:masterfrom May 8, 2017
martellaj:joem/textfield-borderless
Merged
TextField: Adds borderless option.#1739micahgodbolt merged 10 commits intomicrosoft:masterfrom martellaj:joem/textfield-borderless
micahgodbolt merged 10 commits intomicrosoft:masterfrom
martellaj:joem/textfield-borderless
Conversation
|
@martellaj, |
Member
Author
|
@dzearing, @micahgodbolt - David and I briefly talked about this as an option to get the styling behavior required for the ODSP sharing UI. Also told to include Micha as you've been working with |
Member
|
@martellaj can you add a screen capture of the borderless elements to this thread so that we can see what they look like? |
Member
Author
|
This is what's currently shipped for the share UI. The recent changes to TextField CSS have made my style rules not work anymore, so I chatted with @dzearing about just making it an option of the component. |
dzearing
reviewed
May 8, 2017
| font-size: $ms-font-size-xs; | ||
| } | ||
|
|
||
| .root.rootIsBorderless { |
Member
There was a problem hiding this comment.
probably doesn't need the .root prefix here.
.rootIsBorderless .fieldGroup {
Member
There was a problem hiding this comment.
We should probably be changing the color to transparent rather than nixing the border width. Removing the border might affect alignment and/or high contrast borders.
Member
Author
There was a problem hiding this comment.
Both were fixed in the newest commit.
- Changes selector. - Makes border transparent instead of removing it.
Member
|
@dzearing is this an instance where we should use the mutually exclusive warning? I'm guessing we wouldn't want people to use underlined AND borderless. |
dzearing
approved these changes
May 8, 2017
Contributor
|
We should be adding design guidance whenever there's a new option like this. When is it okay to use a borderless field? Do we have this in the toolkit? In high contrast mode, does the border come back? |
christiango
added a commit
to christiango/office-ui-fabric-react
that referenced
this pull request
May 10, 2017
* Add aria labels for Calendar items * Add change file * support onRender * Added change file * fix build error * address comments * text field semantic slots first draft * Check for Intl API method existence * input field semantics draft * rename generic input category to more specific field category * remove commented code * add rush change file * Initial checkin for @uifabric/styling package (microsoft#1558) * Updates to button. * Updating all buttons. * More button updates. * Moving customizable utilities. * Merge fixes. * Replacing all usages of Button in examples with the appropriate BaseButton variant. * Reverting command button example * Re-adding deprecationMap as a parameter. * Reverting one change because of a cyclic versioning issue. * Fixing lint error. * Adding style package. * Adding animations and icons. * Fixing * Fixing. * Updates, adding classes and animation pages. * Refactored animation page. * Adding theming and all the color classes. * Updating icons to be exported as separate consts. * Updates for lint and gulp. * Updating based on PR feedback. * Updating rush, variety of things in the styling package. * Adding change file. * Removing unnecessary space. * Updating change file, removing unneceessary changes. * Removing yarn lock. * Update package.json * Update package.json * Update package.json * Update package.json * Applying package updates. * Modal: Remove Fabric Core dep by moving to local transitions. (microsoft#1567) * Converted Modal to interal transition so remove core dependency * Change file * Update Modal.scss * Update Modal.tsx * Fixed tests and pulled in animation timing value * Update Modal.tsx * microsoft#1302 Callout: Allow callout to specify background color (microsoft#1403) * microsoft#1302 Callout: Allow callout to specify beak background color * microsoft#1302 Add changes description * Callout: Allow Callout to specify background color. * microsoft#1302 Add change description * microsoft#1302 remove earlier change description * microsoft#1302 add backgroundColor props comment * clean up a todo * make focus async to get rid of sync focus in detailsList (microsoft#1193) * make focus async to get rid of sync focus * change back to setTimeout * rush change * rush change * Update zhiliu-reduceFocusCost_2017-04-21-22-11.json * fix test failure * Remove logos for Fabric JS & Angular project and bring down to same line as iOS project * Searchbox: Fixes for IE11 keystroke miss + flex overflow (microsoft#1583) * Searchbox: Fixes for IE11 key stroke misses and overflow styling * change log * minor fix * Edge doesn't understand flex-basis: 0% * The 'npm start' command now works when adding/removing css classes. (microsoft#1576) * Updates to how we import the styles so that typescript doesn't get confused when classes are added or removed. * Removing unnecessary change. * Message bar mouse events (microsoft#1585) * Fixed pseudo element blocking links in message bars * Added change file * Moved the content attribute into media query so that pseudo element only displays in MQ * microsoft#1097-- DropDown: Adds require to DropDown when required, and adds error message property/state * microsoft#1097-- DropDown: Adds require to DropDown when required, and adds error message property/state * microsoft#1097-- DropDown: removes MessageBox + change file + ScreenShot * microsoft#1097-- DropDown: revises error state per designer feedback * microsoft#1097-- lint * microsoft#1097-- PR feedback, removing dup change file, removing test values * Panel left shadow (microsoft#1586) * Add proper shadow for left hand panel * Add change file * microsoft#1097-- Fix for UnitTests, checking if errorMessage is null. * Applying package updates. * Added focus zone around navigation to make it more keyboard accessible (microsoft#1596) * Added focus zone around navigation to make it more keyboard accessible * Remove ref and change role to menu * removed redundant role attribute * Dropdown: Fix for ellipsis for dropdown items with long strings (microsoft#1589) * Dropdown: Fix for overflow in dropdown * Dropdown: Fix for overflow * Dropdown: Fix for overflow * Dropdown: Fix for overflow * Update dropDownOverlow_2017-04-24-23-48.json * semantic slotify the toggle control * semantic slot-ify radio buttons, border colors are different * Applying package updates. * Show tooltip only on overflow (microsoft#1444) * TooltipHost: Enable showing tooltip only on overflow * Add overflow mode property * Remove redundant code * Fix bad merge (microsoft#1626) * TextField: Convert to flexbox, support addons (microsoft#1574) * Init textfield flexbox updates * Add changefile * Reduced text padding to 1px * Updated docs and fixed linting errors * Fixed caps of Utilities * Fixed icons in multi line * Update TextField.Basic.Example.tsx * Added type to onRender method and fixed hex colors * Removed icon exampe in textfield * People picker edge keyboarding (microsoft#1496) * Adding vertical-align and horizontal only keyboarding to the member list people picker focus zone. * Rush change. * Using FocusZoneDirection enum instead of just the number. * Removing horizontal only param from the member list people picker focus zone. * Use overflow-wrap: break-word instead of word-break: break-all in tooltips, labels and dropdowns (microsoft#1630) * Use overflow-wrap: break-word instead of word-break: break-all in tooltips. Fix microsoft#1627 * Apply word wrapping fixes to other components. * Add fixes keyword to pull request tempmlate * Support auto-navigation to next previous month when selected date changes via props * Fix a few small bugs * change file * Applying package updates. * Updating website paths * Model the toggle control as a checkbox for more universal screen reader support. * Edge + Narrator and FireFox + NVDA have good support for aria-pressed and do not require this change. * JAWS and VoiceOver do not announce anything when aria-pressed changes, so they do not read anything when changing the toggle. * Fix build * Add change file * fix some Textfield bugs, wip * Update Calendar.Inline.Example.tsx * Feature/dropdown ax (microsoft#1625) * Fix some accessibility issues with Dropdown. Inspiration from the example on https://www.w3.org/TR/wai-aria/roles#combobox. * Make the menu be role="listbox" and items role="option" * Add aria-owns to the combobox * Fix aria labels on the items to fix JAWS + IE * Add change file * Fix lint error * Use ariaLabel in Panel and fix up/down keyboard nav for links in DetailsList. (microsoft#1645) * Update Fabric website version number (microsoft#1646) * Updated textfield examples fixes microsoft#1648 (microsoft#1649) * TooltipHost: Include aria-described (microsoft#1628) * Include aria-describedf by on tooltips * Patch notes * id * Condition describedby on visibility * read id from props * Update README.md (microsoft#1653) Minor spelling correction * Applying package updates. * Triple equals! * Re-committing triple equals * Fixing AMD dependency break introduced in 2.23.1. (microsoft#1656) * Fixing import. * Adding change file. * Update tooltiphost-fix_2017-04-28-17-38.json * Applying package updates. * remove a todo * update disabled colors * semantic slotify details list * add rush change file * Applying package updates. * Pivot: render headers only (microsoft#1438) * Pivot: new props headersOnly and getTabId. * New example for separate render of pivot content. * Describe change. * Fixed change description to be higher level. * Update Pivot.Separate.Example.tsx Fix linter error * Update Pivot.Separate.Example.tsx Make state private in pivot example to fix linter issues * Update Pivot.Separate.Example.tsx Undo last change * Declare state public. Should fix TSLint error in CI. * Bumping package dependencies. (microsoft#1671) * Bumping dependencies. * Fixing build errors. * Fixing urls. * Use TS 2.3.2 * withViewport: preserve forceUpdate on update loop. (microsoft#1657) * Fix issue with items not updating on first save * Touch file * Add changes file. Reverse touch. * Update jostrick-fix-viewport_2017-04-28-20-56.json * microsoft#1664 -- Panel: Close button, size, margin and container. Updated to … (microsoft#1668) * microsoft#1664 -- Panel: Close button, size, margin and container. Updated to match spec. * microsoft#1664 -- Rush Change * Update 1664_PanelCloseButton_2017-05-01-23-02.json * List: Correctly measure pages when using display: none. (microsoft#1582) * Prevent hidden measurements. This forces measurement to happen when page is displayed, so next pages will show up properly. This avoids that average gets distorted with zero values. * Added public patch description. * Callout: Support for aria role, label and description (microsoft#1622) * Callout: support for aria role, label and description * change log * Resolving CR comments * Update master_2017-04-27-00-31.json * Calendar: Support auto-navigation when selected date changes via props (microsoft#1632) * Support auto-navigation to next previous month when selected date changes via props * Fix a few small bugs * change file * Update Calendar.Inline.Example.tsx * Triple equals! * Re-committing triple equals * Update master_2017-04-27-00-31.json * ContextMenus: change to using semantic slots (microsoft#1658) * semantic slot-ify context menus * add rush change file * Applying package updates. * Ysliu/calendar aria label nit (microsoft#1676) * fix aria-label from 'next' to 'prev' * rush change * Update ysliu-Calendar-aria-label-nit_2017-05-02-11-44.json * TooltipHost: Add className and fix example button (microsoft#1675) * Fixed bug where props/state were passed in reverse order (microsoft#1679) * Fixed bug where props/state were passed in reverse order * Add change file * Applying package updates. * fix some color choices * Backing out typescript bump, reverting to 2.2.2, due to breaking changes we've found. (microsoft#1686) * Textfield text fixes (microsoft#1663) * Fixed input font * Fixed textfield bugs, fonts, focus * Change file * Applying package updates. * Regression Test: Tests updates (microsoft#1644) * trying * Delete try.ts * updates * RegressionTests: Toggle Tests * REgression Test: test class * Regression Tests: Helper class * RegressionTests: Class updates * Regression Test: Helper Class updates * Regression Tests: helper class updates * Regression Tests: Test Helper class updates * Regression Tests: Test Helper class updates * Regression Tests: Event function * updates * Regression Tests: Test helper functions * Regression Tests: Rush change * Regression Test: Helper function Updates * Regression Tests: linting error updates * Regression Tests: Test helper class * Regression Tests: Test helper functions * Regression Test: Test helper updates * Regression Test: Test helper updates * Regression test: Test helper updates * Regression Tes: test helper updates * Regression Tests: Dialog tests * Regression Tests: Updates * Regression Test: Test updates. * Regression Test: Test udpates * Regression Test: test updates * Regression test: test updates * Regression Test: test updates * Regression Test: Test updates * Regression Test: tests * Regression Test: Tests updates * Regression Test: Tooltip test updates * Regression Test: Toggle Test * Regression tests * Regression Tests * REgression Tests * Regression Tests * Regression Tests * Update visualTests_2017-04-27-23-02.json * Regression Tests * Regression Tests * Regression Test * Regression Test document update * Regression Test document update * Update Facepile.Props.ts * Update visualTests_2017-04-27-23-02.json * Dropdown placeholder text (microsoft#1684) * Updated dropdown to have defaultText * Added change file * Update master_2017-05-02-22-52.json * Update Dropdown.Props.ts * Update Dropdown.tsx * Update Dropdown.Basic.Example.tsx * Dropdown: Tab should close dropdown and tab to next item in tab order * Added change file * Revert "Dropdown: Tab should close dropdown and tab to next item in tab order" This reverts commit 7d2c336. * Revert "Added change file" This reverts commit eb22bf9. * ContextMenu: give disabled text its own slot (microsoft#1682) * semantic slot-ify context menus * add rush change file * fix potential bug * add rush change file * remove old rush change file * Overflow set (microsoft#1537) * Copy Overflow Code into branch * Adding focus zone around overflow set * Updated docs and icon props * Adding change file * Update OverflowSet.Props.ts * Improve prop comments * Fixed a few PR requests * Fixed overflow icon styles * Created an IOverflowItemProps * Updated buttons to accept ClassNames, changed overflowset to use default button, exposed onRenderOverflowButton * Updated example to be more actual use case * Removed default overflow button render as each one will certainly be custom styled. updated docs * Fixed linting errors * Changed onRenderOverfowButton to be of type IButtonProps for better consistency * Update button assign to mix props into empty object * Moved custom onRender to the custom example. Created basic example with just some links * Moved class props into button props file * Commented out overflow set index.ts to keep hidden for now * Fix documentation and added key back to onRenderItems * Fixed linting errors * Revert button changes * updated example and items type * Updated dropdown to have defaultText * Added change file * Update master_2017-05-02-22-52.json * Dropdown: Tab should close dropdown and tab to next item in tab order (microsoft#1691) * Dropdown: Tab should close dropdown and tab to next item in tab order * Added change file * this places the aria label on the menu div as asked by some vendors d… (microsoft#1694) * this places the aria label on the menu div as asked by some vendors doing accessibility testing * added change file * DetailList: Add aria-rowcount and aria-colcount (microsoft#1667) * added aria-rowindex, colindex, rowcount and colcount properties in hope of resolving some accessibility issues * change file * Update users-petdun-gridAriaProperties_2017-05-01-21-52.json * respond to @cschleiden feedback * added null guard for adjusted columns * Fix native types (microsoft#1692) * Remove label from native properties. * Add change file. * Fix textfield test * fix tslint errors * Applying package updates. * Pivot: increased specificty to fix button styles overriding pivot styles (microsoft#1711) * Pivot: increased specificty to fix button styles overriding pivot styles * Adding change file * Fix broken links to PDFs on color and brand icon pages (microsoft#1712) * Re-enabling SSR tests, fixing SSR issues, removing deprecations (microsoft#1710) * Re-enabling SSR tests, fixing SSR issues. * Adding change file. * Removing debugger statements. * removing fsevents. * Pass in new props to _getWeeks so it properly renders when new date range type or first day of week values are passed in * Fixed persona size 28 initials size (microsoft#1715) * Fixed persona size 28 initials size * Rush change file * Dropdown, slider high contrast fixes (microsoft#1718) * Fix high contrast colors for Edge/IE11 * change log * Fixing high contrast styles for slider * Update lydutk-fixedPersonaSize28InitialsHeight_2017-05-04-15-28.json * Applying package updates. * Add readonly to combobox implementation (microsoft#1730) * Calendar: make today configurable to support different timezone (microsoft#1724) * make today configurable for different timezone * change file * revert the margin change * handle in case today was passed in as null * Remove duplicate change file * SearchBox: added the ariaLabel optional property (microsoft#1689) * Add button focus swap example * Fixed contextual menu example * PR feedback * Callout: Add minPagePadding. Dropdown: Expose calloutProps (microsoft#1735) * Callout: Add minPagePadding. Dropdown: Expose calloutProps * Add change file * Updated docs to include the required Fabric component (microsoft#1731) * Updated docs to include the required Fabric component * Updated Fabric docs in duplicate places * Unbreaking the build. Bad merge caused warnings in the build. * Applying package updates. * Tooltip custom render (microsoft#1737) * Tooltip: Added custom content render function and exposed tooltip props to host * Add change file * Moved word-wrap into content div * Let to const and fixed linting errors * Choicegroup focus (microsoft#1738) * ChoiceGroup: Fixed broken focus border * Added change efile * Added high contrast mode as well * Tweaked high contrast settings. Fixed focus on mouse * Fixing lint. (microsoft#1743) * Adds borderless option to TextField component. (microsoft#1739) * Adds borderless option for TextField component. * Adds change file. * Adds borderless option for DatePicker component. * Update joem-textfield-borderless_2017-05-06-22-56.json * Update joem-textfield-borderless_2017-05-06-22-56.json * Update joem-textfield-borderless_2017-05-06-22-56.json * Implements code review feedback. - Changes selector. - Makes border transparent instead of removing it. * Update TextField.scss * Update TextField.Basic.Example.tsx * Enable sp build web in styling (microsoft#1681) * [srdeshpa] Fix for dropdown not handling the disabling and enabling logic in all the cases. * [srdeshpa] Adding manifest.json and enabling sp-build-web * [srdeshpa] fixing the output directory location in the tsconfig.json * [srdeshpa] Adding change file * [srdeshpa] adding local .npmrc * Update enable-sp-build-web-in-styling_2017-05-02-20-15.json * removing .npmrc file * [srdeshpa] Resolved merge conflicts and updating the shrinkwrap to fix a gulp-core-build-typescript error 'The version of the typescript compiler should only be set once.' * Addressing PR comemnts * Update Dropdown.tsx * remove extra file * adding prefer-const rule to the styling ts-lint file * [srdeshpa] Removing "tslint-microsoft-contrib" from @officeui/styling. As it is using the latest version of it and the latest version has a breaking change in it. Now, we will get the stable version of "tslint-microsoft-contrib" from gulp-core-build-typescript. * [srdeshpa] locking tslint-microsoft-contrib to specific version * Removing tslint. * Fixing tslint. * [srdeshpa] Adding write-manifests.json * Applying package updates. * PR feedback * fix typo * Change file * Applying package updates. * ContextualMenu: fix submenu not showing updated props correctly (microsoft#1745) * fixed an issue where a change to submenu items, while the submenu being open would not be reflected properly * undid example changes * adding in change file * Update contextualmenu-submenu-expandfix_2017-05-08-22-07.json * fixed comments and added some safety for various null values * fixed mistype * use better for loop
micahgodbolt
changed the title
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
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
5 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.
Description of changes
borderlessoption toTextFieldcomponent.borderlessoption toDatePickercomponent.