Clean-up Foundation CSS leftovers (#11796)

* Remove deprecated `_decidim-settings.scss` file for new applications

* Add instructions for removing deprecated `_decidim-settings.scss` file in existing apps

* Change FoundationRailsHelper comment to diferentiate it of vanilla Foundation

* Update comment about the settings in `decidim_application.scss` for new apps

* Remove misinformation from a comment

It probably made sense before, but now it's just wrong

* Refactor RELEASE_NOTES.md instructions regarding Tailwind CSS migration

* Add instruction about changing `decidim-application.scss` for existing apps

* Remove foundation-datepicker package and CSS

* Fix markdown-lint offenses

RELEASE_NOTES.md

@@ -98,7 +98,28 @@ These are one time actions that need to be done after the code is updated in the
 
 The redesign has introduced Tailwind CSS framework to compile CSS. It integrates with Webpacker, which generates Tailwind configuration dynamically when Webpacker is invoked.
 
-You will need to add `tailwind.config.js` to your app `.gitignore`. If you generate a new Decidim app from scratch, that entry will already be included in the `.gitignore`.
+There are some actions that you will need to do in your existing application that's already done in new applications:
+
+- Add `tailwind.config.js` to your app's `.gitignore`.
+
+```console
+echo tailwind.config.js >> .gitignore
+```
+
+- Migrate your settings from your applications's `_decidim-settings.scss` file, available at `app/packs/stylesheets/decidim/_decidim-settings.scss`.
+If you want to define the colors and other Tailwind related configurations, you can do it following the instructions on the documentation on how to [customize Tailwind](https://docs.decidim.org/en/develop/customize/styles.html#_tailwind_css).
+
+- After that's done, remove your `_decidim-settings.scss` file.
+
+```console
+rm app/packs/stylesheets/decidim/_decidim-settings.scss
+```
+
+- Remove this comment from your `decidim-application.scss` file, available at `app/packs/stylesheets/decidim/decidim_application.scss`.
+
+```javascript
+// To override CSS variables or Foundation settings use _decidim-settings.scss
+```
 
 You can read more about this change on PR [\#9480](https://github.com/decidim/decidim/pull/9480).
 

decidim-admin/app/helpers/decidim/admin/settings_helper.rb

@@ -116,7 +116,7 @@ def render_enum_form_field(form, attribute, name, i18n_scope, options)
       end
 
       # Get the translation for a given attribute
-      # Returns a translation or nil. If nil, ZURB Foundation will not add the help_text.
+      # Returns a translation or nil. If nil, FoundationRailsHelper will not add the help_text.
       #
       # @param name (see #settings_attribute_input)
       # @param suffix [String] What suffix the i18n key has

decidim-admin/app/packs/stylesheets/decidim/admin/_legacy_foundation.scss

@@ -480,7 +480,3 @@ li.opens-left > .is-dropdown-submenu {
     }
   }
 }
-
-/* stylelint-disable */
-.datepicker{display:none;position:absolute;padding:4px;margin-top:1px;direction:ltr}.datepicker.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;float:left;display:none;min-width:160px;list-style:none;background-color:#fff;border:1px solid rgba(0,0,0,.2);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;color:#333;font-size:13px;line-height:18px}.datepicker.dropdown-menu td,.datepicker.dropdown-menu th{padding:4px 5px}.datepicker table{border:0;margin:0;width:auto}.datepicker table tr td span{display:block;width:23%;height:54px;line-height:54px;float:left;margin:1%;cursor:pointer}.datepicker td,.datepicker th{text-align:center;width:20px;height:20px;border:0;font-size:12px;padding:4px 8px;cursor:pointer}.datepicker td{background:#fff}.datepicker td span.active,.datepicker td.active.day,.datepicker td.active.year{background:#2ba6cb}.datepicker td.new,.datepicker td.old{color:#999}.datepicker td span.month.disabled,.datepicker td span.year.disabled,.datepicker td.day.disabled{color:#eee}.datepicker th{background:#fff}.datepicker th span.active,.datepicker th.active.day,.datepicker th.active.year{background:#2ba6cb}.datepicker th.date-switch{width:145px}.datepicker .cw{font-size:10px;width:12px;padding:0 2px 0 5px;vertical-align:middle}.datepicker.days div.datepicker-days,.datepicker.months div.datepicker-months,.datepicker.years div.datepicker-years{display:block}.datepicker-dropdown:after,.datepicker-dropdown:before{content:"";display:inline-block;position:absolute}.datepicker thead tr:first-child th{cursor:pointer}.datepicker thead tr:first-child th.cw{cursor:default;background-color:transparent}.datepicker tfoot tr:first-child th{cursor:pointer}.datepicker-inline{width:220px}.datepicker-rtl{direction:rtl}.datepicker-rtl table tr td span{float:right}.datepicker-dropdown{top:0;left:0}.datepicker-dropdown:before{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:1px solid rgba(0,0,0,.2);top:-7px;left:6px}.datepicker-dropdown:after{border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;top:-6px;left:7px}.datepicker-dropdown::after,.datepicker-dropdown::before,.datepicker>div{display:none}.datepicker-close{position:absolute;top:-30px;right:0;width:15px;height:30px;padding:0;display:none}.table-striped .datepicker table tr td,.table-striped .datepicker table tr th{background-color:transparent}
-/* stylelint-enable */

decidim-admin/app/packs/stylesheets/decidim/admin/_table-list.scss

@@ -1,4 +1,3 @@
-//Override Foundation defaults
 .table-scroll {
   @apply overflow-x-auto;
 

decidim-core/app/cells/decidim/upload_modal_cell.rb

@@ -72,7 +72,7 @@ def required?
       options[:required] == true
     end
 
-    # By default Foundation adds form errors next to input, but since input is in the modal
+    # By default FoundationRailsHelper adds form errors next to input, but since input is in the modal
     # and modal is hidden by default, we need to add an additional validation field to the form.
     # This should only be necessary when file is required by the form.
     def input_validation_field

decidim-core/app/helpers/concerns/decidim/flash_helper_extensions.rb

@@ -8,7 +8,7 @@ module FlashHelperExtensions
 
     included do
       # Displays the flash messages found in ActionDispatch's +flash+ hash using
-      # Foundation's +callout+ component.
+      # FoundationRailsHelper's +callout+ component.
       #
       # Overrides original function from foundation_rails_helper gem to allow
       # flash messages with links inside.
@@ -34,7 +34,7 @@ def display_flash_messages(closable: true, key_matching: {})
 
       private
 
-      # Private: Foundation alert box.
+      # Private: FoundationRailsHelper alert box.
       #
       # Overrides the foundation alert box helper for adding accessibility tags.
       #
@@ -65,7 +65,7 @@ def alert_box(value, alert_class, closable, opts = {})
         end
       end
 
-      # Private: Foudation alert box close link.
+      # Private: FoundationRailsHelper alert box close link.
       #
       # Overrides the foundation alert box close link helper for the aria-label
       # translations.

decidim-core/lib/decidim/form_builder.rb

@@ -856,7 +856,7 @@ def image_dimensions_help(dimensions_info)
     end
 
     # Private: Creates a tag from the given options for the field prefix and
-    # suffix. Overridden from Foundation Rails helper to make the generated HTML
+    # suffix. Overridden from FoundationRailsHelper to make the generated HTML
     # valid since these elements are printed within <label> elements and <div>'s
     # are not allowed there.
     def tag_from_options(name, options)
@@ -868,7 +868,7 @@ def tag_from_options(name, options)
     end
 
     # Private: Wraps the prefix and postfix for the field. Overridden from
-    # Foundation Rails helper to make the generated HTML valid since these
+    # FoundationRailsHelper to make the generated HTML valid since these
     # elements are printed within <label> elements and <div>'s are not allowed
     # there.
     def wrap_prefix_and_postfix(block, prefix_options, postfix_options)

decidim-generators/lib/decidim/generators/app_templates/decidim_application.scss

@@ -2,6 +2,7 @@
 // Notice that this file is included at the very end of the stylesheets packs to have
 // more priority
 //
-// To override CSS variables or Foundation settings use _decidim-settings.scss
+// To override the Tailwind CSS configuration you can do so by following the instructions
+// available at https://docs.decidim.org/en/develop/customize/styles.html#_tailwind_css
 //
 // By default this is empty.

decidim-generators/lib/decidim/generators/install_generator.rb

@@ -78,9 +78,8 @@ def smtp_environment
       end
 
       def install_decidim_webpacker
-        # Copy CSS files
+        # Copy CSS file
         copy_file "decidim_application.scss", "app/packs/stylesheets/decidim/decidim_application.scss"
-        copy_file "_decidim-settings.scss", "app/packs/stylesheets/decidim/_decidim-settings.scss"
 
         # Copy JS application file
         copy_file "decidim_application.js", "app/packs/src/decidim/decidim_application.js"

decidim_app-design/packages/core/package.json

@@ -50,7 +50,6 @@
     "dayjs": "^1.11.0",
     "diff": "^5.0.0",
     "drag-on-drop": "^3.6.1",
-    "foundation-datepicker": "1.5.6",
     "foundation-sites": "^6.7.0",
     "graphiql": "^1.4.7",
     "html5sortable": "0.10.0",

docs/modules/develop/pages/managing_translations_i18n.adoc

@@ -13,7 +13,6 @@ Decidim uses https://crowdin.com/[Crowdin] to manage the translations.
 * Setup the new language in https://crowdin.com/project/decidim[_Crowdin's Decidim project_] (or open an issue on Github asking an admin to do that).
 * Add the locale mapping in the `crowdin.yml` file
 * Translate at least one key from every engine, so, your _yaml_ files are not empty. The easiest way to do this is to automatically translate and sync all the content. Later you will be able to fix the content that was not properly translated.
-* Add https://github.com/najlepsiwebdesigner/foundation-datepicker/tree/master/js/locales[Foundation Datepicker]'s translations (https://github.com/decidim/decidim/pull/2039[PR]).
 * Add the new language to `available_locales` (https://github.com/decidim/decidim/pull/1991[PR]).
 * Add the language in https://github.com/decidim/decidim/pull/5080/files#diff-9c9dc1c8c25dcecdfb8ce555d5ef5e47R15[decidim-core/spec/lib/available_locales_spec.rb].
 

packages/core/package.json

@@ -50,7 +50,6 @@
     "dayjs": "^1.11.0",
     "diff": "^5.0.0",
     "drag-on-drop": "^3.6.1",
-    "foundation-datepicker": "1.5.6",
     "foundation-sites": "^6.7.0",
     "graphiql": "^1.4.7",
     "html5sortable": "0.10.0",