Adjust Data properties to add filter, sort, and search booleans #7046

jcfilben · 2023-12-05T20:10:56Z

What does this PR do?

Changes the Data properties prop to include a filter, sort, search boolean for each property. If not specified they will resolve to true.

Where should the reviewer start?

What testing has been done on this PR?

Added a new storybook story Data/Properties

How should this be manually tested?

Do Jest tests follow these best practices?

screen is used for querying.
The correct query is used. (Refer to this list of queries)
asFragment() is used for snapshot testing.

Any background context you want to provide?

What are the relevant issues?

Closes #6871

Screenshots (if appropriate)

Do the grommet docs need to be updated?

Yes

Should this PR be mentioned in the release notes?

Yes

Is this change backwards compatible or is it a breaking change?

Data is still in beta so this is backwards compatible

MikeKingdom

LGTM!

taysea · 2023-12-06T23:49:30Z

TLDR to the below: I understand the direction and desire here, but I'm pausing to wonder if it feels like properties is taking on too much? Also, this is a pretty large shift in the role of properties vs the existing documented behavior, so maybe setting up a review session for this would be valuable to have all devs on same page to discuss?

I understand the direction and desire of these changes in terms of providing more fine grain control over which attributes are filterable, searchable, and sortable. Although, I'm wondering if we're now trying to have properties do "too much" and losing some of the niceties of the existing documented behavior that properties "allows caller to specify how property label renders and which properties should be filterable".

Let's say I have a dataset where a single record is as follows:

{
  id: number;
  name: string;
  location: string;
  status: string;
  cost: number;
  quantity: number;
}

In the scenario where I want to search across everything except id, and only filter on location, status, and cost my configuration of properties would be as follows. Which maybe is completely fine, but I think my initial reaction was that it felt like a lot.

properties={{
   id: { searchable: false, filterable: false },
   name: { filterable: false },
   location: { label: "Location" },
   status: { label: "Status" },
   cost: { label: "Cost" },
   quantity: { filterable: false }
}}

It also feels a little weird to be mixing the presentation of the "label" which only is relevant to the filter presentation alongside the configurations of what is searchable/sortable/filterable.

MikeKingdom · 2023-12-07T00:16:42Z

Re: the concern about this being in 'properties', I won’t be as available to meet, but to me the properties object is much more a way to describe what your properties are and what you want Data to do with them. It doesn’t make any sense to me to come up with some other structure to encode this type of schema. The current doc calls it a schema and doesn’t say this is just for filtering. The fact that the keys in this object imply filterable true but yet they let you specify the label to use seems a little inconsistent, especially since we need that label in various places where we want to refer to a property (DataTableColumns?).

Why not treat this more like how we treat ‘columns’ in DataTable and let it be a spec for what my data is and how to treat it?

Why have to look in multiple places and expose more stuff via DataContext when it could simply look in 'properties'?

-- Mike

taysea · 2023-12-07T18:02:13Z

I definitely like the idea of it serving as a schema and having a sort of "one stop shop" to configure as opposed to having to manage in too many different places. I can get behind this but pausing to think on the maintenance of UI as the attributes collected on an object change over time. Maybe it's not a concern to be worried about, but wanted to bring it up anyway. I suppose playing devil's advocate.

Posing this scenario as a question: Given the proposal in this PR, if properties is configured in a way with X columns as filterable and Y as not filterable, and some time down the line another attribute is added to the data-- with the current setup, that attribute would appear in the UI as filterable as soon as the data contained that attribute. If this is not desired, then a change to the UI code would be needed to set filterable to false on that attribute. Or, to avoid unexpected data being filterable and presented to an end user, there would need to be some coordination by the backend and frontend team so that additional attribute wouldn't be added until the front-end code had been modified. In a real world scenario, to avoid undesired filters being presented to an end user, would this coordination be expected?

Why not treat this more like how we treat ‘columns’ in DataTable and let it be a spec for what my data is and how to treat it?

I agree there's somewhat of a comparison to be made with columns on DataTable serving as a schema and do like that concept. The one difference being what is defined in columns narrows down what gets rendered as a column in the DataTable. Any attributes outside of that won't be rendered, even if the structure of the data changes in the future.

MikeKingdom · 2023-12-08T07:19:23Z

Posing this scenario as a question: Given the proposal in this PR, if properties is configured in a way with X columns as filterable and Y as not filterable, and some time down the line another attribute is added to the data-- with the current setup, that attribute would appear in the UI as filterable as soon as the data contained that attribute. If this is not desired, then a change to the UI code would be needed to set filterable to false on that attribute. Or, to avoid unexpected data being filterable and presented to an end user, there would need to be some coordination by the backend and frontend team so that additional attribute wouldn't be added until the front-end code had been modified. In a real world scenario, to avoid undesired filters being presented to an end user, would this coordination be expected?

Great questions. I might be missing something, but assuming there is a properties attribute, until the attribute is defined in properties it wouldn't appear in the Filter dialog (or be searchable). Once you have a properties attribute, only things that appear in there would be filterable. Any that don't appear in there or ones that have filterable:false in there.

taysea · 2023-12-11T17:54:26Z

Great questions. I might be missing something, but assuming there is a properties attribute, until the attribute is defined in properties it wouldn't appear in the Filter dialog (or be searchable). Once you have a properties attribute, only things that appear in there would be filterable. Any that don't appear in there or ones that have filterable:false in there.

Thanks for clarifying. I think I understand now. So, one shift in this approach is prior properties was optional (if not provided, show all attributes in filters and search), but this switches the behavior to be required (don't allow searching or filtering until it's been configured in properties). I can see the argument for that in terms of alignment with the columns concept.

jcfilben · 2023-12-11T17:57:01Z

Thanks for clarifying. I think I understand now. So, one shift in this approach is prior properties was optional (if not provided, show all attributes in filters and search), but this switches the behavior to be required. I can see the argument for that in terms of alignment with the columns concept.

In this approach properties is still optional. If you don't provide it everything defaults to true (filterable, searchable, sortable) same as the current behavior.

…mes to allow for future enhancements beyond boolean value

taysea

LGTM! Can you just adjust the PR description to reflect the final property values?

jcfilben · 2023-12-11T22:08:10Z

LGTM! Can you just adjust the PR description to reflect the final property values?

Yes, updated!

* Gets the remove icon from theme (#6960) * Gets the remove icon from theme * Update src/js/components/Tag/Tag.js Co-authored-by: Mike Kingdom <michael.kingdom@hpe.com> --------- Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> Co-authored-by: Mike Kingdom <michael.kingdom@hpe.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Improve event handler typings for Box (#6983) Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Prevent row focus style for unclickable rows with onSelect (#6719) (#6985) Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Improve event handler typings for Chart (#6984) Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Updated v2.34.0 * upgrade dependencies (#7004) * Remove unnecessary useEffect (#7011) * Stop form submit event from bubbling up (#7005) * Stop form submit event from bubbling up * Add unit test * Use fireEvent * Use formRef to determine submission, let event bubble * Remove unneccessary .contains --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Updated v2.34.1 * Allow caller to specify step for DataFilter range (#6942) * Allow caller to specify step * Update PropTypes * Remove unnecessary snapshot * Fix sort * Use variable to be self documenting --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Remove suggestion to use UserEvent over FireEvent (#7023) * Update CONTRIBUTING.md * Update PULL_REQUEST_TEMPLATE.md * Update prop types and typescript types (#7028) * Update DataSummary messages object (#7022) Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Align DataFilters layer to Design System best practices (#7021) * Align DataFilters layer to Design System best practices * Update snapshots * Update snapshots * Update test * Make DataFilter range inclusive of bounds (#7026) * Make datafilter range inclusive of bounds * adjust test with feedback from review * Enhance Data screen reader announcements and add search debounce (#7010) * Enhance Data screen reader announcements and add search debounce * Fix Data tests * Use fireEvent to fix timeout * Update src/js/components/Data/Data.js Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> * Fix lint error --------- Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> * add aria-label for inputs (#7038) * add aria-label for inputs * only for no form example * add updated snapshot * use undefined instead * add label to select --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * [Type] remove `onClick` from types of Box props (#7018) * remove onClick from types of Box props `onClick` type is inherited generically from IntrinsicElements and grommet is currently limiting the type. * remove onClick type dependency --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * upgrade minor dependencies (#7040) * upgrade major dependencies * revert testcafe * remove carrot on typsscript * remove carrot on testcafe --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Adjust NameValueList to account for xsmall screen size (#7047) * Adjust NameValueList to account for xsmall screen size * create isSmall util function * Fix Select focus when opening drop with search (#6901) (#6982) * Fix Select focus when opening drop with search (#6901) * Adjust bundle size for Select focus fix (#6901) --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Improve DataFilter and RangeSelector handling of floating point values (#7033) * Improve DataFilter range default label * Improve default behavior of DataFilter range label * When RangeSelector is reset to min/max set value to undefined * revert changes from previous commit * Fix floating point calculations * Remove arbitrary precision, calculate in integer math * Remove unused function --------- Co-authored-by: Jessica Filben <jessica.filben@gmail.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * add check if values are arrays (#7045) * add check if values are arrays * Update Form.js * add taylor suggestions * fix condition --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Update README.md (#7050) * Update README.md Update readme * Update README.md * Update README.md Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Update README.md * Update README.md Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Fixed handling of multi-level property names that are used as RangeSelectors in filters (#7049) Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Add DataClearFilters component (#7025) * Add DataClearFilters component * Update snapshots * Rename showClearFilters to clearFilters * Remove onUpdate from Data, make associated refinements * Add data.button.kind to theme, remove hard coded kind=toolbar * Add updateOn change to noForm DataSort, fix test * Update snapshot * Remove updateOn on Data from stories --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * change datafilters default presentation with toolbar prop to layer (#7057) * add dataFormContext (#7053) * add dataFormContext * update test * Update src/js/components/DataSearch/DataSearch.js Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> * fix package --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Adjust Data properties to add filter, sort, and search booleans (#7046) * Adjust Data properties to add filterable, sortable, and searchable * Based on discussion with dev team removed '-able' suffix from prop names to allow for future enhancements beyond boolean value * fix bundlesize * add test for sub objects with rangeselector (#7065) * add test for sub objects with rangeselector * Update src/js/components/DataFilters/__tests__/DataFilters-test.tsx Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> * Fix toolbar story (#7062) * fix toolbar story * fix toolbar story --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> * Updated v2.34.2 * update dependencies (#7067) Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> * Fix images accessibility violations (#7061) * fix: images accessibility violations * Update Simple.js * fix: starRating - typescript issues (#7073) * fix: starRating - typescript issues * Update index.d.ts * Remove use of `hoverIndicator` within Data (#7078) * Remove use of within Data * Resolve snapshots * SelectMultiple new options on search (#7079) * SelectMultiple new options on search * Incorporate feedback from review * remove story * update chromatic token (#7086) * Decouple DataFilters and DataSort, refine toolbar layout (#7080) * Decouple DataFilters and DataSort, refine toolbar layout * Make refinements to clear filters, toolbar * Refine clearFilters logic --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Refine DataFilters badge behavior for RangeSelector reset to min/max (#7083) * Refine DataFilters badge behavior for RangeSelector * Generalize event name * Alter approach to be more resilient to changing RangeSelector values * fix: Resolve hover styling and tooltip issue for DataSort control (#7069) * fix: Resolve hover styling and tooltip issue for DataSort control * fix: Resolve hover styling and tooltip issue for DataSort control * Removed undo changes button from DataForm (#7088) * remove undo changes button * remove undo changes button --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> * update npm token name (#7087) * Fix groupHeader theming properties for DataTable (#6925) (#6986) * Fix groupHeader theming properties for DataTable (#6925) Had to update all existing DataTable test snapshots that involve the use of table grouping. They would have been created during states where row group header theme properties were not being passed through at all. * Update default groupHeader theme for backward compatibility (#6925) Test snapshots involving row groups for DataTable needed to be updated once more to reflect the change in default theme, which should ensure least surprise to any users of the component. --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Set min-width of DataFilters layer (#7094) Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * DataSearch: Removed dependence on form (#7091) * Removed dependence on form for DataSearch * wrap search in a Box for sizing * Move debounce to utils and clear search on named view * update Data-test snapshots * Fixed a dependency cycle * Clear name view on search change if it has search term --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * fix: starRating - form value not synched (#7077) * fix: starRating - form value not synched * fix: starRating - form value not synched * add: new test case for start rating default value * reverted StarRating.js default value state * DataFilters -- display badge when view applied (#7084) * Display badge with view * Incorporate badge configuration * Removed dependence on form for DataSearch * Remove unused onTouched * Fix bug when range selector reset was still contributing to badge count * Include RangeSelector in clearEmpty logic to standardize when filters are removed from view object * Flatten to match filter name structure * Update src/js/components/Data/__tests__/Data-test.tsx * Update snapshots * Fix untouched Toolbar snapshot --------- Co-authored-by: Mike Kingdom <michael.kingdom@hpe.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Add jest tests for Data features (#7100) * Add jest tests for Data features * Fix test based on latest view badge work --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Adjust logic in DataClearFilters story (#7108) * Fix undefined case for DataFilter (#7111) * Fix undefined case for DataFilter * Update src/js/components/DataFilter/DataFilter.js Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Add test for adding additional options to SelectMultiple within onSearch (#7105) * Add test for adding additional options to SelectMultiple within onSearch * change test to use fireEvent instead of userEvent * move faketimers to additional options onSearch test * Implement DataSearch updateOn property (#7110) * Implement DataSearch updateOn property * Address review feedback * Address review feedback * Removed UpdateOnSubmit story from chromatic * fix missing props and typings for tag component (#7099) * fix missing props and typings for tag component * fix missing props and typings for tag component --------- Co-authored-by: sthpe <sulaymon.tajudeen@hpe.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * SelectMultiple i18n enhancements (#7104) * feat: add internationalization to selectMultiple * fix: spelling selectedCount * fix: spelling selectedCount * feat: update SelectionSummary with PR commetns * feat: add jest Test for custommessages * fix: remove messages from Basic Props * fix: add PR fix * Feat: add localization to aria text * feat: fix all PR commetnts * fix: Test * fix: update failing test snapshot * update snapshot * fix: pr comments & try fixing ci tests * fix: snapshots * remove comment * remove useless $ in locales * select messages key in alphabetical order * Removed dependence on form for DataSearch * selecMultiple.summarizedValue * selectMultiple.clearAll keys * selectMultiple.selectAll keys * selectMultiple.selected key * selectMultiple.selectedOfTotal key + fix dat-filter test selectAllA11y * selectMultiple.open key + fix clearAllA11y * selectMultiple.search key * SelectMultiple props/locales keys in alphabetical order * last multiple => summarizedValue * alphabetical order for selectMultiple proptypes * Update snapshots * Small refinements to SelectMultiple i18n work * Remove unsupported message * Refine Typescript/propTypes for backwards compatibility * Update src/js/components/SelectMultiple/index.d.ts Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> * Update src/js/components/SelectMultiple/propTypes.js * Alphabetize * selectDropDown --> selectDrop * Fix snapshots --------- Co-authored-by: jboeckle <jboeckle@imaschelling.com> Co-authored-by: dbo2019 <dominikpboeckle@gmail.com> Co-authored-by: Thibault Ollivier <thibault.ollivier@anyti.me> Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: tol-any <108674993+tol-any@users.noreply.github.com> Co-authored-by: Mike Kingdom <michael.kingdom@hpe.com> Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> * fix: Remove 'label' attribute from <label> tag (#7101) * Remove 'label' attribute from <label> tag * fix: Remove 'label' attribute from <label> tag * Reverted Simple.js * Align Data+friends propTypes/index.d.ts to latest behavior (#7116) * Remove unused Dataform message * misc cleanups * Fix * Add missing messages * Update src/js/components/Data/index.d.ts * Fix PropTypes syntax * Enhance DataSummary with selected messages (#7114) * Enhance DataSummary with selected messages * Increase bundlesize * Add propTypes/index.d.ts --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Fix DataTableColumns undefined case (#7117) * Check properties length before displaying data clear filters button (#7119) * Updated v2.35.0 * remove stable notification from storybook for data components (#7113) * remove stable notification from storybook for data components * Update src/js/components/DataView/stories/Simple.js Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * upgrade dependencies (#7124) Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> * upgrade remaining dependencies (#7126) Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> * Align Data + friends storybook examples with best practices (#7132) * Align storybook examples with best practices * Rename composed toolbar file * Add primaryKey to List theme (#7136) * fix(range): enables range wheel event override (#7130) * component(range input): adds wheel override to theme * Update src/js/components/RangeInput/__tests__/RangeInput-test.tsx Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * cr: removes unused import * fix(range): renames theme context variable * fix(range): address PR feedback --------- Co-authored-by: Tanner B. Hess Webber <tb@hesswebber.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Form field add max and threshold to validation (#6550) * feat: first commit * test: update snapshots * chore: updata README.md * chore: code review * chore: update validate threshold structure * chore: update story * test: update snapshot * feat: add default threshold * feat: update storybook * fix: FormField.js * chore: minor fixes * chore: change bundle maxSize to 160 kB * chore: minor changes * refactor: add format message * chore: update bundlesize * style: remove comment line * feat: update FormField threshold message * chore: update bundlesize * chore: fix bundlesize * feat: last changes * chore: update bundlesize * Adjust naming of messages * refactor: Form Threshold validation * refactor: minor changes * increase bundlesize --------- Co-authored-by: Jessica Filben <jessica.filben@gmail.com> Co-authored-by: Matt Glissmann <mdglissmann@gmail.com> Co-authored-by: Mike Kingdom <michael.kingdom@hpe.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Upgrade Node Engine From 16 to 18 (#6937) * update node engine version * Updating Engine Version Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Remove engine-strict: true from package.json (#7141) * revert node version back to 16 (#7142) * fix: onOrder buttons should be selectable by hitting the 'Space' key (#7140) * fix: onOrder buttons should be selectable by hitting the 'Space' key * ref: added event.preventDefault onSpace * enhancement : preventDefault added to OnDown and OnUp calls (#7144) * fix: preventDefault added to OnDown and OnUp calls * revered changes package.json * Update package.json * Run form submit validation when submit is fired directly on input (#7148) * Run form submit validation when submit is fired directly on input * Add jest test * Remove .only * Add test workflow (#7150) * Remove chromatic token from package.json (#7151) * Remove chromatic token from package.json * Remove test workflow * Add CircleCI context for release and publish jobs (#7152) * Enhance Box `gap` to accept object with `row` and `column` (#7147) * add code to account for row and columngap * Update src/js/components/Box/__tests__/Box-layout-test.tsx Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> * Update src/js/components/Box/__tests__/Box-layout-test.tsx Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> * Update src/js/components/Box/propTypes.js Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> * Update src/js/components/Box/index.d.ts Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> * fix feedback * address feedback * fix object passing through * fix if statement * Update src/js/components/Box/index.d.ts Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Readonly enhancement for TextInput and DateInput (#7123) * read only accessibility test * add readOnly styling and readOnlyCopy prop to DateInput and TextInput * update bundlesize * add tests * Remove icon from TextInput when in readOnly mode and ensure readonly styling is contained to TextInput and DateInput * incorporate review feedback * remove unnecessary aria-readonly prop * feedback from review * Refine styling and increase button click target * Fix SelectMultiple snapshosts * Remove extra readOnly prop * Fix formfield readOnlyCopy styling * Update src/js/components/TextInput/TextInput.js Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> --------- Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> * Anchor icon and icon-text has extra space fixed (#6534) * fix: Anchor icon fixed * fix: Anchor alignment fixed * refactor: box property Added Box styled as InlineBox for Anchro component only. * refactor: unused snippet removed. * test: Snapshot updated. * clean up unnessicary changes * Update propTypes.js * Update DropContainer.js * Update LayerContainer.js * Update RenderedList.js * Update Simple.tsx * Update index.d.ts * change inline box to icon only * needs vertical align bottom * fix: Anchor Icon and its alignment. * test: Snapshot updated * refactor: property position updated * test: Snapshots updated --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * fix: focus indicator for Layer's hidden anchor in Firefox (#7146) * fix: List focus via keyboard (#7143) * fix: List focus via keyboard * test: Update Snapshots * reafactor: item focus removed * test: Snapshot updated --------- Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * ensure window is available for when SSR (#7156) * Fix dropHeight of DataFilter SelectMultiple (#7157) * List keyboard behavior test and fix lint issues (#7158) * test list keyboard behavior with space and fix lint issues * Update src/js/components/List/__tests__/List-test.js * Pagination — Add `summary` and `stepOptions` (#7133) * add draft of stepselector * clean up code * add summary to one PR * add default value for when stepselector is boolean * add feedback set up points for disscussion for demo * add feedback set up points for disscussion for demo * take out unneeded comment * update code based on team feedback * fix feedback * Update src/js/languages/default.json Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> * fix feedback * update values * add tests * change value name * add gap * add edgecase for 0 items * fix namig * clean up code logic * Update src/js/components/Pagination/Pagination.js Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * update tests * Update src/js/components/Pagination/__tests__/Pagination-test.tsx Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Update src/js/components/Pagination/PaginationStep.js Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> * add valueLabel * incorporate Matts feedback * fix story * align gap with figma * Update src/js/components/Pagination/stories/Steps.js Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> * update story * Update src/js/components/Pagination/stories/Steps.js Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> * update bundle size * merge master --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> * Updated v2.36.0 * test npm token (#7162) Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> * update bundlesize --------- Co-authored-by: Vinod Krishna Vellampalli <vinodkv2511@gmail.com> Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> Co-authored-by: Mike Kingdom <michael.kingdom@hpe.com> Co-authored-by: jainex <jainexp017@gmail.com> Co-authored-by: Michael Huynh <43751307+miqh@users.noreply.github.com> Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Shimi <shimrit.yacobi@gmail.com> Co-authored-by: Basith <134603758+abdulbasithqb@users.noreply.github.com> Co-authored-by: Sulaymon333 <tjsulaymon@gmail.com> Co-authored-by: sthpe <sulaymon.tajudeen@hpe.com> Co-authored-by: jboeckle <jboeckle@imaschelling.com> Co-authored-by: dbo2019 <dominikpboeckle@gmail.com> Co-authored-by: Thibault Ollivier <thibault.ollivier@anyti.me> Co-authored-by: tol-any <108674993+tol-any@users.noreply.github.com> Co-authored-by: kid-icarus <ryan.kois@gmail.com> Co-authored-by: Tanner B. Hess Webber <tb@hesswebber.com> Co-authored-by: Gabriel Quaresma <j.quaresmasantos_98@hotmail.com> Co-authored-by: Joelo <82491084+phoenix-clauster@users.noreply.github.com> Co-authored-by: Umesh Verma <umeshiscreative@gmail.com>

* Styled components v6 (#6947) * Initial setup for styled components config approach * Add config to styled components * update snapshots * change additional component to use styled box instead of as={box} * RadioButton, CheckBox, and RangeInput fixes * Filter out kind from button and elevation from layer * adjust package.json to support styled components 5 or 6 * increase bundlesize * remove stylis from peerDependencies * remove stylis dependency * enable vendor prefixes * added grommet wrapper to tests * revert default props test * move styleSheetManager above themeContext * remove StyleSheetManager from Grommet component * update snapshots * update snapshots * Merge master * Dont run chromatic on styled-components-beta (#6990) * Sc fix a (#6993) * Add comment * Alter comment * Add comment 2 (#6992) * Add comment 2 * Align config to master * Update styled-components branch with master and add webkit-user-select to CheckBox (#6999) * Gets the remove icon from theme (#6960) * Gets the remove icon from theme * Update src/js/components/Tag/Tag.js Co-authored-by: Mike Kingdom <michael.kingdom@hpe.com> --------- Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> Co-authored-by: Mike Kingdom <michael.kingdom@hpe.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Improve event handler typings for Box (#6983) Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Prevent row focus style for unclickable rows with onSelect (#6719) (#6985) Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Improve event handler typings for Chart (#6984) Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Updated v2.34.0 * add webkit user select to CheckBox --------- Co-authored-by: Vinod Krishna Vellampalli <vinodkv2511@gmail.com> Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> Co-authored-by: Mike Kingdom <michael.kingdom@hpe.com> Co-authored-by: jainex <jainexp017@gmail.com> Co-authored-by: Michael Huynh <43751307+miqh@users.noreply.github.com> * Styled components beta minor change to trigger circleci (#7000) * minor change to trigger circleci * add comment to circleci config * Updated v2.35.0-alpha.1 * Update styled-components branch with master (#7163) * Gets the remove icon from theme (#6960) * Gets the remove icon from theme * Update src/js/components/Tag/Tag.js Co-authored-by: Mike Kingdom <michael.kingdom@hpe.com> --------- Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> Co-authored-by: Mike Kingdom <michael.kingdom@hpe.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Improve event handler typings for Box (#6983) Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Prevent row focus style for unclickable rows with onSelect (#6719) (#6985) Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Improve event handler typings for Chart (#6984) Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Updated v2.34.0 * upgrade dependencies (#7004) * Remove unnecessary useEffect (#7011) * Stop form submit event from bubbling up (#7005) * Stop form submit event from bubbling up * Add unit test * Use fireEvent * Use formRef to determine submission, let event bubble * Remove unneccessary .contains --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Updated v2.34.1 * Allow caller to specify step for DataFilter range (#6942) * Allow caller to specify step * Update PropTypes * Remove unnecessary snapshot * Fix sort * Use variable to be self documenting --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Remove suggestion to use UserEvent over FireEvent (#7023) * Update CONTRIBUTING.md * Update PULL_REQUEST_TEMPLATE.md * Update prop types and typescript types (#7028) * Update DataSummary messages object (#7022) Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Align DataFilters layer to Design System best practices (#7021) * Align DataFilters layer to Design System best practices * Update snapshots * Update snapshots * Update test * Make DataFilter range inclusive of bounds (#7026) * Make datafilter range inclusive of bounds * adjust test with feedback from review * Enhance Data screen reader announcements and add search debounce (#7010) * Enhance Data screen reader announcements and add search debounce * Fix Data tests * Use fireEvent to fix timeout * Update src/js/components/Data/Data.js Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> * Fix lint error --------- Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> * add aria-label for inputs (#7038) * add aria-label for inputs * only for no form example * add updated snapshot * use undefined instead * add label to select --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * [Type] remove `onClick` from types of Box props (#7018) * remove onClick from types of Box props `onClick` type is inherited generically from IntrinsicElements and grommet is currently limiting the type. * remove onClick type dependency --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * upgrade minor dependencies (#7040) * upgrade major dependencies * revert testcafe * remove carrot on typsscript * remove carrot on testcafe --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Adjust NameValueList to account for xsmall screen size (#7047) * Adjust NameValueList to account for xsmall screen size * create isSmall util function * Fix Select focus when opening drop with search (#6901) (#6982) * Fix Select focus when opening drop with search (#6901) * Adjust bundle size for Select focus fix (#6901) --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Improve DataFilter and RangeSelector handling of floating point values (#7033) * Improve DataFilter range default label * Improve default behavior of DataFilter range label * When RangeSelector is reset to min/max set value to undefined * revert changes from previous commit * Fix floating point calculations * Remove arbitrary precision, calculate in integer math * Remove unused function --------- Co-authored-by: Jessica Filben <jessica.filben@gmail.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * add check if values are arrays (#7045) * add check if values are arrays * Update Form.js * add taylor suggestions * fix condition --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Update README.md (#7050) * Update README.md Update readme * Update README.md * Update README.md Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Update README.md * Update README.md Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Fixed handling of multi-level property names that are used as RangeSelectors in filters (#7049) Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Add DataClearFilters component (#7025) * Add DataClearFilters component * Update snapshots * Rename showClearFilters to clearFilters * Remove onUpdate from Data, make associated refinements * Add data.button.kind to theme, remove hard coded kind=toolbar * Add updateOn change to noForm DataSort, fix test * Update snapshot * Remove updateOn on Data from stories --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * change datafilters default presentation with toolbar prop to layer (#7057) * add dataFormContext (#7053) * add dataFormContext * update test * Update src/js/components/DataSearch/DataSearch.js Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> * fix package --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Adjust Data properties to add filter, sort, and search booleans (#7046) * Adjust Data properties to add filterable, sortable, and searchable * Based on discussion with dev team removed '-able' suffix from prop names to allow for future enhancements beyond boolean value * fix bundlesize * add test for sub objects with rangeselector (#7065) * add test for sub objects with rangeselector * Update src/js/components/DataFilters/__tests__/DataFilters-test.tsx Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> * Fix toolbar story (#7062) * fix toolbar story * fix toolbar story --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> * Updated v2.34.2 * update dependencies (#7067) Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> * Fix images accessibility violations (#7061) * fix: images accessibility violations * Update Simple.js * fix: starRating - typescript issues (#7073) * fix: starRating - typescript issues * Update index.d.ts * Remove use of `hoverIndicator` within Data (#7078) * Remove use of within Data * Resolve snapshots * SelectMultiple new options on search (#7079) * SelectMultiple new options on search * Incorporate feedback from review * remove story * update chromatic token (#7086) * Decouple DataFilters and DataSort, refine toolbar layout (#7080) * Decouple DataFilters and DataSort, refine toolbar layout * Make refinements to clear filters, toolbar * Refine clearFilters logic --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Refine DataFilters badge behavior for RangeSelector reset to min/max (#7083) * Refine DataFilters badge behavior for RangeSelector * Generalize event name * Alter approach to be more resilient to changing RangeSelector values * fix: Resolve hover styling and tooltip issue for DataSort control (#7069) * fix: Resolve hover styling and tooltip issue for DataSort control * fix: Resolve hover styling and tooltip issue for DataSort control * Removed undo changes button from DataForm (#7088) * remove undo changes button * remove undo changes button --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> * update npm token name (#7087) * Fix groupHeader theming properties for DataTable (#6925) (#6986) * Fix groupHeader theming properties for DataTable (#6925) Had to update all existing DataTable test snapshots that involve the use of table grouping. They would have been created during states where row group header theme properties were not being passed through at all. * Update default groupHeader theme for backward compatibility (#6925) Test snapshots involving row groups for DataTable needed to be updated once more to reflect the change in default theme, which should ensure least surprise to any users of the component. --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Set min-width of DataFilters layer (#7094) Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * DataSearch: Removed dependence on form (#7091) * Removed dependence on form for DataSearch * wrap search in a Box for sizing * Move debounce to utils and clear search on named view * update Data-test snapshots * Fixed a dependency cycle * Clear name view on search change if it has search term --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * fix: starRating - form value not synched (#7077) * fix: starRating - form value not synched * fix: starRating - form value not synched * add: new test case for start rating default value * reverted StarRating.js default value state * DataFilters -- display badge when view applied (#7084) * Display badge with view * Incorporate badge configuration * Removed dependence on form for DataSearch * Remove unused onTouched * Fix bug when range selector reset was still contributing to badge count * Include RangeSelector in clearEmpty logic to standardize when filters are removed from view object * Flatten to match filter name structure * Update src/js/components/Data/__tests__/Data-test.tsx * Update snapshots * Fix untouched Toolbar snapshot --------- Co-authored-by: Mike Kingdom <michael.kingdom@hpe.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Add jest tests for Data features (#7100) * Add jest tests for Data features * Fix test based on latest view badge work --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Adjust logic in DataClearFilters story (#7108) * Fix undefined case for DataFilter (#7111) * Fix undefined case for DataFilter * Update src/js/components/DataFilter/DataFilter.js Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Add test for adding additional options to SelectMultiple within onSearch (#7105) * Add test for adding additional options to SelectMultiple within onSearch * change test to use fireEvent instead of userEvent * move faketimers to additional options onSearch test * Implement DataSearch updateOn property (#7110) * Implement DataSearch updateOn property * Address review feedback * Address review feedback * Removed UpdateOnSubmit story from chromatic * fix missing props and typings for tag component (#7099) * fix missing props and typings for tag component * fix missing props and typings for tag component --------- Co-authored-by: sthpe <sulaymon.tajudeen@hpe.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * SelectMultiple i18n enhancements (#7104) * feat: add internationalization to selectMultiple * fix: spelling selectedCount * fix: spelling selectedCount * feat: update SelectionSummary with PR commetns * feat: add jest Test for custommessages * fix: remove messages from Basic Props * fix: add PR fix * Feat: add localization to aria text * feat: fix all PR commetnts * fix: Test * fix: update failing test snapshot * update snapshot * fix: pr comments & try fixing ci tests * fix: snapshots * remove comment * remove useless $ in locales * select messages key in alphabetical order * Removed dependence on form for DataSearch * selecMultiple.summarizedValue * selectMultiple.clearAll keys * selectMultiple.selectAll keys * selectMultiple.selected key * selectMultiple.selectedOfTotal key + fix dat-filter test selectAllA11y * selectMultiple.open key + fix clearAllA11y * selectMultiple.search key * SelectMultiple props/locales keys in alphabetical order * last multiple => summarizedValue * alphabetical order for selectMultiple proptypes * Update snapshots * Small refinements to SelectMultiple i18n work * Remove unsupported message * Refine Typescript/propTypes for backwards compatibility * Update src/js/components/SelectMultiple/index.d.ts Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> * Update src/js/components/SelectMultiple/propTypes.js * Alphabetize * selectDropDown --> selectDrop * Fix snapshots --------- Co-authored-by: jboeckle <jboeckle@imaschelling.com> Co-authored-by: dbo2019 <dominikpboeckle@gmail.com> Co-authored-by: Thibault Ollivier <thibault.ollivier@anyti.me> Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: tol-any <108674993+tol-any@users.noreply.github.com> Co-authored-by: Mike Kingdom <michael.kingdom@hpe.com> Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> * fix: Remove 'label' attribute from <label> tag (#7101) * Remove 'label' attribute from <label> tag * fix: Remove 'label' attribute from <label> tag * Reverted Simple.js * Align Data+friends propTypes/index.d.ts to latest behavior (#7116) * Remove unused Dataform message * misc cleanups * Fix * Add missing messages * Update src/js/components/Data/index.d.ts * Fix PropTypes syntax * Enhance DataSummary with selected messages (#7114) * Enhance DataSummary with selected messages * Increase bundlesize * Add propTypes/index.d.ts --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Fix DataTableColumns undefined case (#7117) * Check properties length before displaying data clear filters button (#7119) * Updated v2.35.0 * remove stable notification from storybook for data components (#7113) * remove stable notification from storybook for data components * Update src/js/components/DataView/stories/Simple.js Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * upgrade dependencies (#7124) Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> * upgrade remaining dependencies (#7126) Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> * Align Data + friends storybook examples with best practices (#7132) * Align storybook examples with best practices * Rename composed toolbar file * Add primaryKey to List theme (#7136) * fix(range): enables range wheel event override (#7130) * component(range input): adds wheel override to theme * Update src/js/components/RangeInput/__tests__/RangeInput-test.tsx Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * cr: removes unused import * fix(range): renames theme context variable * fix(range): address PR feedback --------- Co-authored-by: Tanner B. Hess Webber <tb@hesswebber.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Form field add max and threshold to validation (#6550) * feat: first commit * test: update snapshots * chore: updata README.md * chore: code review * chore: update validate threshold structure * chore: update story * test: update snapshot * feat: add default threshold * feat: update storybook * fix: FormField.js * chore: minor fixes * chore: change bundle maxSize to 160 kB * chore: minor changes * refactor: add format message * chore: update bundlesize * style: remove comment line * feat: update FormField threshold message * chore: update bundlesize * chore: fix bundlesize * feat: last changes * chore: update bundlesize * Adjust naming of messages * refactor: Form Threshold validation * refactor: minor changes * increase bundlesize --------- Co-authored-by: Jessica Filben <jessica.filben@gmail.com> Co-authored-by: Matt Glissmann <mdglissmann@gmail.com> Co-authored-by: Mike Kingdom <michael.kingdom@hpe.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Upgrade Node Engine From 16 to 18 (#6937) * update node engine version * Updating Engine Version Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> --------- Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Remove engine-strict: true from package.json (#7141) * revert node version back to 16 (#7142) * fix: onOrder buttons should be selectable by hitting the 'Space' key (#7140) * fix: onOrder buttons should be selectable by hitting the 'Space' key * ref: added event.preventDefault onSpace * enhancement : preventDefault added to OnDown and OnUp calls (#7144) * fix: preventDefault added to OnDown and OnUp calls * revered changes package.json * Update package.json * Run form submit validation when submit is fired directly on input (#7148) * Run form submit validation when submit is fired directly on input * Add jest test * Remove .only * Add test workflow (#7150) * Remove chromatic token from package.json (#7151) * Remove chromatic token from package.json * Remove test workflow * Add CircleCI context for release and publish jobs (#7152) * Enhance Box `gap` to accept object with `row` and `column` (#7147) * add code to account for row and columngap * Update src/js/components/Box/__tests__/Box-layout-test.tsx Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> * Update src/js/components/Box/__tests__/Box-layout-test.tsx Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> * Update src/js/components/Box/propTypes.js Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> * Update src/js/components/Box/index.d.ts Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> * fix feedback * address feedback * fix object passing through * fix if statement * Update src/js/components/Box/index.d.ts Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Readonly enhancement for TextInput and DateInput (#7123) * read only accessibility test * add readOnly styling and readOnlyCopy prop to DateInput and TextInput * update bundlesize * add tests * Remove icon from TextInput when in readOnly mode and ensure readonly styling is contained to TextInput and DateInput * incorporate review feedback * remove unnecessary aria-readonly prop * feedback from review * Refine styling and increase button click target * Fix SelectMultiple snapshosts * Remove extra readOnly prop * Fix formfield readOnlyCopy styling * Update src/js/components/TextInput/TextInput.js Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> --------- Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> * Anchor icon and icon-text has extra space fixed (#6534) * fix: Anchor icon fixed * fix: Anchor alignment fixed * refactor: box property Added Box styled as InlineBox for Anchro component only. * refactor: unused snippet removed. * test: Snapshot updated. * clean up unnessicary changes * Update propTypes.js * Update DropContainer.js * Update LayerContainer.js * Update RenderedList.js * Update Simple.tsx * Update index.d.ts * change inline box to icon only * needs vertical align bottom * fix: Anchor Icon and its alignment. * test: Snapshot updated * refactor: property position updated * test: Snapshots updated --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * fix: focus indicator for Layer's hidden anchor in Firefox (#7146) * fix: List focus via keyboard (#7143) * fix: List focus via keyboard * test: Update Snapshots * reafactor: item focus removed * test: Snapshot updated --------- Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * ensure window is available for when SSR (#7156) * Fix dropHeight of DataFilter SelectMultiple (#7157) * List keyboard behavior test and fix lint issues (#7158) * test list keyboard behavior with space and fix lint issues * Update src/js/components/List/__tests__/List-test.js * Pagination — Add `summary` and `stepOptions` (#7133) * add draft of stepselector * clean up code * add summary to one PR * add default value for when stepselector is boolean * add feedback set up points for disscussion for demo * add feedback set up points for disscussion for demo * take out unneeded comment * update code based on team feedback * fix feedback * Update src/js/languages/default.json Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> * fix feedback * update values * add tests * change value name * add gap * add edgecase for 0 items * fix namig * clean up code logic * Update src/js/components/Pagination/Pagination.js Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * update tests * Update src/js/components/Pagination/__tests__/Pagination-test.tsx Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> * Update src/js/components/Pagination/PaginationStep.js Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> * add valueLabel * incorporate Matts feedback * fix story * align gap with figma * Update src/js/components/Pagination/stories/Steps.js Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> * update story * Update src/js/components/Pagination/stories/Steps.js Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> * update bundle size * merge master --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com> Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> * Updated v2.36.0 * test npm token (#7162) Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> * update bundlesize --------- Co-authored-by: Vinod Krishna Vellampalli <vinodkv2511@gmail.com> Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> Co-authored-by: Mike Kingdom <michael.kingdom@hpe.com> Co-authored-by: jainex <jainexp017@gmail.com> Co-authored-by: Michael Huynh <43751307+miqh@users.noreply.github.com> Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Shimi <shimrit.yacobi@gmail.com> Co-authored-by: Basith <134603758+abdulbasithqb@users.noreply.github.com> Co-authored-by: Sulaymon333 <tjsulaymon@gmail.com> Co-authored-by: sthpe <sulaymon.tajudeen@hpe.com> Co-authored-by: jboeckle <jboeckle@imaschelling.com> Co-authored-by: dbo2019 <dominikpboeckle@gmail.com> Co-authored-by: Thibault Ollivier <thibault.ollivier@anyti.me> Co-authored-by: tol-any <108674993+tol-any@users.noreply.github.com> Co-authored-by: kid-icarus <ryan.kois@gmail.com> Co-authored-by: Tanner B. Hess Webber <tb@hesswebber.com> Co-authored-by: Gabriel Quaresma <j.quaresmasantos_98@hotmail.com> Co-authored-by: Joelo <82491084+phoenix-clauster@users.noreply.github.com> Co-authored-by: Umesh Verma <umeshiscreative@gmail.com> * add context to release styled components stable * remove beta steps from config * Merge master into styled-components-beta * increase bundlesize --------- Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com> Co-authored-by: Vinod Krishna Vellampalli <vinodkv2511@gmail.com> Co-authored-by: Mike Kingdom <michael.kingdom@hpe.com> Co-authored-by: jainex <jainexp017@gmail.com> Co-authored-by: Michael Huynh <43751307+miqh@users.noreply.github.com> Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MacBook-Pro-2.local> Co-authored-by: Shimi <shimrit.yacobi@gmail.com> Co-authored-by: Basith <134603758+abdulbasithqb@users.noreply.github.com> Co-authored-by: Sulaymon333 <tjsulaymon@gmail.com> Co-authored-by: sthpe <sulaymon.tajudeen@hpe.com> Co-authored-by: jboeckle <jboeckle@imaschelling.com> Co-authored-by: dbo2019 <dominikpboeckle@gmail.com> Co-authored-by: Thibault Ollivier <thibault.ollivier@anyti.me> Co-authored-by: tol-any <108674993+tol-any@users.noreply.github.com> Co-authored-by: kid-icarus <ryan.kois@gmail.com> Co-authored-by: Tanner B. Hess Webber <tb@hesswebber.com> Co-authored-by: Gabriel Quaresma <j.quaresmasantos_98@hotmail.com> Co-authored-by: Joelo <82491084+phoenix-clauster@users.noreply.github.com> Co-authored-by: Umesh Verma <umeshiscreative@gmail.com>

Adjust Data properties to add filterable, sortable, and searchable

6e91510

jcfilben requested review from MikeKingdom and taysea December 5, 2023 20:19

MikeKingdom approved these changes Dec 5, 2023

View reviewed changes

updating with master

cce2aa0

Based on discussion with dev team removed '-able' suffix from prop na…

177199a

…mes to allow for future enhancements beyond boolean value

jcfilben changed the title ~~Adjust Data properties to add filterable, sortable, and searchable~~ Adjust Data properties to add filter, sort, and search booleans Dec 11, 2023

jcfilben added 2 commits December 11, 2023 13:28

merging master

bb7e900

fix bundlesize

f816bf0

jcfilben requested a review from britt6612 December 11, 2023 21:21

taysea approved these changes Dec 11, 2023

View reviewed changes

britt6612 approved these changes Dec 11, 2023

View reviewed changes

Merge branch 'master' into data-search-broaden

4e5a838

jcfilben merged commit 206a85e into grommet:master Dec 12, 2023

jcfilben mentioned this pull request Dec 12, 2023

Add sort and filter to properties in Data grommet/grommet-site#499

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Adjust Data properties to add filter, sort, and search booleans #7046

Adjust Data properties to add filter, sort, and search booleans #7046

Uh oh!

jcfilben commented Dec 5, 2023 •

edited

Loading

Uh oh!

MikeKingdom left a comment

Uh oh!

taysea commented Dec 6, 2023 •

edited

Loading

Uh oh!

MikeKingdom commented Dec 7, 2023 •

edited

Loading

Uh oh!

taysea commented Dec 7, 2023

Uh oh!

MikeKingdom commented Dec 8, 2023

Uh oh!

taysea commented Dec 11, 2023 •

edited

Loading

Uh oh!

jcfilben commented Dec 11, 2023 •

edited

Loading

Uh oh!

taysea left a comment

Uh oh!

jcfilben commented Dec 11, 2023

Uh oh!

Uh oh!

Adjust Data properties to add filter, sort, and search booleans #7046

Adjust Data properties to add filter, sort, and search booleans #7046

Uh oh!

Conversation

jcfilben commented Dec 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Where should the reviewer start?

What testing has been done on this PR?

How should this be manually tested?

Do Jest tests follow these best practices?

Any background context you want to provide?

What are the relevant issues?

Screenshots (if appropriate)

Do the grommet docs need to be updated?

Should this PR be mentioned in the release notes?

Is this change backwards compatible or is it a breaking change?

Uh oh!

MikeKingdom left a comment

Choose a reason for hiding this comment

Uh oh!

taysea commented Dec 6, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MikeKingdom commented Dec 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

taysea commented Dec 7, 2023

Uh oh!

MikeKingdom commented Dec 8, 2023

Uh oh!

taysea commented Dec 11, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jcfilben commented Dec 11, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

taysea left a comment

Choose a reason for hiding this comment

Uh oh!

jcfilben commented Dec 11, 2023

Uh oh!

Uh oh!

jcfilben commented Dec 5, 2023 •

edited

Loading

taysea commented Dec 6, 2023 •

edited

Loading

MikeKingdom commented Dec 7, 2023 •

edited

Loading

taysea commented Dec 11, 2023 •

edited

Loading

jcfilben commented Dec 11, 2023 •

edited

Loading