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

[Docs] Separated out Borders to its own page & [EuiTableRowCell] fixes #5283

Merged
merged 26 commits into from
Oct 20, 2021

Conversation

cchaos
Copy link
Contributor

@cchaos cchaos commented Oct 18, 2021

Borders

Now exists as its own page with a nice breakdown in the side nav.

Screen Shot 2021-10-19 at 06 37 58 AM


EuiTableRowCell now actually supports valign

I noticed that we automatically get this prop by inheriting from the DOM element, but when applied it never override our own custom vertical-align CSS property. So I've not consumed this prop's value and applied it as a class to support "all" the values.

Screen Shot 2021-10-18 at 18 26 18 PM

Also fixed some deprecated prop comments & inheritance as well as:


Checklist

  • Check against all themes for compatibility in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Props have proper autodocs and playground toggles
  • Added documentation
  • [ ] Checked Code Sandbox works for any docs examples
  • Added or updated jest and cypress tests
  • [ ] Checked for breaking changes and labeled appropriately
  • [ ] Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

cchaos added 19 commits September 29, 2021 15:37
…_border

# Conflicts:
#	src-docs/src/components/with_theme/theme_context.tsx
#	src-docs/src/routes.js
#	src-docs/src/views/theme/_breakpoints.js
#	src-docs/src/views/theme/_components/_theme_values_table.tsx
#	src-docs/src/views/theme/_json/_get_json_vars.js
#	src-docs/src/views/theme/_json/eui_theme_dark.json
#	src-docs/src/views/theme/_json/eui_theme_light.json
#	src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx
#	src-docs/src/views/theme/breakpoints/breakpoints.tsx
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5283/

@cchaos cchaos changed the title [Docs] Separated out Borders to its own page & [EuiTableRowCell] update [Docs] Separated out Borders to its own page & [EuiTableRowCell] fixes Oct 19, 2021
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5283/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5283/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5283/

Copy link
Contributor

@miukimiu miukimiu left a comment

Choose a reason for hiding this comment

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

LGTM! 🎉

Tested in Chrome, Safari, Edge and, Firefox.

A minor thing. I noticed that all the hex colors for CSS-in-JS are in uppercase:

Screenshot 2021-10-20 at 13 45 55

For Sass they're in lowercase:

Screenshot 2021-10-20 at 13 45 48

In the "Global values" page, the hex values are also in uppercase:

Screenshot 2021-10-20 at 13 48 33

But in "Theme provider" page they're in lowercase:

Screenshot 2021-10-20 at 13 48 23

Should we only stick to one letter case? If I had to choose I would prefer the lowercase. I think it has better readability.

@cchaos
Copy link
Contributor Author

cchaos commented Oct 20, 2021

Thank for catching that @miukimiu. I agree we should be consistent. Since this PR doesn't introduce the inconsistency itself and is most likely a manner of checking through all the methods of importing our styles, I've moved it to a separate issue. #5287

Copy link
Contributor

@thompsongl thompsongl left a comment

Choose a reason for hiding this comment

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

Looks good! Just a couple small questions

src-docs/src/views/theme/borders/_border_js.tsx Outdated Show resolved Hide resolved
src-docs/src/views/theme/borders/_border_js.tsx Outdated Show resolved Hide resolved
src-docs/src/views/theme/borders/_border_js.tsx Outdated Show resolved Hide resolved
src-docs/src/views/theme/borders/_border_js.tsx Outdated Show resolved Hide resolved
src-docs/src/views/theme/customizing/_border.js Outdated Show resolved Hide resolved
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5283/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5283/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5283/

@cchaos cchaos merged commit e3d8e8d into elastic:master Oct 20, 2021
@cchaos cchaos deleted the theme_languages/2_border branch October 20, 2021 21:00
chandlerprall pushed a commit to chandlerprall/eui that referenced this pull request Oct 26, 2021
elastic#5283)

* Moved Border tokens to its own page
* Figured out a way to get subsections in the sidenav working
* Added the new `_values` under `customizing/`

* [EuiTableRowCell] Actually support `valign` property manually
* [EuiTable*] Fixing some props and mobile options
* Slightly better responsive table styles
ym pushed a commit to ym/eui that referenced this pull request Oct 29, 2021
elastic#5283)

* Moved Border tokens to its own page
* Figured out a way to get subsections in the sidenav working
* Added the new `_values` under `customizing/`

* [EuiTableRowCell] Actually support `valign` property manually
* [EuiTable*] Fixing some props and mobile options
* Slightly better responsive table styles
chandlerprall added a commit that referenced this pull request Nov 5, 2021
* Provide rows for datagrid cells to be owned by

* changelog

* undoing things

* working except virtualized container

* working row wrapper implementation

* Create datagrid row elements on-demand and render cells via portals

* Provide rows for datagrid cells to be owned by

* changelog

* undoing things

* working except virtualized container

* working row wrapper implementation

* Create datagrid row elements on-demand and render cells via portals

* Small style cleanup

* updated changelog

* fixing a bad changelog merge

* oh that style was important

* Update src/components/datagrid/body/data_grid_row_manager.ts

Co-authored-by: Constance <[email protected]>

* Update src/components/datagrid/data_grid_types.ts

Co-authored-by: Constance <[email protected]>

* Ensure unique ID in combobox with prepended or appended labels (#5229)

* Making an explicit check for ID prop in EUI Combobox

* Checking for a user-passed ID prop
* If no user-passed ID, we'll use the `rootId()` class method to set one
* Prepend and append props need an ID to relate label to the input

* Adding example for Combobox with prepended label
* Confirmed the label `for` attribute is referencing input `id`
* Added styles to round the edges of the child `<div>` when we prepend a
  label
* Bumped package.json

* Adding CHANGELOG entry and bumping version

* Update combo_box.tsx

* Updating styles to match other forms with prepend and apppend.

* Finishing Combobox CSS and test updates
* Simplified the Amsterdam overrides for prepended / appended labels
* Added conditional classes to `combo_box.tsx`
* Added unit tests for user passed ID, prepended and appended classes

* Reordering props in child component.

* Final adjustment to ID check in ComboBox

* Final updates to styling and documentation
* Added CSS rules for compressed, prepend and append border radius
* Updated the Display Toggles to include append
* Removed a duplicated instruction paragraph
* Simplified the logic for a unique ID in combobox.ts

* Adding Combobox unique ID to master changelog

* Updated Form Control Layout SCSS
* The borders were still rounded with prepend and append enabled
* Added two more rules to make borders square for full height and compressed

* Move to _combo_box.scss

Co-authored-by: cchaos <[email protected]>

* update i18ntokens

* 40.0.0

* Updated documentation.

* Add combined Jest+Cypress code coverage reports (#5262)

* Install Cypress code coverage dependencies

* Set up required babel+istanbul config

* Set up Cypress code coverage config

@see https://github.com/cypress-io/code-coverage#instrument-unit-tests

* Add script for combining cypress & jest code coverage
-into a single json & html report

* Misc cleanup/ignores

- Ignore new `.nyc_output` dir generated by cypress/istanbul

- Improve Jest config collectCoverageFrom !ignores:
  - DRY out component+services folder patterns with a {,} glob
  - Ignore new Cypress .spec files and .testenv files for jest coverage

- eslintignore the cypress folder, since they're all .js anyway and it has a decent amount of idiosyncracies
+ cleanup unused eslint-disable
+ cleanup cypress comment boilerplate
+ remove unused paths from webpack config

* Add wiki documentation

* [PR feedback] Move nyc config to own file

* [PR feedback] Switch combine coverage script to .sh

* [EuiMarkdownEditor] Add `remark-breaks` and line break plugin (#5272)

* Add remark-breaks and line break plugin to MarkdownEditor

* Update changelog

* [Docs] Separated out Borders to its own page & [EuiTableRowCell] fixes (#5283)

* Moved Border tokens to its own page
* Figured out a way to get subsections in the sidenav working
* Added the new `_values` under `customizing/`

* [EuiTableRowCell] Actually support `valign` property manually
* [EuiTable*] Fixing some props and mobile options
* Slightly better responsive table styles

* Fix CL from #5272

* [Docs] Update EuiDatePicker types (#5318)

* omit unsupported types

* resolve console errors

* CL

* [Cypress] Add flakey test retries + harden intermittent context menu failures (#5317)

* Add Cypress failed test retries to CI run mode

* Increase cy.wait on flaky context menu tests (just in case)

* More hardening

* [Docs] Fix Colors guidelines (#5316)

* use useJsonVars

* use variable

* Update dependency @elastic/charts to ^38.1.0 (#5321)

* PR feedback

* Added a cypress test for datagrid row rendering

* Revert changes(?) to docs/

* revert changelog reformats

* re-ignore a couple datagrid example pages when running a11y tests

* Alternate way to know if the datagrid cells have rendered

* PR feedback

* changelog

Co-authored-by: Constance <[email protected]>
Co-authored-by: Trevor Pierce <[email protected]>
Co-authored-by: cchaos <[email protected]>
Co-authored-by: ian moersen <[email protected]>
Co-authored-by: Caroline Horn <[email protected]>
Co-authored-by: Greg Thompson <[email protected]>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[EuiTableCell] Default table cell alignment in Safari is mixed
4 participants