Skip to content

Commit

Permalink
refactor(input, input-number, input-text): avoid redundant :host (#…
Browse files Browse the repository at this point in the history
…8163)

**Related Issue:** N/A

## Summary

✨🧹✨
  • Loading branch information
jcfranco authored and alisonailea committed Dec 7, 2023
1 parent 3cb62c7 commit 21c9ea7
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 31 deletions.
18 changes: 9 additions & 9 deletions packages/calcite-components/conventions/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ We follow Stencil's suggested component structure. See their [style guide](https

Calcite Components broadly targets two groups of projects inside Esri:

- **Sites** like [esri.com](https://esri.com) and [developers.arcgis.com](https://developers.arcgis.com).
- **Apps** like [ArcGIS Online](https://arcgis.com), [Vector Tile Style Editor](https://developers.arcgis.com/vector-tile-style-editor), [Workforce](https://www.esri.com/en-us/arcgis/products/workforce/overview), [ArcGIS Hub](https://hub.arcgis.com) etc...
- __Sites__ like [esri.com](https://esri.com) and [developers.arcgis.com](https://developers.arcgis.com).
- __Apps__ like [ArcGIS Online](https://arcgis.com), [Vector Tile Style Editor](https://developers.arcgis.com/vector-tile-style-editor), [Workforce](https://www.esri.com/en-us/arcgis/products/workforce/overview), [ArcGIS Hub](https://hub.arcgis.com) etc...

Components should present the minimum possible implementation to be usable by both sites and apps and leave as much as possible to users.

Expand All @@ -34,10 +34,10 @@ However components are allowed to:
- Use or implement `localStorage` if there is a specific use case.
- Communicate with other components if a specific use case exists.

**Discussed In**:
__Discussed In__:

- [Should tabs support syncing and loading from localstorage](https://github.com/ArcGIS/calcite-components/pull/27) . **Yes** because such feature are difficult to implement for **Sites** and would require lots of additional JavaScript work on the part of teams and authors
- [Should switch support a label](https://github.com/ArcGIS/calcite-components/pull/24#discussion_r289424140). **No** because label place
- [Should tabs support syncing and loading from localstorage](https://github.com/ArcGIS/calcite-components/pull/27) . __Yes__ because such feature are difficult to implement for __Sites__ and would require lots of additional JavaScript work on the part of teams and authors
- [Should switch support a label](https://github.com/ArcGIS/calcite-components/pull/24#discussion_r289424140). __No__ because label place

## Events

Expand All @@ -55,7 +55,7 @@ Event names should be treated like global variables since they can collide with
- If an existing event can be listened to, don't create a new custom event. For example, there is no need to create a `calciteButtonClick` event because a standard `click` event will still be fired from the element.
- For consistency, use `calcite<ComponentName>Change` for value change events.

**Discussed In:**
__Discussed In:__

- <https://github.com/Esri/calcite-design-system/pull/24/files/3446c89010e3ef0421803d68d627aba2e7c4bfa0#r289430227>

Expand All @@ -81,7 +81,7 @@ Only attach additional data to your event if that data cannot be determined from

### Native event cancellation

When a component **handles events for its own interaction** (e.g., moving between list items, closing an open menu), if the event is tied to default browser behavior (e.g., space key scrolling the page), `Event.preventDefault()` must be called to avoid mixed behavior.
When a component __handles events for its own interaction__ (e.g., moving between list items, closing an open menu), if the event is tied to default browser behavior (e.g., space key scrolling the page), `Event.preventDefault()` must be called to avoid mixed behavior.

```tsx
class SomeInputTypeComponent {
Expand Down Expand Up @@ -179,7 +179,7 @@ interface FocusableComponent {
type FocusId = string;
```

**Note**: Implementations can use the [`focusElement`](https://github.com/Esri/calcite-design-system/blob/f2bb61828f3da54b7dcb5fb1dade12b85d82331e/src/utils/dom.ts#L41-L47) helper to handle focusing both native and calcite components.
__Note__: Implementations can use the [`focusElement`](https://github.com/Esri/calcite-design-system/blob/f2bb61828f3da54b7dcb5fb1dade12b85d82331e/src/utils/dom.ts#L41-L47) helper to handle focusing both native and calcite components.

Examples:

Expand Down Expand Up @@ -279,7 +279,7 @@ Stencil has the capability to build and distribute a large variety of outputs ba

As a best practice we should follow [Ionic's configuration](https://github.com/ionic-team/ionic/blob/master/core/stencil.config.ts) and generate a `bundle` for each component. Stencil will then generate a loader that will dynamically load the components used on the page.

**Note:** This is highly likely to change as we move closer to our first release and as Stencil improves their documentation around their specific methods and build processes.
__Note:__ This is highly likely to change as we move closer to our first release and as Stencil improves their documentation around their specific methods and build processes.

Each root component should have a corresponding bundle entry in `stencil.config.ts`.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -399,18 +399,21 @@ input:focus {
@apply border-t-color-1;
}

.inline-child {
@apply transition-default bg-transparent;
.editing-enabled {
background-color: inherit;
// input needed for higher specificity of these overrides
input {
&.inline-child {
@apply transition-default bg-transparent;
.editing-enabled {
background-color: inherit;
}
}
}

.inline-child:not(.editing-enabled) {
@apply border-color-transparent
&.inline-child:not(.editing-enabled) {
@apply border-color-transparent
flex
cursor-pointer;
padding-inline-start: 0;
cursor-pointer text-ellipsis;
padding-inline-start: 0;
}
}

@include hidden-form-input();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -323,18 +323,21 @@ input[type="text"]::-ms-reveal {
@apply border-t-color-1;
}

.inline-child {
@apply transition-default bg-transparent;
.editing-enabled {
background-color: inherit;
// input needed for higher specificity of these overrides
input {
&.inline-child {
@apply transition-default bg-transparent;
.editing-enabled {
background-color: inherit;
}
}
}

.inline-child:not(.editing-enabled) {
@apply border-color-transparent
&.inline-child:not(.editing-enabled) {
@apply border-color-transparent
flex
cursor-pointer;
padding-inline-start: 0;
cursor-pointer text-ellipsis;
padding-inline-start: 0;
}
}

@include hidden-form-input();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,8 @@ export interface PossibleRegistryArgs<R = any> {
matcher?: Matcher;
}

export interface RegisterTransformer<R = any>
extends Pick<PossibleRegistryArgs<R>, "name" | "type" | "transformer" | "matcher"> {}
export type RegisterTransformer<R = any> = Pick<PossibleRegistryArgs<R>, "name" | "type" | "transformer" | "matcher">;

export interface RegisterFormatter<R = any> extends Pick<PossibleRegistryArgs<R>, "formatter" | "name"> {}
export type RegisterFormatter<R = any> = Pick<PossibleRegistryArgs<R>, "formatter" | "name">;

export interface RegisterFilter<R = any> extends Pick<PossibleRegistryArgs<R>, "matcher" | "name"> {}
export type RegisterFilter<R = any> = Pick<PossibleRegistryArgs<R>, "matcher" | "name">;

0 comments on commit 21c9ea7

Please sign in to comment.