Skip to content

Commit

Permalink
Add <dialog> and display:grid
Browse files Browse the repository at this point in the history
  • Loading branch information
necolas committed Sep 14, 2023
1 parent 43e14bb commit 0e8f0b7
Showing 1 changed file with 36 additions and 2 deletions.
38 changes: 36 additions & 2 deletions proposals/0000-reduce-fragmentation.md
Original file line number Diff line number Diff line change
Expand Up @@ -498,6 +498,30 @@ Listen to these events using `addEventListener()` or by assigning an event liste
- [ ] [`change`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event). Fired when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed and committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value. Also available via the `on-change` property.
- [ ] [`input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event). Fired when the value of an `<input>`, `<select>`, or `<textarea>` element has been changed. Also available via the `on-input` property.

## HTMLDialogElement

The HTMLDialogElement interface represents an HTML `<dialog>` element, providing the properties and methods used to manipulate image elements.

### Properties

Inherits properties from its parent, HTMLElement.

- [ ] [`HTMLDialogElement.open](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/open). A boolean value representing the state of the open HTML attribute. true means it is set, and therefore the dialog is shown. false means it not set, and therefore the dialog is not shown.
- [ ] [HTMLDialogElement.returnValue](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue). A string representing the returnValue of the dialog.

### Methods

Inherits properties from its parent, HTMLElement.

- [ ] [`HTMLDialogElement.close()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close). Closes the dialog. An optional string may be passed as an argument, updating the returnValue of the dialog.
- [ ] [`HTMLDialogElement.show()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/show).Displays the dialog modelessly, i.e. still allowing interaction with content outside of the dialog.
- [ ] [`HTMLDialogElement.showModal()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal). Displays the dialog as a modal, over the top of any other dialogs that might be present. Everything outside the dialog are inert with interactions outside the dialog being blocked.

### Events

- [ ] `cancel`. Also available via the `on-cancel` prop.
- [ ] `close`. Also available via the `on-close` prop.

## HTMLImageElement

The HTMLImageElement interface represents an HTML `<img>` element, providing the properties and methods used to manipulate image elements.
Expand Down Expand Up @@ -582,6 +606,7 @@ Content sectioning elements allow you to organize the document content into logi

* [ ] [`article`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) is equivalent to `View` with `display:block` layout and `role="article"`.
* [ ] [`aside`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside).
* [ ] [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
* [ ] [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) is equivalent to `View` with `display:block` layout.
* [ ] [`footer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer).
* [ ] [`h1-6`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).
Expand Down Expand Up @@ -738,12 +763,20 @@ Resolves proposal [#492](https://github.com/react-native-community/discussions-a

## `<a>` props

Additional props for `<a>`.

- [ ] [`download`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download).
- [ ] [`href`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href). Clicking will always attempt to open the URL in a browser, mail client, etc. Use of `e.preventDefault()` in an event handler will disable this behavior and allow custom routing logic to handle the interaction.
- [ ] [`referredPolicy`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-referrerpolicy).
- [ ] [`rel`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel).
- [ ] [`target`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target).

## `<dailog>` props

Additional props for `<dialog>`.

- [ ] [`open`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#open).

## `<img>` props

Additional props for `<img>`.
Expand Down Expand Up @@ -1078,7 +1111,7 @@ Consideration is also required to determine what the final value of a property i

Miscellaneous CSS properties and values that should be supported on native.

* [ ] [`backgroundImage`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image). Add support for setting background images via `url()`. Stretch: support CSS gradients.
* [ ] [`backgroundImage`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image). Add support for setting background images via `url()`. Stretch: support CSS gradients, e.g., `linear-gradient()`.
* [ ] [`backgroundOrigin`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin).
* [ ] [`backgroundPosition`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position).
* [ ] [`backgroundRepeat`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat).
Expand All @@ -1087,7 +1120,7 @@ Miscellaneous CSS properties and values that should be supported on native.
* [ ] [`boxShadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow). Add native support for CSS box shadows to replace buggy, iOS-specific `shadow*` styles. Resolves issue (#26110)[https://github.com/facebook/react-native/pull/26110] and [multiple other issues](https://github.com/facebook/react-native/search?q=ios+shadow&type=issues).
* [ ] [`caretColor`](https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color).
* [ ] [`clipPath`](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path).
* [ ] [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) values of `block`, `contents` (resolves proposal [#348](https://github.com/react-native-community/discussions-and-proposals/issues/348)), `inline`, `inline-block`, `inline-flex`.
* [ ] [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) values of `block`, `contents` (resolves proposal [#348](https://github.com/react-native-community/discussions-and-proposals/issues/348)), `inline`, `inline-block`, `inline-flex`, and `grid`.
* [ ] [`float`](https://developer.mozilla.org/en-US/docs/Web/CSS/float).
* [ ] [`justifySelf`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self). Sets the way a box is justified inside its alignment container along the appropriate axis.
* [ ] ([`lineClamp`](https://www.w3.org/TR/css-overflow-3/#propdef-line-clamp) is equivalent to `numberOfLines` prop on `<Text>` components).
Expand All @@ -1104,6 +1137,7 @@ Miscellaneous CSS properties and values that should be supported on native.
* [ ] [`scrollSnap*`](https://drafts.csswg.org/css-scroll-snap-1/#overview)
* [ ] `textShadow`. Add native support for CSS text shadows. Resolves issue (#26110)[https://github.com/facebook/react-native/pull/26110].
* [ ] [`touchAction`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action).
* [x] [`transformOrigin`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).
* [ ] [`transformStyle`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style). Resolves proposal [#425](https://github.com/react-native-community/discussions-and-proposals/issues/425).
* [ ] [`translate`](https://developer.mozilla.org/en-US/docs/Web/CSS/translate).
* [ ] [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility). Add support for visually hiding elements.
Expand Down

0 comments on commit 0e8f0b7

Please sign in to comment.