Change Details

In addition to props, developers can bind attributes to Vue components when using them, like so: ``` <cdx-text-input placeholder="Search" /> ``` By default, all attributes will be applied to the root element of the component. Sometimes, though, this is not what we want. In the example above, we actually want the `placeholder` to be applied to the `<input>` element within the TextArea component, not to the outer `<div>` element. In order to actually work as a placeholder attribute, it must be bound to the `<input>`. However, there are 2 attributes that should always be bound to the root element: `class` and `style`. When a developer adds a custom CSS class to a Vue component, for example, they probably want that class on the outer-most element so they can apply styles to the entire component and any of its sub-elements. To resolve this common issue, we have created a composable in Codex called `useSplitAttributes`. See the [[ https://doc.wikimedia.org/codex/main/contributing/contributing-code/developing-components.html#inheriting-attributes | Codex contributing docs ]] for more info. --- ### Acceptance criteria - [] `useSplitAttributes` is implemented in the CdxTextArea component - [] A `placeholder` attribute is added to the TextAreaDemo component to show that this works as expected

In addition to props, developers can bind attributes to Vue components when using them, like so: ``` <cdx-text-input placeholder="Search" /> ``` By default, all attributes will be applied to the root element of the component. Sometimes, though, this is not what we want. In the example above, we actually want the `placeholder` to be applied to the `<input>` element within the TextArea component, not to the outer `<div>` element. In order to actually work as a placeholder attribute, it must be bound to the `<input>`. However, there are 2 attributes that should always be bound to the root element: `class` and `style`. When a developer adds a custom CSS class to a Vue component, for example, they probably want that class on the outer-most element so they can apply styles to the entire component and any of its sub-elements. To resolve this common issue, we have created a composable in Codex called `useSplitAttributes`. See the [[ https://doc.wikimedia.org/codex/main/contributing/contributing-code/developing-components.html#inheriting-attributes | Codex contributing docs ]] for more info. --- ### Acceptance criteria - [] `useSplitAttributes` is implemented in the CdxTextArea component - [] A new snapshot test is added to demonstrate this behavior (see TextInput.test.ts for an example) - [] A `placeholder` attribute is added to the TextAreaDemo component to show that this works as expected

In addition to props, developers can bind attributes to Vue components when using them, like so: ``` <cdx-text-input placeholder="Search" /> ``` By default, all attributes will be applied to the root element of the component. Sometimes, though, this is not what we want. In the example above, we actually want the `placeholder` to be applied to the `<input>` element within the TextArea component, not to the outer `<div>` element. In order to actually work as a placeholder attribute, it must be bound to the `<input>`. However, there are 2 attributes that should always be bound to the root element: `class` and `style`. When a developer adds a custom CSS class to a Vue component, for example, they probably want that class on the outer-most element so they can apply styles to the entire component and any of its sub-elements. To resolve this common issue, we have created a composable in Codex called `useSplitAttributes`. See the [[ https://doc.wikimedia.org/codex/main/contributing/contributing-code/developing-components.html#inheriting-attributes | Codex contributing docs ]] for more info. --- ### Acceptance criteria - [] `useSplitAttributes` is implemented in the CdxTextArea component - [] A new snapshot test is added to demonstrate this behavior (see TextInput.test.ts for an example) - [] A `placeholder` attribute is added to the TextAreaDemo component to show that this works as expected