Breaking Changes For the next version

Removals

MasonaryGrid: Doesn't always function consistently in current versions of React. Masonry grid will also be a first-class support via CSS in the near future.
- Add a "masonry" variant to the Grid. :
- grid-template-rows: masonry;
- masonry-auto-flow: next ;
PadBox: implementation is awkward, and in all reality, this is not a layout component, a component that directly controls the size or position of its children.
AppBoundary: Is just an opinionated version of Center and serves little value.
all the hooks and auxiliary code: is only around to support the Masonry grid. I would prefer not to keep it in the library if it's not supporting parts of the library.

Changes

Change gutter to gap
change columns prop to colCount
Have a single list of sizes instead of a separate list of space and sizes?
Augment Stack to adjust alignment
customer properties should be kabab-cased and not camelCase
Default inline components to align center
Add space-around to inline components
Do we need both do we need both inline and inline cluster?
remove default sizes and make them 100%
change awkward boolean props to state props e.g. noStretchColumns:boolean to something like columnType: 'stretch' | 'auto'
Separate Provider package and spacing constant should be used by solid and React version
- context and themeProvider doesn't work with Server components. We probably need to move away form it.
spacing constants should be noted as not following semver
Cover should stop using top and bottom props and instead use a CoverCentered component, much like how the underlying CSS works
remove center-children from center component, it should be handled by using the stack and justify:center

Reset update

headings{
   text-wrap: balance
}

*{
min-width:0;
}

all other text or maybe just p{
  text-wrap:pretty
}

@media (prefers-reduced-motion: no-preference){
   :has(:target){
      scroll-behavior: smooth;
      scroll-padding-top: 3rem;
   }
}

html {
   hanging-punctuation: first last;
}

image reset:

img{
  /* remove display:block */
   max-width:100%;
   vertical-align: middle;
   height: auto;
   font-style: italic;

/* to have a low-res version of image as background-image */
   background-repeat: no-repeat;
   background-size: cover;

   shape-margin: 1rem;

}

Planned Breaking Changes

There is a plan to make some breaking changes in the next version of the library. These changes are necessary to improve the library and make it more consistent.

The breaking changes are as follows:

[x] deprecate components and hooks in React and Solid
- [x] MasonryGrid
- [x] Padbox
- [x] AppBoundry
- [x] useForwardedRef
- [x] useResizeObserver
- [x] useContainerQuery
- [x] useStatefulRef
- [x] register-resize-callback
[x] deprecate the center-children prop from the center components and recommend that they use the Stack component instead
[x] document deprecation of original Solid repo and do PR at Solid Docs to point to monorepo where the solid components are now located
[x] deprecate the columns prop from the columns components and recommend that they use the colCount prop instead
[x] deprecate the gutter prop from applicable components and recommend that they use the gap prop instead
[x] deprecate the noStretchColumns prop from the ColumnDrop component and recommend that they use the variant:centered prop instead
- [x] deprecate the stretchContent prop from the Cover component and recommend that they use the variant:stretch-content prop instead
[ ] remove above deprecated components and hooks
[ ] remove the stretch-content prop from the cover components
[ ] remove the center-children prop from the center components
[ ] remove the columns prop from the columns components
[ ] remove the gutter prop from applicable components
[ ] remove the camelCase custom properties in favor of kebab-case custom properties, e.g. --min-item-width instead of --minItemWidth
[ ] change the default alignment for the Inline and InlineCluster components to center instead of start
[ ] change default widths for components to be 100% instead of specific widths/heights
[ ] remove the noStretchColumns prop from the ColumnDrop component
[ ] remove the data-bedrock- css selectors in favor of data-br- css selectors
[ ] remove the ThemeProvider component and related theme hooks
[ ] make spacing constants able to be used by both react and solid. Also make a note that the spacing constants will no longer follow semver and will be updated as needed
[ ] React and Solid will no longer use top and bottom props for slots and will instead export a component for the content that needs to be vertically centered

Note: The breaking changes will be released in a major version bump, so you will need to update your code to use the new version of the library. Also those items marked with a checkmark (deprecation items) have already been implemented and are available in the latest version of the library.

Non-breaking Changes

The following are some of the non-breaking changes that are planned for the next version of the library. The items marked with a checkmark have already been implemented and are available in the latest version of the library.

[x] Add variant:masonry to grid in both CSS and react/solid
[x] Add support for gap prop
[x] Add support for colCount prop
[x] Add support for the variant:centered prop for the ColumnDrop component to replace the noStretchColumns prop
[x] Add support for the variant:stretch-content prop for the Cover component to replace the stretchContent prop
[x] Add support for the "-br-" in the attributes e.g,. data-br-grid or data-br-stack instead of data-bedrock-grid or data-bedrock-stack
[x] Add support for size props in CSS strings e.g., data-br-grid="minItemWidth:sizeContent3"
[x] Add alignment props to stack component
[x] add support for space-around for inline and inline cluster
[x] Add support for Kebab case on custom properties

Bedrock-Layouts / Bedrock