Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor: Extract component resources into <component>/resources.ts #1419

Open
jcfranco opened this issue Dec 18, 2020 · 8 comments
Open

Refactor: Extract component resources into <component>/resources.ts #1419

jcfranco opened this issue Dec 18, 2020 · 8 comments
Labels
0 - new New issues that need assignment. epic Large scale issues to be broken up into sub-issues and tracked via sprints and/or project. estimate - 8 Requires input from team, consider smaller steps. p - low Issue is non core or affecting less that 10% of people using the library refactor Issues tied to code that needs to be significantly reworked. spike complete Issues that have a research spike completed and dev work can proceed
Milestone
2025-06-24 - Jun ...

Comments

@jcfranco
Copy link
Member

jcfranco commented Dec 18, 2020 •
edited
Loading

Summary

For reusability between tests and components, CSS, SLOTS, TEXT (no longer applicable after built-in localization was introduced), and additional resources should be extracted into a supporting <calcite-component>/resources.ts file.

Measure of Success

  • extract applicable entries (CSS, slots, text, values [if applicable]) to component resources file
  • Share resources between wherever applicable (component, tests, stories)
  • Rename existing resources.ts to <component-name>.resources.ts – dropped in favor of conciseness in imports. Unlike other <component-name>.<type>.<extension> files, resource files are imported in one or multiple files.
  • Update CONVENTIONS.md

Which Component

  • accordion
  • accordion-item
  • action
  • action-bar
  • action-group
  • action-menu
  • action-pad
  • alert
  • avatar
  • block
  • block-section
  • button
  • card
  • checkbox
  • chip
  • chip-group
  • color-picker
  • color-picker-hex-input
  • color-picker-swatch
  • combobox
  • combobox-item
  • combobox-item-group
  • date-picker
  • date-picker-day
  • date-picker-month-header
  • date-picker-month
  • dropdown
  • dropdown-group
  • dropdown-item
  • fab
  • filter
  • flow
  • flow-item
  • functional
    • ExpandToggle
    • FloatingArrow
    • Heading
    • XButton
  • graph
  • handle
  • icon
  • inline-editable
  • input
  • input-date-picker
  • input-message
  • input-number
  • input-text
  • input-time-picker
  • input-time-zone
  • label
  • link
  • list
  • list-item
  • list-item-group
  • loader
  • menu
  • menu-item (SLOTS object only)
  • meter
  • modal
  • navigation
  • navigation-logo
  • navigation-user
  • notice
  • option
  • option-group
  • pagination
  • panel
  • pick-list (deprecated)
  • pick-list-group (deprecated)
  • pick-list-item (deprecated)
  • popover
  • progress
  • radio-button
  • radio-group
  • radio-group-item
  • rating
  • scrim
  • segmented-control
  • segmented-control-item
  • `select
  • sheet
  • shell
  • shell-center-row
  • shell-panel
  • slider
  • split-button
  • stack
  • stepper
  • stepper-item
  • switch
  • tab
  • tab-nav
  • tab-title
  • table
  • table-header
  • table-row
  • table-cell
  • tabs
  • text-area
  • tile
  • tile-select
  • tile-select-group
  • time-picker
  • tip
  • tip-group
  • tip-manager
  • tooltip
  • tree
  • tree-item
  • value-list (deprecated)
  • value-list-item (deprecated)

Resources

Examples:
@jcfranco jcfranco added refactor Issues tied to code that needs to be significantly reworked. 0 - new New issues that need assignment. labels Dec 18, 2020
@jcfranco jcfranco added this to the Backlog milestone Dec 18, 2020
@jcfranco jcfranco self-assigned this Dec 18, 2020
@julio8a julio8a added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Jan 28, 2021
@julio8a
Copy link

julio8a commented Jul 16, 2021

This one valid?

@jcfranco jcfranco added the p - low Issue is non core or affecting less that 10% of people using the library label Dec 21, 2021
@jcfranco
Copy link
Member Author

Will revisit this once #2913 lands.

@jcfranco jcfranco changed the title Refactor: Extract component resources into <component>.resources.ts Refactor: Extract component resources into <component>/resources.ts Jun 30, 2022
@jcfranco jcfranco added 0 - new New issues that need assignment. and removed p - low Issue is non core or affecting less that 10% of people using the library 1 - assigned Issues that are assigned to a sprint and a team member. labels Jun 30, 2022
@jcfranco jcfranco removed their assignment Jun 30, 2022
@jcfranco jcfranco modified the milestones: Freezer, Back burner Jun 30, 2022
@brittneytewks brittneytewks added the needs triage Planning workflow - pending design/dev review. label May 31, 2023
@brittneytewks brittneytewks removed this from the Back burner milestone May 31, 2023
@Elijbet Elijbet self-assigned this Aug 18, 2023
@Elijbet Elijbet added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Sep 12, 2023
@geospatialem geospatialem added p - low Issue is non core or affecting less that 10% of people using the library estimate - 8 Requires input from team, consider smaller steps. labels Oct 16, 2023
@geospatialem
Copy link
Member

Split up the effort by individual components to determine effort needed across the components.

Once the individual breakdown is setup, could be a good first issue and with a lower effort, likely an estimate-2.

@geospatialem geospatialem added spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. and removed needs triage Planning workflow - pending design/dev review. labels Oct 16, 2023
@geospatialem geospatialem added this to the 2023 December Priorities milestone Oct 16, 2023
@Elijbet
Copy link
Contributor

Elijbet commented Oct 29, 2023 •
edited
Loading

I assume these are divided on a per-component basis, even within nested parent-child relationship trees? We won't be consolidating resources for those, right?

Eg. tab, tabs, tab-nav, tab-title could all share .content or .container if we opt to combine their resources.

I think these should either have individual resources or share one common file, or else we'll end up importing 2 files, which seems messy.

@geospatialem How should I approach the task of dividing these into individual components to assess the required effort across each component? Should I be transforming this issue into an epic?

@geospatialem geospatialem added the epic Large scale issues to be broken up into sub-issues and tracked via sprints and/or project. label Oct 30, 2023
@geospatialem geospatialem removed the spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. label Oct 30, 2023
@geospatialem
Copy link
Member

How should I approach the task of dividing these into individual components to assess the required effort across each component? Should I be transforming this issue into an epic?

Summarizing our Teams discussion. Will approach this issue as a means to organize the component audit, and was it needed across the design system. Updated the issue summary above to include a list of all components, including functional components, for inclusion of the audit, targeted for January.

cc: @Elijbet

@geospatialem geospatialem added the spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. label Dec 18, 2023
@geospatialem geospatialem assigned jcfranco and unassigned Elijbet Dec 18, 2023
@geospatialem
Copy link
Member

Spike to confirm across components which need to be addressed, and which are already following the expected/anticipated pattern.

@jcfranco
Copy link
Member Author

jcfranco commented Dec 18, 2023 •
edited
Loading

Updated list with remaining components.

Findings

  • Remaining components are mostly to introduce CSS and SLOTS (1 occurrence) lookup objects
  • ☝️ should be used to update components and E2E tests (stories no longer need to be updated as we have dedicated test stories that use static HTML scenarios)
  • We no longer need to worry about TEXT after adding built-in translation support.

@jcfranco jcfranco added the spike complete Issues that have a research spike completed and dev work can proceed label Dec 18, 2023
@github-actions github-actions bot added 0 - new New issues that need assignment. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. 2 - in development Issues that are actively being worked on. labels Dec 18, 2023
@github-actions GitHub Actions
Copy link
Contributor

cc @geospatialem, @brittneytewks

@geospatialem geospatialem added this to the 2024-07-30 - Jul Release milestone Jan 10, 2024
@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jan 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
0 - new New issues that need assignment. epic Large scale issues to be broken up into sub-issues and tracked via sprints and/or project. estimate - 8 Requires input from team, consider smaller steps. p - low Issue is non core or affecting less that 10% of people using the library refactor Issues tied to code that needs to be significantly reworked. spike complete Issues that have a research spike completed and dev work can proceed
Projects
None yet
Milestone
2025-06-24 - Jun Milestone
Development

No branches or pull requests
6 participants
@jcfranco @alisonailea @geospatialem @julio8a @Elijbet @brittneytewks