From 7f9435d3cfdd5c0a0d0cf8012ee5ac72cfb0ca47 Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Mon, 15 Aug 2022 11:41:53 -0700 Subject: [PATCH] refactor(tables): removes table striping props, classes, and styling --- .../app/views/examples/shared/_props.html.erb | 2 +- .../examples/shared/_props_improved.html.erb | 10 ++++---- docs/app/views/pages/container.html.erb | 2 +- docs/app/views/pages/gap.html.erb | 1 - docs/app/views/pages/spacing.html.erb | 1 - .../app/helpers/sage_table_helper.rb | 4 +--- .../app/sage_components/sage_table.rb | 1 - .../sage_components/_sage_table.html.erb | 1 - .../lib/stylesheets/components/_table.scss | 23 +++++++------------ packages/sage-react/lib/Table/Table.jsx | 4 ---- 10 files changed, 16 insertions(+), 33 deletions(-) diff --git a/docs/app/views/examples/shared/_props.html.erb b/docs/app/views/examples/shared/_props.html.erb index c7d5e284ca..78c466cc40 100644 --- a/docs/app/views/examples/shared/_props.html.erb +++ b/docs/app/views/examples/shared/_props.html.erb @@ -2,7 +2,7 @@ <%= sage_component SageCard, {} do %>
- +
diff --git a/docs/app/views/examples/shared/_props_improved.html.erb b/docs/app/views/examples/shared/_props_improved.html.erb index 630853c22e..9295f1f81e 100644 --- a/docs/app/views/examples/shared/_props_improved.html.erb +++ b/docs/app/views/examples/shared/_props_improved.html.erb @@ -1,19 +1,19 @@ <% if defined?(props) %>

Properties

- <%= sage_table_for props, responsive: true, sortable: true, striped: true do | t | %> + <%= sage_table_for props, responsive: true, sortable: true do | t | %> <% t.column :name, label: "Name" do | c | %> <%= md("`#{c[:name]}`") %> - <% end %> + <% end %> <% t.column :description, label: "Description" do | c | %> <%= md(c[:description], use_sage_type: true) %> - <% end %> + <% end %> <% t.column :type, label: "Type" do | c | %> <%= md(c[:type]) %> - <% end %> + <% end %> <% t.column :default, label: "Default" do | c | %> <%= md(c[:default]) %> - <% end %> + <% end %> <% end %>
<% end %> diff --git a/docs/app/views/pages/container.html.erb b/docs/app/views/pages/container.html.erb index 50a4adc5bf..75bb685b5c 100644 --- a/docs/app/views/pages/container.html.erb +++ b/docs/app/views/pages/container.html.erb @@ -7,7 +7,7 @@ )) %> <% end %> -<%= sage_table_for SageTokens::CONTAINER_SPECS, striped: true, responsive: true do |t| %> +<%= sage_table_for SageTokens::CONTAINER_SPECS, responsive: true do |t| %> <% t.column :container, label: "Container" do |c| %> <%= c[:name] %> <%= c[:alias] %> diff --git a/docs/app/views/pages/gap.html.erb b/docs/app/views/pages/gap.html.erb index 31bf99181c..45197b8d99 100644 --- a/docs/app/views/pages/gap.html.erb +++ b/docs/app/views/pages/gap.html.erb @@ -8,7 +8,6 @@

The following gap tokens are used throughout Sage:

<%= sage_component SageTable, { - striped: true, headers: [ "Token", "Value", diff --git a/docs/app/views/pages/spacing.html.erb b/docs/app/views/pages/spacing.html.erb index f5ff5cb54e..51c8358372 100644 --- a/docs/app/views/pages/spacing.html.erb +++ b/docs/app/views/pages/spacing.html.erb @@ -8,7 +8,6 @@

The following spacing tokens are used throughout Sage:

<%= sage_component SageTable, { - striped: true, headers: ["Token", "Value"], rows: sage_spacers, } %> diff --git a/docs/lib/sage_rails/app/helpers/sage_table_helper.rb b/docs/lib/sage_rails/app/helpers/sage_table_helper.rb index e97adadfe8..2b92ca007d 100644 --- a/docs/lib/sage_rails/app/helpers/sage_table_helper.rb +++ b/docs/lib/sage_rails/app/helpers/sage_table_helper.rb @@ -80,7 +80,7 @@ def sortable_title end class SageTableFor - attr_reader :caption, :caption_side, :columns, :condensed, :template, :id, :class_name, :collection, :has_borders, :row_proc, :sortable, :responsive, :skip_headers, :striped, :reset_above, :reset_below + attr_reader :caption, :caption_side, :columns, :condensed, :template, :id, :class_name, :collection, :has_borders, :row_proc, :sortable, :responsive, :skip_headers, :reset_above, :reset_below delegate :content_tag, :tag, to: :template def initialize(template, collection, opts={}) @@ -96,7 +96,6 @@ def initialize(template, collection, opts={}) @responsive = opts[:responsive] @skip_headers = opts[:skip_headers] @sortable = opts[:sortable] - @striped = opts[:striped] @id = opts[:id] @columns = [] end @@ -133,7 +132,6 @@ def table_contents table_classes = "sage-table" table_classes << " sage-table--condensed" if condensed table_classes << " sage-table--sortable" if sortable - table_classes << " sage-table--striped" if striped table_classes << " #{class_name}" if class_name content_tag "table", id: id, class: table_classes do diff --git a/docs/lib/sage_rails/app/sage_components/sage_table.rb b/docs/lib/sage_rails/app/sage_components/sage_table.rb index 666f3b608b..490fd73b1c 100644 --- a/docs/lib/sage_rails/app/sage_components/sage_table.rb +++ b/docs/lib/sage_rails/app/sage_components/sage_table.rb @@ -10,6 +10,5 @@ class SageTable < SageComponent responsive: [:optional, TrueClass], rows: [:optional, Array], selectable: [:optional, TrueClass], - striped: [:optional, TrueClass], }) end diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_table.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_table.html.erb index af05082590..b498aabe64 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_table.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_table.html.erb @@ -14,7 +14,6 @@ is_responsive = component.responsive.present? ? component.responsive : true
Property
<%= "sage-table--selectable" if component.selectable %> <%= "sage-table--condensed" if component.condensed %> " diff --git a/packages/sage-assets/lib/stylesheets/components/_table.scss b/packages/sage-assets/lib/stylesheets/components/_table.scss index 2f557b46e0..75ee0bb0b1 100644 --- a/packages/sage-assets/lib/stylesheets/components/_table.scss +++ b/packages/sage-assets/lib/stylesheets/components/_table.scss @@ -4,7 +4,6 @@ /// @group sage //// - // Borders and sizing $-table-header-border: rem(1px) solid sage-color(grey, 300); $-table-cell-padding-xs: sage-spacing(xs); @@ -29,11 +28,15 @@ $-table-overflow-indicator-width: sage-spacing(sm); $-table-overflow-indicator-color-start: rgba(255, 255, 255, 0); $-table-overflow-indicator-color-end: sage-color(white); $-table-overflow-indicator-opacity: 0.95; -$-table-overflow-indicator-gradient: linear-gradient(90deg, $-table-overflow-indicator-color-start 0%, rgba($-table-overflow-indicator-color-end, $-table-overflow-indicator-opacity) 100%); +$-table-overflow-indicator-gradient: linear-gradient( + 90deg, + $-table-overflow-indicator-color-start 0%, + rgba($-table-overflow-indicator-color-end, $-table-overflow-indicator-opacity) + 100% +); // Other -$-table-row-color-stripe: sage-color(grey, 200); -$-table-row-color-hover: sage-color(primary, 100); +$-table-row-color-hover: sage-color(grey, 100); $-table-cell-focus: sage-color(charcoal, 300); $-table-cell-truncate-width: 6.5em; $-table-sort-indicator-width: rem(5px); @@ -41,7 +44,6 @@ $-table-sort-indicator-direction: rem(7px); $-table-checkbox-width: rem(20px); $-table-avatar-width: rem(32px); - // stylelint-disable selector-max-compound-selectors, max-nesting-depth, selector-no-qualifying-type .sage-table { @@ -131,15 +133,6 @@ $-table-avatar-width: rem(32px); } } -// Alternating rows of striped colors -.sage-table--striped { - tbody { - tr:nth-child(odd) { - background-color: $-table-row-color-stripe; - } - } -} - // Sortable rows .sage-table--sortable { .sage-table__sort-link { @@ -229,7 +222,7 @@ $-table-avatar-width: rem(32px); .sage-panel & { @include overflow-scroll(); overflow-y: visible; - max-width: calc(100% + #{ 2 * sage-spacing(md)}); + max-width: calc(100% + #{2 * sage-spacing(md)}); } } diff --git a/packages/sage-react/lib/Table/Table.jsx b/packages/sage-react/lib/Table/Table.jsx index 44e4f10ecb..7884a58558 100644 --- a/packages/sage-react/lib/Table/Table.jsx +++ b/packages/sage-react/lib/Table/Table.jsx @@ -40,7 +40,6 @@ export const Table = ({ hasDataBeyondCurrentRows, headers, isResponsive, - isStriped, onSelectRowHook, resetAbove, resetBelow, @@ -69,7 +68,6 @@ export const Table = ({ 'sage-table', { 'sage-table--selectable': selectable, - 'sage-table--striped': isStriped, } ); @@ -342,7 +340,6 @@ Table.defaultProps = { hasDataBeyondCurrentRows: false, headers: [], isResponsive: true, - isStriped: false, onSelectRowHook: null, resetAbove: false, resetBelow: false, @@ -370,7 +367,6 @@ Table.propTypes = { PropTypes.shape({}), ]), isResponsive: PropTypes.bool, - isStriped: PropTypes.bool, onSelectRowHook: PropTypes.func, resetAbove: PropTypes.bool, resetBelow: PropTypes.bool,